jQuery ajaxform submit callback issue

Question

I am using ajaxform to handle my form submissions and have encountered a problem with the option variable. I am trying to have the success callback append some HTML to a relative element, as such I am using the $(this) approach as I would do normally. I can't get it to work, am I missing something simple here? Is there any reason why $(this) will not work? The plugin url is http://malsup.com/jquery/form/

Thanks in advance

A

The selector references the element so on submit the ajaxform plugin fires. It is as follows $('#formSEIncome').ajaxForm(options)

The options jQuery is as follows:

var options = {             
       success: function() { 
       $(this).parents('.trm_expense_cats').find('.itemlist').append('<li>Test</li>');
        alert('ok');
    }   // post-submit callback 
};

Try logging `this`. I don't think it is what you expect. You may have to save `$(this)` to a variable outside the callback and use that variable inside the callback. — Jason P, Jul 29 '13 at 13:29
Likely duplicate of [$(this) inside of AJAX success not working](http://stackoverflow.com/q/6394812/710446), but there's not enough info here to say for sure. — apsillers, Jul 29 '13 at 13:30

score 1 · Answer 1 · edited May 23 '17 at 12:15

1

this is set by each function when it is invoked. Your code looks like this:

// OUTSIDE the callback

var options = {             
       success: function() { 
         // INSIDE the callback
         $(this).parents('.trm_expense_cats').find('.itemlist').append('<li>Test</li>');
         alert('ok');
    }
};

// OUTSIDE the callback
$('#formSEIncome').ajaxForm(options)

You probably expect that this is the same value both inside and outside the callback, but it is not. The callback sets its own value of this depending on how it is invoked. Here, the callback decides the value of this inside the callback when it runs.

If you want to save your "outer" this, see $(this) inside of AJAX success not working for how to use $.proxy. You can also save your outer this in a variable (often named that) outside your callback. Since JavaScript functions have access to the variables of their containing functions, the callback will have access to that:

// OUTSIDE the callback
// save outer this
var that = this;

var options = {             
       success: function() { 
         // INSIDE the callback
         // we use that, not this, to get the outer this
         $(that).parents('.trm_expense_cats').find('.itemlist').append('<li>Test</li>');
         alert('ok');
    }
};

// OUTSIDE the callback
$('#formSEIncome').ajaxForm(options)

edited May 23 '17 at 12:15

Community

1
1

answered Jul 29 '13 at 13:54

apsillers

112,806
17
235
239

Thanks for your reply. So to clarify, could I do the following: `var options = { $this: $(this), success: function() { options.$this.parents('.trm_expense_cats').find('.itemlist').append('
Test

Ant

Jul 29 '13 at 20:22

thanks for taking the time to help out. I have tried that and console log tells me ... Uncaught ReferenceError: $this is not defined. I can't see how this is true given the above code? – Ant Jul 29 '13 at 20:47

`$this` *is* undefined. The `$this` property of `options` is defined. In your `success` function, are you trying to use `options.$this` (good, `options` is defined and has a property called `$this`) or just `$this` (not good, not defined)? – apsillers Jul 29 '13 at 20:52

Sorry yes, it is defined now (I had `$this` in console log rather than `options.$this`) I have fixed this but it won't append to the suggested element eg... `var options = { $this: $(this) ,success: function() { options.$this.append('

Test

'); console.log(options.$this); } };` I would have hoped this would append the DIV to `#formSEIncome`. I think I'm missing something silly here – Ant Jul 29 '13 at 21:22

Thanks for all your help apsillers, I have managed to sort this now. Cheers A – Ant Jul 30 '13 at 10:34

score 0 · Accepted Answer · answered Jul 30 '13 at 10:33

The answer to this is to use the provided success functionality in the jQuery plugin rather than what I did above. So

Event handler:

$('#formSEIncome').ajaxForm(options)

Options variable:

var options = { 
        target:        this  // target element to be updated with server response 
        ,success:       showResponse          
};

Success function:

function showResponse(responseText, statusText, xhr, $form)  { 
$form.parents('.trm_expense_cats').find('.itemlist').append('<li>Test</li>');
    alert('ok');
}

As such the use of this in the options.success object solved the problem.

jQuery ajaxform submit callback issue

2 Answers2