CJuiTabs & Ajax Form Submissions (dobule post problems)

I noticed a problem in this situation:

1- We make 3 ajax tabs using CJuiTabs widget as follow:

$this->widget('application.extensions.CJuiTabsMast', array(

    'id'=>'tabs-wizard',

    'tabs'=>array(

        'tab1'=>array('id'=>'tab-article','ajax'=>$this->createUrl('/article/wizard')),

        'tab2'=>array('id'=>'tab-attachment','ajax'=>$this->createUrl('/attachment/wizard') ),

        'tab3'=>array('id'=>'tab-articleauthor','ajax'=>$this->createUrl('/articleauthor/wizard') ),

    ),

    // additional javascript options for the tabs plugin

    'options'=>array(

        'collapsible'=>true,

    ),

)); 

2- In tab3 we have a forms with ajaxSubmitButton.

echo CHtml::ajaxSubmitButton($model->isNewRecord ? 'create',$this->createUrl('/articleAuthor/wizard' ), array (

        'update'=>'#articleAuthor-ajax-result',

        ));

Problem is as follow:

I click on tab3 and submit the form ( it submits once, firebug show 1 ajax post).

I click on other tabs and again click back on tab3 and fill the form and submit ( firebug show 2 ajax posts!!)

I click on other tabs and click back again on tab3 and fill the form ( firebug shows 4 ajax posts).

I’m investigating to know the reason.

I’ve run into similar issues before.

The problem is that each tab refresh re-binds the click handlers thus doubling them each time.

The fix is to use the jQuery live() binding mechanism once upon page load instead of individual click() handlers. And if click() binding must be used, be sure to check if you’re already bound before binding.

Just tested some variations but same result, how can this be done using CJuiTabs and ajaxSubmitButton?

Hmm I am running into the same problems with Ajax validator and TinyMCE… Now i just turned it off… but it looks like the ajax validator has some problems with other js.

For the moment I found a workaround for it,

Tested on JuiTabs with ajaxSubmitButton and CGridView (some other tweaks needed) and it works smoothly:

solution is to generate new random id for both ajaxSubmitButton and CGridView, So past bound handlers don’t conflict with new ones.

I know that’s not the best solution but at least it works!

Bump. Anyone know a cleaner solution for this? Is there any way to remove the event handler generated by CHtml::ajaxSubmitButton?

At the moment I’m concatenating the unix timestamp to the end of the ajaxSubmitButton id but feels icky.