jQuery only works properly on page reload?

Question

Hi all,

I've run into a problem and I can't seem to find a method in which to remedy the situation. My jQuery code only seems to be completely functional after I reload the page. I've tried using document.ready(), pageinit, pagecreate, window.load() all to no avail. I've tried researching it on StackOverflow, but I haven't been able to come up with anything that seems to remedy my bug.

This is the code I'm working with:

$("#homepage").bind("pagebeforecreate", function(e) {
    $.get("songList.json", {}, function(res,code) {
        var s = "";
        for (var i = 0; i < res.length; i++) {
                    s+="<li><a href='song.html?id="+res[i].id+"'><img src='images/"+res[i].albumimg+".PNG' />"+
                    res[i].title+"<br />"+res[i].artist+"</a></li>";
                }
        $("#allsongs").html(s).listview("refresh");
    }, "json");

});

The issue at hand here, is that the list doesn't seem to load in. I can view the search bar, but the actual list items themselves don't render until I refresh the page after it loads. Thoughts?

The second problem I've run into is with the song.html page itself. Once again, the song information (jquery/json) only seems to load in properly after I refresh the page.

$(document).on("pagecontainerbeforeshow", function(e) {
    console.log('pagecontainerbeforeshow');

    var page = $.mobile.pageContainer.pagecontainer("getActivePage")[0];
    var parts = $.mobile.path.parseLocation();
    if(parts.pathname.indexOf("song") >= 0) {

     var thisId = parts.search.split("=")[1];
                    $.get("song"+thisId+".json", {}, function(res, code) {
                        $("h1",page).text(res.title);
                        $("h2",page).text(res.artist);
                        $("h3",page).text(res.album);
                        $("img",page).attr("src", ("images/"+res.albumimg+".png"));
                        $("p",page).text(res.englyrics);
                        $("p:last",page).text(res.korlyrics);
                    }, "json");
                }
            $("#kor").click(function() {
            $("#koreanlyrics").show();
        });


});

My code is hosted here > https://github.com/whalien52/loaf/tree/master/www -in case you're interested in viewing it in it's entirety. (I've currently hardcoded in the list items for the sake of visibility as I'm trying to begin to slowly build the UI).

If you have any idea what's going on or know of where I can find a more definitive answer, please let me know!

Answer 1 · 2017-10-10T19:54:24Z

October 10, 2017 7:54pm

I noticed this in the index.html file:

        <script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="jquery.min.js"></script>

Your stored file is jQuery v1.11.3, so loading in that old version after loading in a much more recent one could be causing unexpected behavior.

Welcome to the Treehouse Community

Looking to learn something new?

mckbas

mckbas

jQuery only works properly on page reload?

1 Answer

Steven Parker

Steven Parker