CODEWITHSUNDEEP
javascriptjqueryajax
Tim
Tim

Reputation: 61

jquery ajax call getting old data when re-used

I have an ajax call that builds a small graph in a popup window. The html for the link is re-used in many different links for different devices on the page. What happens, is that when you click a graph for the first device, you get that device. You click a button for the second device, you get that device, however, if you keep clicking away, after the third click or so, you suddenly start getting only the first device, over and over. I think my variables are being cached in some odd way, and I don't understand:

the HTML:

<a class="bluebtn graphbutton ingraph" href="http://wasat/cgi-bin/rrdjson.cgi?res=3600&start=-24h&end=now-1h&uid=28.7B2562040000" data-uid="28.7B2562040000" data-name="Laundry Room Freezer"></a>
<a class="bluebtn graphbutton ingraph" href="http://wasat/cgi-bin/rrdjson.cgi?res=3600&start=-24h&end=now-1h&uid=28.F7A962040000" data-uid="28.F7A962040000" data-name="Garage Temp"></a>

The code in question:

 $(document).ready(function() {
  $('.graphbutton').click(function(e) {
    var formURL = $(this).attr("href");
    var uid = $(this).data("uid");
    var name = $(this).data("name");

    e.preventDefault();
    $.ajax({
      url: formURL,
      dataType: "json",
      cache: false,
      context: this,
      success: function(data){
      console.log("calling mkgraph with uid "+uid+" name " +name);
      make_graph(data.data, uid, name);
    },
      error: function(ts) { 
      console.log(ts.responseText); }
      });
  }); /* clickfunc */
}); /*docready */

What happens:

Click freezer:
"calling mkgraph with uid 28.7B2562040000 name Laundry Room Freezer"
Click Garage:
"calling mkgraph with uid 28.F7A962040000 name Garage Temp"
Click Garage again:
"calling mkgraph with uid 28.7B2562040000 name Laundry Room Freezer"

Some of these links are being manufactured by the make_graph() function. I'm a bit worried that this is the issue, and somehow the ajax thing needs to be re-initialized after doing this?

By request, the relevant code in make_graph() that I think is causing my issue here. Basically, I'm editing the buttons in the css popup on the fly, and I think this is creating a wierd situation where the ajax binding is bound to the old href, and not being updated, even though the link is correct in the produced html. This is consistent with the effect where the binding only gets mangled on the third attempt.

$(".ingraph").each(function() {
 this.href = $(this).attr("href").replace(/uid=.*/g, 'uid=' + uid);
 this.setAttribute('data-uid' ,uid);
 if (devname.length > 0) {
   this.setAttribute('data-name', devname);
 }
});

EDIT: adding a long answer:

I have multiple buttons on the main page. Each one specifies a "uid" that gets fed to rrdjson.cgi, which takes the uid and finds the data for that device, and returns it as json. When make_graph() recieves this json data, it populates a css popup, with the graph, and edits 5 buttons so they reference that UID. Those 5 buttons change the timescale of the graph by re-requesting the data from rrdjson.cgi.

What I am worried is happening, is that I click on the frige, it changes the uid's of the buttons inside the popup to reference the frige. Then I close that, click on the garage, it also changes the uid's and correctly shows the garage data. Then I click on one of the buttons inside the popup for the garage, and poof, I get the refrigerator again. I suspect that ajax "remembers" the old values for $(this).attr("href") etc and passes those values to the code, rather than re-reading the contents of the HTML. (perhaps instead of HTML, I meant DOM there, I'm a little vauge on the difference, but I suspect I meant DOM)

Maybe the answer is to somehow un-register the ajax binding to those buttons and re-register it every time make_graph() changes them? How would I do the un-register? .off() ? .unbind() ?

Upvotes: 4

Views: 1744

Answers (2)

Tim
Tim

Reputation: 61

After much gnashing of teeth, and google, I have answered my own question.

https://forum.jquery.com/topic/jquery-data-caching-of-data-attributes

Turns out, jquery caches "data" types, but not attr types. So when I do:

uid = $(this).data("uid");

vs

uid = $(this).attr("data-uid");

I get wildly different results. I guess the moral of the story is that .data is super evil.. :)

Upvotes: 2

Sascha
Sascha

Reputation: 1156

If you add a random value to your url like

var formURL = $(this).attr("href")+"?rv="+Math.random();

you'll force the ajax call to reload the URL. You can use the cache property (set it to false) JQuery will load the data again, but any proxy may send a cached version.

(Please check that there are no other attributes set in the url, otherwise set "&rv="+Math.random(); (& instead of ?) use

var formURL = $(this).attr("href");
formURL + (formURL.indexOf("?") > 0 ? "&rv=" : "?rv=" )+ Math.random();

Your problem should not have something to do with make_graph() as uid and name depend on $('.graphbutton')

(if not make_graph(), or some other function, changes the attributes of your buttons)

Upvotes: 1

Related Questions