Question

I am trying to load a page via an ajax call using mobile.changepage shown below:

mobile.changePage( "index.html", {transition: "slide", reloadPage: true, data: id})

I’ve tried to use on the index.html all the functions such as:

$( '#mainMenu' ).live( 'pageinit',function(event){var movie_id = location.search;});

The page gets loaded but I can not get the value of “id” on the index.html page, just if I hard refresh it works.

What am I doing wrong?

Thanks
Rodrigo

Answer 1

Assuming that you will pass a single parameter to page2, you could use location.search in page2 to get the movie variable, but I found that it doesn’t work well for regular browsers. So, in the result page, you need to parse $(this).data('url').

Also, the script code in page2 must be inside the DIV#page2 block, because what is in your header HTML WON’T be changed when next page is changed (as another member noticed).

The script blocks:

page1

<script language="javascript">

    $( '#mainMenu' ).live( 'pageinit',function(event){
        $('.btnTxtSearch').bind('click',function () {
            var movieName = $('#txtMovieTitle').val();
            if (!movieName || movieName.length == 0 || movieName == null) {
                alert('Please insert a title before clicking the button');
                return false;
            } //end of if

            $.mobile.changePage( "page2.html", {transition: "slide", reloadPage: true, data: movieName}); 

        });
    });

</script>

page2

<script language="javascript">
//Without this pageinit may be called multiple times in back and forth use case.   
$('#page2').die( 'pageinit');

$('#page2').live( 'pageinit',function(){
    var movieName = $(this).data('url').split('?')[1];
    //Debug:
    alert(movieName);
});     


</script>