Modifying the DOM based on an AJAX result with jQuery

Question

I'm unsure of the best practice for modifying the DOM based on an ajax response. I'll try to let the code do the talking because it's hard to explain.

// page has multiple checkboxes
$("input[type='checkbox']").live('click', function {
  var cb = $(this); // for the sake of discussion i need this variable to be in scope
  $("form").ajaxSubmit({ dataType: "script" });
}

The server sends a response back, and the js gets eval'd and that means "cb" is out of scope.

What I've done so far is create a couple of helper functions:

var target = undefined;

function setTarget(val) {
  target = val;
}

function getTarget() {
  return target;
}

And that turns the first snippet of code into this:

// page has multiple checkboxes
$("input[type='checkbox']").live('click', function {
  setTarget($(this));
  $("form").ajaxSubmit({ dataType: "script" });
}

Then on the server's response I call getTarget where I need to. This seems hackish... Any suggestions?

Answer 1

It's unclear what you're actually trying to do, but I feel like you want to be looking at the success parameter for that AJAX call. The success callback function should execute in parent scope and do what you're looking for.

See 'success' on this page in the jQuery docs.

Answer 2

So what you are trying to do is get the form to submit the content via ajax whenever the user checks/unchecks a checkbox? And because there are several checkboxes, you need to find out which one triggered the submit, so you can change its value to whatever is stored on the server?

If you submit the entire form everytime, why don't you reply with all the checkboxes values, and then change each and every one of them? If not, get the server to reply with the id and the value of the checkbox, then use jquery to find the checkbox with that ID and then change it's value.

Answer 3

How about:

jQuery(function($) {

    // give it scope here so that the callback can modify it
    var cb,
        cbs = $('input[type="checkbox"]');

    cbs.live('click', function {
        // taking away var uses the most recent scope
        cb = $(this);

        // disable checkboxes until response comes back so other ones can't be made
        cbs.attr('disabled', 'true'); // 'true' (html5) or 'disabled' (xhtml)

        // unless you are using 'script' for something else, it's best to use
        // a callback instead
        $('form').ajaxSubmit({
            success : function(response) {
                // now you can modify cb here
                cb.remove(); // or whatever you want

                // and re-enable the checkboxes
                cbs.removeAttr('disabled');
            }
        });
    }

});