jQuery Mobile js only works when I refresh page

Question

I'm new to Jquery Mobile and I've tried everything to solve this issue. I have the first page which is index.php, this page loads buttons from a js that gets the information from json. The second page (FichaTecnica.php) shows the information of that wine (everithing is in spanish, sorry). The problem is that I have to refresh the page in the browser to load the information and if I go back to the first page I also have to refresh to load the buttons.

Any help would be appreciated.

Thanks.

Index.php

<div data-role="page" id="main">      
    <div data-role="header">         
        <h1>
            Page 1
        </h1>     
    </div>     

    <div data-role="content">
        <div>
            <img src="images/Vinos separador [Negro].png" />
        </div>
        <div data-role="controlgroup" data-role="controlgroup" id="buttonGroup">
        </div>


        <div>
            <img src="images/P Venta Separador [Negro].png" />
        </div>
        <div data-role="controlgroup" data-role="controlgroup" id="buttonGrouploc">
        </div>



    </div>     

    <div data-role="footer">              
    </div> 
</div>             

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="js/variedadeslist.js"></script>

Js File that loads the buttons in first page

        var url="http://localhost/CavaOnline/json_variedades.php";      
        var buttonHtmlString = "", pageHtmlString = "";

        var jsonResults;

    $.getJSON(url,function(data){
        jsonResults = data.items;
        displayResults();       
    });


    function displayResults() {

        for (i = 0; i < jsonResults.length; i++) {
            buttonHtmlString += '<a data-transition="slide" href="FichaTecnica.php?id=' + jsonResults[i].id + '" id="'+ jsonResults[i].id +'" data-role="button">' + jsonResults[i].nombre + '</a>';
        }

        $("#buttonGroup").append(buttonHtmlString);
        $("#buttonGroup a").button();   
    }

Second Page "FichaTecnica.php"

    <div data-role="page" id="pagina2">
        <div data-role="header">
            <h1>
                Header
            </h1>
        </div>

        <div data-role="content">

            <div>

                 <div data-role="collapsible" data-collapsed="false">
                <h1>El Vino</h1>
                <div id="descripcion">

                </div>
                </div>

                <div data-role="collapsible" data-collapsed="false">
                <h1>Cata</h1>
                <div id="cata">

                </div>
                </div>

            </div>

            <a data-role="button" id="botonMarcas"></a>

        </div>

        <div data-role="footer">
            <h1>
                footer
            </h1>
        </div>            
    </div>

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="js/descripcionlist.js"></script>  

Js that loads the information in the second page

$('#pagina2').live('pageinit',function(event){

var id =  getUrlVars()["id"];


$.getJSON('http://localhost/CavaOnline/json_variedades.php?id='+id, function(variedades) {


$.each(variedades, function(index, variedad) {

    $('#descripcion').append('<p>'+variedad[id - 1].descripcion+'</p>');
    $('#cata').append('<p>'+variedad[id - 1].cata+'</p>');
    $('#botonMarcas').append().attr("href", 'FichaTecnica.php?id=' + variedad[id - 1].id);


});

});

function getUrlVars() {

var vars = [], hash;

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

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

{

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

    vars.push(hash[0]);

    vars[hash[0]] = hash[1];

}

return vars;

}

Answer 1

It would be better to have your pageinit code wired up before you bring in the page. Therefore, make sure you include the JS as part of your first page.

Wire up the paginit, like so:

$(document).on('pageinit', '#pagina2', function(e) {
    /* TODO: Page 2 init code */
});

Answer 2

Your initial page is not loading correctly because you're building the page incorrectly (by including the JS at the bottom after the other elements load). Therefore, the JavaScript only takes effect after the page is refreshed since at that point the JS already exists in the DOM.

Here's the basic page markup:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-rc.2/jquery.mobile-1.2.0-rc.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0-rc.2/jquery.mobile-1.2.0-rc.2.min.js"></script>
</head> 

<body> 
    ...content goes here...
</body>
</html>

Also, if you're including any custom JS that will alter the page (like your pageint) they should be loaded AFTER jQuery is loaded, but BEFORE jQuery Mobile is loaded (so insert that JS file between the two in the head).

Answer 3

I've had similar problems and just fixed them by adding data-ajax=false in the link.

ref: http://api.jquerymobile.com/pagecontainer/