ajaxSubmitButton submit multiple times problem

I have an ajax contact form that uses an ajaxSubmitButton() to submit the form, it then returns the result in a lightbox. The problem is that if there are errors (which are passed back and displayed in the lightbox)the user needs to be able to correct them and submit the form again, however it seems it will only let you submit the form once via ajax.

Is there something I’m doing wrong? Any help is appreciated.

Cheers, Tim.

AJAX is JavaScript, controlled in whole on browser side, not on server / PHP / Yii side. And I never heard anything about any limitation of how many AJAX call can be done. So my guess is that there is some mistake in your code. But without any examples, we won’t be able to help you here.

If you are submitting the form by AJAX, you probably need to turn on AJAX-validation too.

So that the user can correct any errors before submitting the form.

At the moment I just have this:


<div id="jsreturn"></div>

<?php echo CHtml::beginForm(); ?>

<?php echo CHtml::textField('email', 'email', array('size'=>51)); ?>

<?php echo CHtml::textArea('message', 'message', array('rows'=> 3, 'cols'=> 40)); ?>

<?php echo CHtml::ajaxSubmitButton('Submit',CHtml::normalizeUrl(array('site/ajaxcontact')),array('replace'=>'#jsreturn','type'=>'POST'),array()); ?>

<?php echo CHtml::form(); ?>

And for the sake of testing site/ajaxcontact just returns the time, I have removed everything other than that to try and get it to work. It returns the time the first time but then doesn’t update when clicked again.

Just my curiosity? Is it a typo there in the last line? Why you are using CHtml.form() (which begins form) in place of CHtml.endForm()?

I’m pretty sure that this will not change anything nor bring you closer to solving your problem. But since I had a really big problems (especially in IE) because of not closing form tag properly, I wanted to point this out to you.

And even more curiosity! :] Why you are using PHP’s opening an closing tags in each line? Wouldn’t be easier for you (less typing) to write something like this:


<div id="jsreturn"></div>

<?php

echo CHtml::beginForm();

echo CHtml::textField('email', 'email', array('size'=>51));

echo CHtml::textArea('message', 'message', array('rows'=> 3, 'cols'=> 40));

echo  CHtml::ajaxSubmitButton('Submit',CHtml::normalizeUrl(array('site/ajaxcontact')),array('replace'=>'#jsreturn','type'=>'POST'),array());

echo CHtml::endForm();

?>

Above with fixed (?) use of endForm() instead of form() method of CHtml.

Yeah your right, that was a typo, thanks for picking that up. It didn’t help though unfortunately as you said.

I had HTML between the lines but removed it because it was irrelevant to the post.

I ended up solving this by replacing the form with a new instance of the form every time the form was submitted. I’m not sure if there is a cleaner fix but that seemed to work.

In my opinion solution is only bad, when it is not working! :]

Just kidding! Of course, that clean, readable code and coding following best practices is always better than just writing a junk code. But on the other hand, since perfection is an evil enemy of good (a bad attempt to translate Polish proverb into English! :}), then you shouldn’t waste your time for an endless looking for a cleaner solution, if the one is working and satisfy you.

I had similar issue when implement a ‘add-to-cart’ button which use ajax request backend add2cart , when I click the ‘add-to-cart’ several times, the post data (quantity and product_id) looks like has been sent several times but each time the quantity over added to the previous request.It’s really headache to figureout the reason since seems the code is correct.

Finally, I solved the issue by use $(’#add_to_cart’).unbind(‘click’); before

$(’#add_to_cart’).click(function () {

$.ajax({

type: ‘post’,

url: ‘index.php?r=checkout/add2cart’,

dataType: ‘html’,

data: $(’#product :input’),

success: function (html) {

$(’#module_cart .middle’).html(html);

},

Hope it may give some help in your situation

LiuXuan,

Try to use code tags (second button to the right on second toolbar) to format presented code as more readable. Thank you.

Your solution seems to be fine.

But wouldn’t it be easier to simply disable button, right after click? Most banks do like this to assure, that a particular button 100% will not be clicked twice.


$('#add_to_cart').click(function()

{

    	$('#add_to_cart').attr('disabled', 'disabled');

    	...

}

Also, I don’t follow you saying that you unbind click event before click? How does it works then?

common issue…

yii ajax stuff not working properly if you have more than one, and if you not set unique ID

you should make sure that everything have unique ID every time…

and you should know that if you load form via ajax - yii not working well with it, cause it has some bugs in the javascript code, with die and live