How to resolve ajax conflicts when displaying a form in a modal window (Yii)?

Question

JavaScript

I display the form in a modal window using renderPartial. The modal window itself with the ajax request was wrapped in a widget.

But when editing the output form (when clicking on the form elements), an action is triggered via ajax that handles a click on another button on the same page.

I've tried disabling client-side validation, but to no avail. It is completely incomprehensible how another action is triggered.

Here is the

Widget code

<?php 
class EditPostWidget extends CWidget {

    public $model = array();
    public $id;
    public function init()
    {

    }

    public function run()
    {

        $this->beginWidget('bootstrap.widgets.TbModal', array('id'=>$this->id,
            //'htmlOptions'=>array()
            ));

        echo '<div class="modal-header">';
        echo '<a class="close" data-dismiss="modal">&times;</a>';
        echo '<h4>Редактирование объявления</h4>';
        echo '</div>';

        echo '<div class="modal-body">';
        
        echo '</div>';

        echo '<div class="modal-footer">';
        $this->widget('bootstrap.widgets.TbButton', array(
        'id'=>'save_edit_post',
        'label'=>'Сохранить',
        'url'=>'#',
        //'buttonType'=>'submit',
        'type'=>'success',
        'htmlOptions'=>array(),
        ));

        $this->widget('bootstrap.widgets.TbButton', array(
        'label'=>'Закрыть',
        'url'=>'#',
        'htmlOptions'=>array('data-dismiss'=>'modal'),
        ));

        echo '</div>';
        $this->endWidget();

        

        echo '<script>
        //var post_id'.$this->model->post_id.';
        $("#buttonread").click(function(){
        var w = $(".modal-body");
        w.load("'.Yii::app()->createUrl('Posts/EditPost').'",{post_id:"'.$this->model->post_id.'"})
        //$.ajax({url:"'.Yii::app()->createUrl('Posts/EditPost').'", type: "POST", data: "post_id='.$this->model->post_id.'"})
        });
        </script>';

    }

}

?>

The form

<?php /** @var BootActiveForm $form */
?>
<div id="modal">
<?php
     $form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
        'type'=>'horizontal',
        'htmlOptions'=>array('style'=>'overflow:hidden;'),
         'enableClientValidation'=>true,
        'clientOptions'=>array(
            'validateOnSubmit'=>true,),
    )); ?>
        <div class="row">
        <div class="span4">
        <?php echo $form->labelEx($model,'title'); ?>
        <?php echo $form->textField($model,'title'); ?>
        <?php echo $form->error($model,'title'); ?>
        </div>
        </div>
        <div class="row">
        <div class="span4">
        <?php echo $form->labelEx($model,'text'); ?>
        <?php echo $form->textArea($model,'text', array(
            'rows'=>5,
            'cols'=>45,
            'style'=>'width: 526px;',
            )); ?>
        <?php echo $form->error($model,'text'); ?>
        </div>
        </div>
        <div class="row">
        <div class="span4">
        <?php echo $form->labelEx($model,'country_id'); ?>
        <?php echo $form->textField($model,'country_id'); ?>
        <?php echo $form->error($model,'country_id'); ?>
        </div>
        <div class="span4">
        <?php echo $form->labelEx($model,'category_id'); ?>
        <?php echo $form->textField($model,'category_id'); ?>
        <?php echo $form->error($model,'category_id'); ?>
        </div>
        </div>
        <div class="row">
        <div class="span4">
         <?php echo $form->labelEx($model,'state_id'); ?>
        <?php echo $form->textField($model,'state_id'); ?>
        <?php echo $form->error($model,'state_id'); ?>
        </div>
        <div class="span4">
        <?php echo $form->labelEx($model,'phone'); ?>
        <?php echo $form->textField($model,'phone'); ?>
        <?php echo $form->error($model,'phone'); ?> 
        </div>
        </div>
        <div class="row">
        <div class="span4">
        <?php echo $form->labelEx($model,'town_id'); ?>
        <?php echo $form->textField($model,'town_id'); ?>
        <?php echo $form->error($model,'town_id'); ?> 
        </div>
        <div class="span4">
        
            <?php echo $form->labelEx($model,'find_loss', array('style'=>'margin-bottom:10px;')); /*echo CHtml::tag('br');*/ ?>
            <?php echo $form->radioButtonList($model,'find_loss', array('1'=>'Пропажа', '2'=>'Находка'), array('style'=>'outline: none;', 'labelOptions'=>array('style'=>'display:inline'), )); ?>
        <?php echo $form->error($model,'find_loss'); ?>
        
        </div>
        </div>

        

    </div>
    <?php $this->endWidget(); ?>

Further, when a form is shown in a modal window, when a form element (a text field, for example) is selected, the same (not necessary in this context) action is triggered via ajax. Can you please tell me how to avoid such conflicts?

Answer 1

Show an online demo, it will be easier to understand and help you.