refreshing dynamic views

6 posts, 0 answers
  1. Pete
    Pete avatar
    3 posts
    Member since:
    Feb 2012

    Posted 15 Feb 2012 Link to this post

    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>
           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
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 16 Feb 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Pete
    Pete avatar
    3 posts
    Member since:
    Feb 2012

    Posted 16 Feb 2012 Link to this post

    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
  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 17 Feb 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Pete
    Pete avatar
    3 posts
    Member since:
    Feb 2012

    Posted 20 Feb 2012 Link to this post

    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
  7. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 21 Feb 2012 Link to this post

    Hello Pete,

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

    Regards,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready