refreshing dynamic views

[Pete]

I start my app with a listview of several states that have links like this:
example:   <li><a href="#two?st=AZ">Arizona</a><li>

My second view (or page) should be populating my div id's for:
<div id="title"></div>
<div id="img"></div>

with this ajax code:

function getUrlVars() {<br>

    var vars = [], hash;<br>

    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');<br>

    for(var i = 0; i < hashes.length; i++)<br>

    {<br>

        hash = hashes[i].split('=');<br>

        vars.push(hash[0]);<br>

        vars[hash[0]] = hash[1];<br>

    }<br>

    return vars;<br>

}    <br>

<br>

var st = getUrlVars()["st"];<br>

<br>

<br>

$(document).ready(function(){<br>

  $.ajax({<br>

       url: 'http://staging.lifecaremediacenter.com/json/states.php?st='+ st,<br>

       method: 'GET',<br>

       dataType: 'jsonp',<br>

       success: function(data){<br>

       $.each(data, function(){<br>

              $('#title').text(this.stname);<br>

              $('#img').attr('src', 'images/states/lrg/' + this.img);<br>

              })        <br>

        }        <br>

   });<br>

});

It will populate the view if I click refresh on the browser, but how do I get this done without having to do a physical refresh each time?

Thanks,
Pete

[Georgi Krustev]

Hello Pete,

 
The document.ready will be called only once. That is why you will need to use ViewInit and/or ViewShow events and there to reset the data. Check this help article for more information.

All the best,
Georgi Krustev
the Telerik team

[Pete]

Thanks for the reply.
You'll have to forgive me, I'm not that well versed in jquery and/or javascript.

Where and how would I call that event inside of the code I posted?

Thanks,
Pete

[Georgi Krustev]

Hello Pete,

 
You should not call the event, instead you need to wire the viewShow event of the application. Please refer to the aforementioned article. In the event handler you can make the Ajax request and populate the elements.

Regards,
Georgi Krustev
the Telerik team

[Pete]

I added

function viewTwo(){

 app.bind("viewShow", function(e){

  // rest of my ajax...

});

}

then put data-init="viewTwo" inside of the start of my second view

Now when I click one of the states I get window[e] is undefined and it shows that the error is happening on line 11 of http://cdn.kendostatic.com/2012.1.124/js/kendo.all.min.js

[Georgi Krustev]

Hello Pete,

 
I will suggest you check the Sushi demo, which I believe implements the required functionality.

Regards,
Georgi Krustev
the Telerik team