Hey guys, I’ve been having some issues when validating my forms using an ajax submit button. On successful ajax submission I want to update a specific div, dependent on whether the form is valid or not. The problem is I’m not sure how to pass that information to the ajax call in order to correctly alter the success function.
My ajax submit action, called from
if( $model->save()) {
if( isset( $optional_vars['assignment']))
$this->ajaxActionAssign( $user, $model, $optional_vars);
$this->renderPartial($content, array( 'data'=>$user), false, true);
}
else {
echo '<h4>Invalid entry</h4><br/>';
$data = array_merge(array('model'=>$model,'user'=>$user), $optional_vars);
$this->renderPartial($form, $data, false, true);
}
My button function
public function addButton($title, $label='Add')
{
$title = strtolower($title);
echo CHtml::hiddenField('action', 'add');
echo CHtml::ajaxSubmitButton($label, '',array(
'beforeSend'=>'function() {
$("#'.$title.'-box-form").replaceWith("<h4>Sending...</h4>");
}',
'success'=>'function(html) {
if(!html.match("^invalid")){
$("#'.$title.'-box-form").html("");
$("#'.$title.'-box-content").html(html);
} else {
html = html.replace("invalid","");
$("#'.$title.'-box-form").html(html);
}
return false;
}',
),array('class'=>'btn btn-primary', 'live'=>false, 'id'=>$title.'add-button'));
}
Simplified version of HTML involved
<div id="phone-box">
<div class="bootstrap-widget-header"></div>
<div class="bootstrap-widget-content" id="yw0">
<div id="phone-box-wrapper" class="box-wrapper">
<div id="phone-box-content" class="box-content">
</div>
</div>
<div id="phone-box-form" class="box-form">
</div>
</div>
At the moment it breaks if you try to submit an invalid form, the render partial will place itself inside of the phone-box-content div, instead of the phone-box-form div. The action itself is called from a button inside of the phone-box-form div. Any help would be amazing.