一定有更简单的方法

Question

I am trying to create an JQM app and are doing so by getting a lot of data from database. When I click on a link from a ajax/json generated calendar list I should then be able to get the info for that event by calling the server and get the data. As it is now I do this in 2 steps like this.

My ajax generated event list:

$.each(groupcalendar, function (i, val) {
    output += '<li><a href="#" data-id="' + val.mid + '" id="gotoMatch"><h2>' + val.matchformname + '</h2><p><strong>' + val.matchday + '</strong></p><p>' + val.coursename + '</p><p class="ui-li-aside"><strong>' + val.matchtime + '</strong></p></a></li>';
});

When I click on one of the links I want to goto a page called prematchdata.html and get the data fro that specific event. I do so by first calling the click and get the eventid from data-id like this:

$(document).on('click', '#gotoMatch', function () {

    var matchid = $(this).attr("data-id");

    $.get("http://mypage.com/json/getmatchinfo.php?matchid="+matchid, function(data) {

        localStorage["matchinfo"] = JSON.stringify(data);

        $.mobile.changePage( "prematchdata.html", { transition: "slide", changeHash: true} );

    }, "json");

});

I save the returned data as localStorage and then uses this data in my pageinit like this:

$(document).on("pageinit", "#prematchdata", function() {

    var matchinfo = {};
    matchinfo = JSON.parse(localStorage["matchinfo"])

    var content = '<h2>'+matchinfo["matchname"]+'</h2>';

    $('.infoholder').html(content);

});

It works, although for me it seems like the last 2 steps should be done in one, but i am not sure how to do so? It seems a little bit wrong get data, save locally and then use it? Can't this be done without the $(document).on('click', '#gotoMatch', function () {});?

Hoping for some help and thanks in advance :-)

Answer 1

You could try sending it up using a query string. When you're using changePage, change your code like this :

$(document).on('click', '#gotoMatch', function () {

    var matchid = $(this).attr("data-id");
    $.get("http://mypage.com/json/getmatchinfo.php?matchid=" + matchid, function (data) {
        paramData = data[0];
        $.mobile.changePage("prematchdata.html", {
            transition: "slide",
            changeHash: true,
            data: paramData //added this extra parameter which will pass data as a query string
        });
    }, "json");

});

When you're getting it back,

$(document).on("pageinit", "#prematchdata", function() {

    var url = $.url(document.location);
    var name= url.param("matchname");

    var content = '<h2>'+ name +'</h2>';

    $('.infoholder').html(content);

});

Another easy way would be use a singlepage template instead of a multi page template. Then, you could just use a global variable to get and set data.

That said, what you're doing right now is more secure than this query string method. By using this, anyone can see what you are sending over the URL. So I advise you keep using localStorage. For more info on this, look into this question.