0

I am using JQM to create and app however I want to keep some history so the user can go back however it seems on one page when I go back to it it fails to load the ajax. All my pages are external and loads in the pageinit event. It should be noted that this same structure of code works for all other pages except this one however it is not an error that I can see in the code. Please see code below:

HTML:

<!doctype html>
<html lang="en">
<head>
    <title>Music App</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
    <link rel="stylesheet" href="http://jquerymobile.com/demos/1.3.0/css/themes/default/jquery.mobile-1.3.0.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://jquerymobile.com/demos/1.3.0/js/jquery.mobile-1.3.0.js"></script>
    <script src="./javascript/music.js"></script>
    <script src="./javascript/soundmanager2.js"></script>
</head>
<body>
    <!--load all songs by genre-->
    <div data-role="page" data-add-back-btn="true" id="genretracks">
        <div data-role="header" data-position="fixed">
            <h1>Genre Tracks</h1>
        </div>
        <div data-role="content">
            <ul data-role="listview" data-filter="true" data-filter-placeholder="Search list..." id="genretracklist">
            </ul>
        </div>
    </div>
</body>
</html>

JavaScript:

 $(document).on( "pageinit", "#genretracks", function( e ) {
var passedId = (passDataObject.selectedHref != null ? passDataObject.selectedHref : window.location.href).replace( /.*id=/, "" );
var surl =  "http://localhost/musicapp/includes/genretracks.php";
$.ajax({
    type: "GET",
    url: surl,
    data:  "Genre="+passedId,
    dataType: "jsonp",
    cache : false,
    jsonp : "onJSONPLoad",
    jsonpCallback: "genretrackscallback",
    crossDomain: "true",
    }).done(function(){ 
        $("a").bind("click",function(){
            passDataObject.selectedHref = this.href;
        }); 
    }).fail(function(){ 
        alert("$.get failed!"); //replace with failed dialog 
    })
});


 function genretrackscallback(rtndata) 
 { 
var data="";
for(j=0;j<=rtndata.length -1;j++)
{
    data = data + "<li><a href='./player.html?id="+rtndata[j].track_id+"' data-transition='slide' id="+rtndata[j].track_name+"><h3>" + rtndata[j].track_name + "</h3><p><strong>" + rtndata[j].artist_name + "</strong></p><p>" + rtndata[j].genre_name + "</p></a></li>";
}
$('#genretracklist').html(data);
$('#genretracklist').listview('refresh'); 
 }

When I click on the an item in the list created by the function above it fires another javascript function based on the id and carries the user to another external page. This all works fine however when the user presses back the function above doesn't fire or fires once after several attempts. How can I ensure that this function fires when the user is going back?

George
  • 36,413
  • 9
  • 66
  • 103
Kern Elliott
  • 1,659
  • 5
  • 41
  • 65
  • Tell me why are you using pageinit event? It triggers only once (unless page is refreshed). Also tell me, do you still use ajax to load pages into the DOM? – Gajotres Mar 21 '13 at 10:37
  • @Gajotres no I didn't disable ajax to load the pages. – Kern Elliott Mar 21 '13 at 11:46
  • Then take a look at my answer below. If you have more questions feel free to ask. – Gajotres Mar 21 '13 at 11:46
  • @Gajotres I did and also left a comment it works for an alert but the ajax function doesn't insert anything into the DOM – Kern Elliott Mar 21 '13 at 11:49
  • I have added another content to my answer, take a look. – Gajotres Mar 21 '13 at 11:58
  • @Gajotres am not seeing your old solution or the new one – Kern Elliott Mar 21 '13 at 14:32
  • Ok so I found what the issue is. It seems that the line `var passedId = (passDataObject.selectedHref != null ? passDataObject.selectedHref : window.location.href).replace( /.*id=/, "" );` which gets the id from the url does't work properly when hitting the back button. Is there a better way to get the id from the url in jqm and html. – Kern Elliott Mar 21 '13 at 18:21

0 Answers0