Passing dynamic data JQueryMobile

Question

Ok I really need some help with this thing I'm testing. I'm trying to create a test phonegap app with JqueryMobile and I have the following question.

I'm creating a multipage jquery template
On the first page it show a list of items with a dynamic link from a JSON request.
So far no problems. The problem starts when I click on a link. Now I manage to pass the URL variables with a script jquery.mobile.router.js. So the url is something like: test3.html#blog?blog_id=10
I found a script to send the blog_id number to a JSON request and that is kinda working. I need to do a hard refresh to show the content.

My first code (works):

<script type="text/javascript">
$.ajax({
url: 'test.cfc?method=books&ReturnFormat=json',
dataType: 'json',
success: function(response) {
    var data = response.DATA;
    var str = '<ul>';

    for (var I = 0; I < data.length; I++) {
        str += '<li><a href="#blog?blog_id=' +  data[I][0] + '"data-transition="slide">' +     I + data[I][1] + '</a></li>';
    }

    str += '</ul>';

    $('#output').html(str);
},
error: function(ErrorMsg) {
   console.log('Error');
}
});
</script>

And then the second code (which is not working); First part trying to filter the blog_id number which is passed in the URL. The alert is to check if the correct value is pasted. Second part should load the text of the blog, but is not really working.

<script type="text/javascript">
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;

}

var blog_id = getUrlVars()["blog_id"];
alert(blog_id)

$.ajax({
url: 'test.cfc?method=blog&ReturnFormat=json&blog_id='+blog_id,
type: 'GET',
dataType: 'json',
success: function(response) {
    var data = response.DATA;

    for (var I = 0; I < data.length; I++) {
        str = '<h1>' + data[I][0] + '</h1>' + data[I][1] ;
    }


    $('#outputblog').html(str);

},
error: function(ErrorMsg) {
   console.log('Error');
}
});

</script>

Can please someone help to approve my code or give some suggestions? Thanks!!

what do u mean by *not working*? Pls tell us more. And is the alert throwing out the `blog_id` or is it `undefined`? — krishwader, Jun 13 '13 at 18:10
http://stackoverflow.com/questions/14468659/jquery-mobile-document-ready-vs-page-events and then go to _Data/Parameters manipulation between page transitions_ section. — Omar, Jun 13 '13 at 18:10
I did some thinking and was wondering if this can work (code above)? What happens is that I load all the ajax-requests on load, because it's a multipage template. So when I start the app I receive an alert "Undefined", which is correct because no blog_id is passed yet. Now when I click on a link (with the blog_id in it), the result is not loaded because it loads in the same DOM object. Only after a hard reload it works (I see the alert is giving me the correct number and the blog txt is loaded). So is there a solution to fix this, or do I need to take my blog_text_page to a different document? — user2483081, Jun 13 '13 at 19:59

score 0 · Answer 1 · answered Jun 14 '13 at 01:58

0

Have you redirect to the blog_id page section? Try to call this after ajax success.

location.hash = "blog_id";

answered Jun 14 '13 at 01:58

yeyene

7,297
1
21
29

Passing dynamic data JQueryMobile

1 Answers1