10 Replies - 1486 Views - Last Post: 03 August 2014 - 06:02 AM

#1 mccabec123  Icon User is offline

  • D.I.C Head

Reputation: 18
  • View blog
  • Posts: 233
  • Joined: 03-March 11

Issues passing values between methods/functions and jquery

Posted 01 August 2014 - 02:20 AM

I'm having difficulty juggling values in jQuery, as most of jQuery is done in an external script, and I'm not sure when I'm in functions and not in functions, so it's hard to tell when global vars are set and not set.

This one in particular is puzzling me, and I'm absolutely stumped, logically to me it should work, but there seems to be something capping it at some point, and disregarding the values I'm trying to store.

I've concluded this, as the error I'm having is that inside the second getJSON call, I'm getting a 'val' undefined issue, but Javascript console isn't showing any javascript errors, just getting an undefined log when I log to the console and also print the object in an alert.

Just need a fresh set of eyes, feel like this is probably something simple, but I've been looking at the code so long that I can't seem to fathom it.

Any help is greatly appreciated.

var post_ids = new Array();
var i = 0;
var val;

$.getJSON("/client-ajax/last-ten-posts.php", function(data){
    $.each(data, function(k, val) {
        post_ids.push(val.id);
    });
}).done(function(){
    $.getJSON("/client-ajax/last-ten-posts.php?post-id=" + post_ids[0], function(val){
        alert(val.title+"");
        $("#postContainer").empty();
        $("#postContainer").append("<p class='title'>" + val.title + "</p><div class='post-icon'></div><pre>" + val.content + "</pre><p class='footnote'>Posted by " + val.firstname + " " + val.surname + " at <time datetime='2014-06-10'>08:52</time> GMT+00 on the <time>10-06-2014</time></p>");
    });
}); 

$(".previous-button").click(function(){
	$.getJSON("/client-ajax/last-ten-posts.php?post-id=" + post_ids[i].id , function(val){
		i--;
		$("#postContainer").empty();
		$("#postContainer").append("<p class='title'>" + val.title + "</p><div class='post-icon'></div><pre>" + val.content + "</pre><p class='footnote'>Posted by " + val.firstname + " " + val.surname + " at <time datetime='2014-06-10'>08:52</time> GMT+00 on the <time>10-06-2014</time></p>");
	});
});
$(".next-button").click(function(){
	$.getJSON("/client-ajax/last-ten-posts.php?post-id=" + post_ids[i].id , function(val){
		i++;
		$("#postContainer").empty();
		$("#postContainer").append("<p class='title'>" + val.title + "</p><div class='post-icon'></div><pre>" + val.content + "</pre><p class='footnote'>Posted by " + val.firstname + " " + val.surname + " at <time datetime='2014-06-10'>08:52</time> GMT+00 on the <time>10-06-2014</time></p>");
	});
});


This post has been edited by mccabec123: 01 August 2014 - 04:10 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Issues passing values between methods/functions and jquery

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4140
  • View blog
  • Posts: 13,091
  • Joined: 08-June 10

Re: Issues passing values between methods/functions and jquery

Posted 01 August 2014 - 03:39 AM

it all depends what your first AJAX returns.

besides that, your first part could be greatly simplified. why looping through 10 results for just the first and why use globals and deferreds when there is no use for that?

$.getJSON("/client-ajax/last-ten-posts.php", function(data) {
    // assuming data is an array, which would make the most sense
    $.getJSON("/client-ajax/last-ten-posts.php?post-id=" + data[0].id, function(val) {
        // …
    });
});

Was This Post Helpful? 0
  • +
  • -

#3 mccabec123  Icon User is offline

  • D.I.C Head

Reputation: 18
  • View blog
  • Posts: 233
  • Joined: 03-March 11

Re: Issues passing values between methods/functions and jquery

Posted 01 August 2014 - 04:14 AM

Sorry I should have included the full script, I only included the section which is causing issues, you'll see now why I don't loop through a second time on the original script I posted. There's code after to run through each array element on a button click. The initial was to get the first blog post and then display it. The next two statements are to cycle through in either direction.

The reason for Globals was to try and get a working prototype to see if local variables were causing the issue with the val element being undefined, but this was not the case.

This post has been edited by andrewsw: 01 August 2014 - 04:39 AM
Reason for edit:: Removed previous quote, just press REPLY

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4140
  • View blog
  • Posts: 13,091
  • Joined: 08-June 10

Re: Issues passing values between methods/functions and jquery

Posted 01 August 2014 - 06:19 AM

Quote

There's code after to run through each array element on a button click.

that’s a very wonky setup. you blindly rely on the first call to be successful and the globals to have the correct values when you need them.

a single incidentally global counter variable would throw you off.

It would probably be best if you used deferreds to define the click events (which then can use values from the previous call directly. additionally, you should pass the values you need for the click events from a reliable source (data attributes, event parameters, etc.)

PS. .click(…) is now on('click', …)
Was This Post Helpful? 0
  • +
  • -

#5 mccabec123  Icon User is offline

  • D.I.C Head

Reputation: 18
  • View blog
  • Posts: 233
  • Joined: 03-March 11

Re: Issues passing values between methods/functions and jquery

Posted 01 August 2014 - 07:43 AM

By deferred's are you talking about .done().success() etc?

Yeh I understand that it's not amazing, but I'm still learning jQuery, think my knowledge is okay, but I lack in the more complex situations.

If you could give me an example of how to achieve this using attributes and parameters that'd be great as I'm not entirely how that would help atm.

Thanks again.

This post has been edited by Dormilich: 01 August 2014 - 07:45 AM
Reason for edit:: removed previous quote

Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4140
  • View blog
  • Posts: 13,091
  • Joined: 08-June 10

Re: Issues passing values between methods/functions and jquery

Posted 01 August 2014 - 07:49 AM

passing an event parameter:
$(foo).on('event', { id: 1 }, function (evt) {
    console.log(evt.data.id);
});


using a data attibute
// HTML
<button data-id="1">click me!</button>
// JS
$(button).on('click', function (evt) {
    console.log(this.dataset.id);
});

Was This Post Helpful? 0
  • +
  • -

#7 mccabec123  Icon User is offline

  • D.I.C Head

Reputation: 18
  • View blog
  • Posts: 233
  • Joined: 03-March 11

Re: Issues passing values between methods/functions and jquery

Posted 01 August 2014 - 12:48 PM

I'll explain what I'm trying to do and maybe it'll give you a better understanding. I'm trying to create a blog post loader, which brings in the next blog post, then slides the old one away and loads the new one in. So storing the attributes in the elements isn't really viable, as they're being composed by the jquery anyway, so it would be redundant.
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4140
  • View blog
  • Posts: 13,091
  • Joined: 08-June 10

Re: Issues passing values between methods/functions and jquery

Posted 02 August 2014 - 07:33 AM

what prevents you from re-assigning the data attribute?
Was This Post Helpful? 0
  • +
  • -

#9 mccabec123  Icon User is offline

  • D.I.C Head

Reputation: 18
  • View blog
  • Posts: 233
  • Joined: 03-March 11

Re: Issues passing values between methods/functions and jquery

Posted 02 August 2014 - 09:17 AM

Nothing, I just don't really understand the problem that you're pointing out? As surely the problem that I'm currently pointing out would still exist even if I was pulling the data from data-attributes rather than from an array that I've compiled, and I'd still need to get the real ID and store it in the data-attribute anyway using ajax, but it's failing when I'm trying to assign and use the variable, so I need a solution to that before I can solve the data-attribute issue, as a data-attribute will not fix the problem I'm having.
[{"title":"Another test post","0":"Another test post","posted_by":"mccabec123","1":"mccabec123","content":"Another test post, for testing","2":"Another test post, for testing","posted_at":"2014-07-31 05:51:42","3":"2014-07-31 05:51:42","4":"mccabec123","firstname":"Conner","5":"Conner","surname":"McCabe","6":"McCabe"}]


I've added here a sample JSON response that I get when I type the URL into the browser, so there is no issue with the script we are using with the AJAX, it's solely the Javascript.

I've also updated the script to use .on('event') as well, here is the current script:

$.getJSON("/client-ajax/last-ten-posts.php", function(data){
	$.each(data, function(k, val) {
		post_ids.push(val.id);
	});
}).done().success(function(data){
	$.getJSON("/client-ajax/last-ten-posts.php?post-id=" + post_ids[0], function(val){
		alert(post_ids[0]+ val.id + "");
		$("#postContainer").empty();
		$("#postContainer").append("<p class='title'>" + val.title + "</p><div class='post-icon'></div><pre>" + val.content + "</pre><p class='footnote'>Posted by " + val.firstname + " " + val.surname + " at <time datetime='2014-06-10'>08:52</time> GMT+00 on the <time>10-06-2014</time></p>");
	});
});

$(".previous-button").on('click', function(){
	$.getJSON("/client-ajax/last-ten-posts.php?post-id=" + post_ids[i].id , function(val){
		i--;
		$("#postContainer").empty();
		$("#postContainer").append("<p class='title'>" + val.title + "</p><div class='post-icon'></div><pre>" + val.content + "</pre><p class='footnote'>Posted by " + val.firstname + " " + val.surname + " at <time datetime='2014-06-10'>08:52</time> GMT+00 on the <time>10-06-2014</time></p>");
	});
});
$(".next-button").on('click', function(){
	$.getJSON("/client-ajax/last-ten-posts.php?post-id=" + post_ids[i].id , function(val){
		i++;
		$("#postContainer").empty();
		$("#postContainer").append("<p class='title'>" + val.title + "</p><div class='post-icon'></div><pre>" + val.content + "</pre><p class='footnote'>Posted by " + val.firstname + " " + val.surname + " at <time datetime='2014-06-10'>08:52</time> GMT+00 on the <time>10-06-2014</time></p>");
	});
});

This post has been edited by mccabec123: 02 August 2014 - 09:23 AM

Was This Post Helpful? 0
  • +
  • -

#10 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4140
  • View blog
  • Posts: 13,091
  • Joined: 08-June 10

Re: Issues passing values between methods/functions and jquery

Posted 03 August 2014 - 02:06 AM

Quote

As surely the problem that I'm currently pointing out would still exist even if I was pulling the data from data-attributes rather than from an array that I've compiled

but a global array you’ve compiled can be easily overwritten from anywhere, data attributes need to be explicitly addressed.
Was This Post Helpful? 0
  • +
  • -

#11 mccabec123  Icon User is offline

  • D.I.C Head

Reputation: 18
  • View blog
  • Posts: 233
  • Joined: 03-March 11

Re: Issues passing values between methods/functions and jquery

Posted 03 August 2014 - 06:02 AM

It's cool anyway, I fixed it. The getJSON request was returning the JSON within an array, should have noticed that by examining the JSON output. Silly mistake as per usual.

So I ended up having to access like so:

val[0].content

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1