Using closest command in success ajax callback

Question

I have multiple forms with id=#REQUESTFORM. To retrieve the correct information when sending data, I use closest command. But same command does not work when I tried using it in success ajax callback. How will else can I receive and print server's response in correct form?

    $("[name='respond']").live('click', function() { 
  $("[name='action']").val($(this).val());
            $.ajax({
                type: "POST",
    data: $(this).closest('#REQUESTFORM').serialize(),
    url: "content/requests/index.cs.asp?Process=RespondRequests", 
    success: function(output) { 
    $(output).closest('#REQUESTFORM').html(output)
             },
    error: function(xhr){
     alert('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
    }
            });

Answer 1

The output coming in the success function is referring to the data received from the server, which I can't see it is associated to your DOM in anyway. There's a very simple trick you want to reference the #REQUESTFORM:

...live('click', function() {
    $("[name='action']...
    // REFERENCE TO the REQUESTFORM
    var requestForm = $(this).closest('#REQUESTFORM');

    $.ajax({
        type: "POST", 
        data: requestForm.serialize(),
        ...
        success: function(output) {
            requestForm.html(output);
        ...

Since JS function scope is to where it is defined, not where it is used, the var requestForm will be available to success function even the event binding function is ended.

One last thing, in your case, the form you are referencing with ID, which supposing it is unique to the whole DOM, you may actually use $('#REQUESTFORM') instead of closest.