[SOLVED] Disable ajaxSubmitButton after insert to DB

Hi

I am using ajaxSubmitButton to save form data to database/model basing on code from Yii Playground

My modification is that ajaxSubmitButton calls controller which initializes new model and assigns some values to its attributes.

If model is saved() returning ajax call prints ‘Success’ else ‘Error’ underneath the button.

My code is:

View:

<?php

echo CHtml::ajaxSubmitButton(

  'Save',

  array('Model1/saveAjaxPostedData'),

  array('update'=>'#save_result',) 

);

?>


<!-- result goes in this div-->

<div id="save_result"></div>

Model1Controller.php :

public function actionSaveAjaxPostedData()

{


$model = new Model2;

$model->attributte1 = some_explicit_value1;     

$model->attributte2 = $_POST['some_value_from_ajax_submitted_form']; 

...

// MORE VALUES/ATTRIBUTTES

...

        

if($model->save())

{ echo 'Success';}

else

{ echo 'Error';}

       

}

How can I disable button after it’s been clicked to prevent double-clicks? Could you show this on Yii’s Playground example

And how can I display different text/animation while saving/before I echo ‘Success’?

Thanks in advance

I haven’t tested this,but I think this’ll work:

	echo CHtml::ajaxSubmitButton("Save",

    	array('Model1/saveAjaxPostedData'),

    	array('update'=>'#save_result', 'success' => 'function(data,status){

            	$("#ajaxButton").attr("disabled", "disabled");

        	}'), array('id' => 'ajaxButton')); ?>

Yeah now the button is disabled after being clicked, but the text is not rendered in <div> underneath the button on successful save (I see new records in database). Maybe ‘success’ option is overriding it?

'success' => 'function(data,status){

$("#ajaxButton").attr("disabled", "disabled");

??

OK I got it by replacing ajaxOption success

'success' => 'function(data,status){

$("#ajaxButton").attr("disabled", "disabled");

With beforeSend:

'beforeSend' => 'function(data,status){

$("#ajaxButton").attr("disabled", "disabled");

And now text echoed in Controller is displayed in <div>. Seems like ‘success’ option overrides returning ajax text. Because second option that works is rendering text by JQuery:

'success' => 'function(data,status){

$("#ajaxButton").attr("disabled", "disabled");

$("#save_result").html("Success");