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
– Jason P, Commented Jul 29, 2013 at 13:29
Likely duplicate of $(this) inside of AJAX success not working, but there's not enough info here to say for sure. — apsillers
– apsillers, Commented Jul 29, 2013 at 13:30

Community · Accepted Answer · 2017-05-23 12:15:21Z

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, 2017 at 12:15

CommunityBot

11 silver badge

answered Jul 29, 2013 at 13:54

apsillers

116k18 gold badges248 silver badges249 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ant Over a year ago

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('<li>Test</li>');         alert('ok');     }   // post-submit callback  };

Ant Over a year ago

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?

apsillers Over a year ago

$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)?

Ant Over a year ago

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('<div>Test</div>'); 		    console.log(options.$this); 		}  };

I would have hoped this would append the DIV to #formSEIncome. I think I'm missing something silly here

Ant Over a year ago

Thanks for all your help apsillers, I have managed to sort this now. Cheers A

Ant · Accepted Answer · 2013-07-30 10:33:55Z

0

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.

answered Jul 30, 2013 at 10:33

Ant

3542 silver badges15 bronze badges

Collectives™ on Stack Overflow

jQuery ajaxform submit callback issue

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related