Question

All I want is to Refresh the page and pass a parameter back to my index controller, but Slide up the page.

If I press once, no problem. If I keep pressing Refresh then it literally doubles the call each time I press it. So if I press 3 times it calls the index view @ 4 times

$(document).ready(function(){
    $(".ui-btn-right").bind('tap vclick',function(event, ui){
        event.preventDefault();
    //  alert("saw tap");
        $.mobile.changePage( "/app/Person/index?refresh_view=true", { transition: "slideup", reloadPage: true} );
     });

});

And link is:

<a class="ui-btn-right" data-theme="b" href="/app/Person/index?refresh_view=true" data-transition="slideup">Refresh</a>

Answer 1

jQuery mobile is unique in that when the page changes, none of the elements in the DOM are removed. Since no elements are removed, their events stay there too. I’m guessing that your $(document).ready( ... ) function is getting called at every new page. So you’re adding a new event to the .ui-btn-right element even though the other ones are still there. Try this:

$(document).ready(function(){
    $(".ui-btn-right").bind('tap vclick',function(event, ui){
        event.preventDefault();
    //  alert("saw tap");
        $('ui-btn-right').unbind('tap vclick');
        $.mobile.changePage( "/app/Person/index?refresh_view=true", { transition: "slideup", reloadPage: true} );
     });

});

Now, whenever you change pages, the event is removed so there aren’t any duplicates when the $(document).ready( ... ) function is called again.