Question

I have a form that is brought up in a ajaxed modal which I am using for updating user details. When the modal loads I call a js function:

teamCreate: function() {
$j("#step1,form#createEditTeam").show();
$j("#step2").hide();
var options = {
 type: "get",
 dataType: 'json',
     beforeSubmit:  before,  // pre-submit callback 
     success:       success  // post-submit callback
  };
$j("form#createEditTeam").ajaxForm(options);

function before(formData, jqForm, options){ 
 var valid = $j("form#createEditTeam").valid();
 if (valid === true) {
  $j(".blockMsg").block({ message: $j('#panelLoader') });
      return true; // submit the form
 } else {
  $j("form#createEditTeam").validate();
  return false; // prevent form from submitting
 }
};

function success(data){
 if (data.status == "success") {
  $j(".blockMsg").unblock();
 } else {
  //
}
};

function error(xhr, ajaxOptions, thrownError){
alert("Error code: " + xhr.statusText);
 };
}

This works just fine when I first submit the form, regardless how many times the modal is opened and closed. However, if I submit the form and then open the modal again and try to submit the form again I get a js error:

h is undefined

Answer 1

To more quickly debug this, I would strongly suggest changing out the minified version of the JQuery library with the full version of it, then running your code again. You’d be hard-pressed to figure out the root of the problem using the minified version, but you’d most certainly find it easier to debug if you have the full version running. The variable and function names would make much more sense.