CODEWITHSUNDEEP
jquery
runelynx
runelynx

Reputation: 413

Jquery variable scope issues

I'm having issues with variable scope in jquery I think. The variable I call refid below is returning the valid value in the initial alert in the higher-level function... "like69" is my expected value.

However down in the success function, it is not working properly. I want it to return the same "like69", but instead in the lower-level alert, it is giving me "success". On the .switchClass line, its not working and throwing an undefined error.

Any tips on where I'm going wrong... how to make this value flow through? 

$(".ajax-like").submit(function(){
  alert("Initial part going...");
  var refid = $(this).find('input[name="refid"]').val();
  alert(refid);
  var data = {
    "action": "like"
  };
  data = $(this).serialize() + "&" + $.param(data);
  $.ajax({
    type: "POST",
    dataType: "json",
    url: "galleryajax.php", //Relative or absolute path to response.php file
    data: data,
    success: function(data, refid) {
      alert("Form submitted successfully.\nReturned json: " + data["json"]);
      alert(refid);
      $('#'+refid).switchClass("thumb-comment", "thumb-comment2", 1000);
    }
  });
  return false;
});

Upvotes: 1

Views: 218

Answers (2)

Brad Christie
Brad Christie

Reputation: 101594

Second option: Use the context parameter of $.ajax and supply the element to the callback function. e.g. (note //!! comments below)

$(".ajax-like").submit(function(){
  alert("Initial part going...");
  var refid = $(this).find('input[name="refid"]').val();
  alert(refid);
  var data = {
    "action": "like"
  };
  data = $(this).serialize() + "&" + $.param(data);
  $.ajax({
    type: "POST",
    dataType: "json",
    url: "galleryajax.php", //Relative or absolute path to response.php file
    context: document.getElementById(refid), //!! ADD THIS
    data: data,
    success: function(data) { //!! REMOVE refid FROM HERE
      alert("Form submitted successfully.\nReturned json: " + data["json"]);
      //!!alert(refid)
      //!!$('#'+refid).switchClass("thumb-comment", "thumb-comment2", 1000);
      //!! USE $(this) INSTEAD
      $(this).switchClass("thumb-comment", "thumb-comment2", 1000);
    }
  });
  return false;
});

Upvotes: 1

raina77ow
raina77ow

Reputation: 106375

Drop that variable's mentioning from AJAX response handler:

success: function(data) {
   alert("Form submitted successfully.\nReturned json: " + data["json"]);
   alert(refid);
   $('#'+refid).switchClass("thumb-comment", "thumb-comment2", 1000);
}

... as it's already in the handlers' scope (refid variable is defined in the outer function).

What happens is following: the function specified in success property of $.ajax options object will be called with three arguments:

  • data (the response)
  • textStatus (string description of the response's status)
  • jqXHR (promise-like AJAX object)

You describe the handler as a function getting two arguments instead, but that's quite fine in JS. The problem is, you declare refid as the function parameter - and with this, you essentially create a new variable (name binding, to be precise) named refid in the success scope. That variable will shadow the outer one. That's why you get 'success' string displayed in alert.

Upvotes: 2

Related Questions