Update record in Modal

Buonasera a tutti,

chiedo cortesemente aiuto per l’update dei record di una gridview aprendo il form in una finestra modal in Yii2.

Ho seguito questa guida http://www.yiiframework.com/wiki/806/render-form-in-popup-via-ajax-create-and-update-with-ajax-validation-also-load-any-page-via-ajax-yii-2-0-2-3/

ma noto che ogni volta che apro il form cliccando sul pulsante update dell’action column il successivo submit della form avviene un numero di volte uguale al numero di volte che si apre la modal.

Mi spiego meglio. Apro il form, premo il pulsante Update e con Firebug vedo che l’invio avviene una volta. Chiudo la modal e la riapro e premendo “submit” il form viene inviato 2 volte, chiudo e riapro ed il form viene inviato 3 volte, ecc.

Tranne l’ultimo invio che va a buon fine, tutti i precedenti invii hanno stato “Aborted”.

Il gridview è così definito:




    <?php

    Pjax::begin([

        'id' => 'testDataGridview',

        'enablePushState' => false,

    ]);

    ?>


    <?=

    GridView::widget([

        'dataProvider' => $testDataProvider,

        'filterModel' => $searchModel,

        'columns' => [

            ['class' => 'yii\grid\SerialColumn'],

            'id',

            'test_code',

            'name',

            'created_at',

            'updated_at',

            [

                'header' => '<i class="glyphicon glyphicon-cog"></i>',

                'class' => 'yii\grid\ActionColumn',

                'template' => '{update} {delete}',

                'controller' => 'TestData',

                'buttons' => [

                    'update' => function ($url, $model, $key) {

                        return Html::a('<span class="glyphicon glyphicon-pencil"></span>', Url::to(['test-data/update', 'id' => $key]), [

                                    'class' => 'md-update-link- showModalButton',

                                    'value' => Url::to(['/test/test-data/update', 'id' => $key]),

                                    'title' => Yii::t('app', 'update'),

                                    'data-toggle' => 'modal',

                                    'data-target' => '#modal',

                                    'data-id' => $key,

                                    'data-pjax' => '1',

                        ]);

                    },

                        ],

                    ],

                ],

            ]);

            ?>


        <?php Pjax::end(); ?>



Il form:




<?php


use yii\bootstrap\ActiveForm;

use yii\helpers\Html;

use yii\widgets\Pjax;

use yii\helpers\Url;

use yii\bootstrap\Button;


/* @var $this yii\web\View */

/* @var $model common\modules\test\models\TestData */

/* @var $form yii\widgets\ActiveForm */




?>


<?php

Pjax::begin([

    'id' => 'formTestData',

    'enablePushState' => false,

    'clientOptions' => ['method' => 'POST'],

]);

?>


<div class="test-data-form">


    <?php

    $formAction = $model->isNewRecord ? 'test-data/create' : 'test-data/update';

    $form = ActiveForm::begin(

                    [

                        'id' => 'md-form',

                        'action' => Url::to([$formAction, 'testCode' => $model->test_code, 'id' => $model->id]),

                        'enableAjaxValidation' => false,

                        'validationUrl' => Url::to(['/test/test-data/ajax-validation']),

                        'ajaxDataType' => 'json',

                        'ajaxParam' => 'ajax',

                        'layout' => 'horizontal',

                        'options' => ['data-pjax' => true],

                    ]

    );

    ?>


    <?= $form->field($model, 'id')->textInput() ?>


    <?= $form->field($model, 'test_code')->textInput(['maxlength' => true]) ?>


    <?= $form->field($model, 'name')->textInput(['maxlength' => true]) ?>


    <?= $form->field($model, 'created_at')->textInput() ?>


	$form->field($model, 'updated_at')->textInput() ?>


    <div class="form-group-">

        <?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>

    </div>


<?php ActiveForm::end(); ?>


</div>

<?php Pjax::end(); ?>



Il controller:




    public function actionUpdate($id) {

        $model = $this->findModel($id);


        if ($model->load(Yii::$app->request->post()) && $model->save()) {

            $model->refresh();

            return $this->renderAjax('_form', [

                        'model' => $model,

            ]);

        } else if (Yii::$app->request->isAjax) {

            return $this->renderAjax('_form', [

                        'model' => $model

            ]);

        }

    }



Selezionando 3 volte il pulsante update della gridview la console Firebug presenta queste chiamate:

POST http://localhost/or/backend/web/index.php?r=test%2Ftest-data%2Fupdate&testCode=1&id=1 Aborted jquery.js (riga 8630)

POST http://localhost/or/backend/web/index.php?r=test%2Ftest-data%2Fupdate&testCode=1&id=1 Aborted jquery.js (riga 8630)

POST http://localhost/or/backend/web/index.php?r=test%2Ftest-data%2Fupdate&testCode=1&id=1 200 OK jquery.js (riga 8630)

Qualcuno sa dirmi il perché di questo comportamento?

Grazie.

Carina come cosa :)

Prova a vedere se aprendo e chiudendo la modale rimangono i DOM duplicati (spiegherebbe anche gli Aborted), cioè a quanto dici sembrano esserci più Elementi che fanno scaturire la submit, individua quale selettore avvia la submit e, dopo aver aperto e chiuso un paio di volte la modale, cerca quel selettore con firebug o simli…

Ciao Nicola,

innanzitutto grazie per la risposta.

Effettivamente sono già diversi giorni che cerco di capire “cosa” aggiunge l’evento relativo al submit del form.

Ho anche modificato il file js per fare in modo che il contenuto della modal venisse rimosso alla chiusura, ma senza risultati:


$("#modal").on('hidden.bs.modal', function () {

        $('#modalContent').empty();

    });  

Proseguo con la ricerca e se trovo la causa ti aggiorno.

Ciao.

Ciao Beppe,

immagino tu abbia risolto, in caso contrario fammi sapere che ti pubblico il sistema che uso io.

Ciao Claudio,

sì, io ho risolto spostando il codice js che intercetta il submit del form dalla view che viene aperta nella finestra modal alla view che contiene la gridview. Non so se il metodo è giusto però funziona correttamente, sia l’update che il refresh del gridview.

Grazie.

Si è il metodo corretto, come avevi prima ad ogni apertura della modale ti tirava su la funzione js moltiplicando le chiamate per le volte che apri la modale :)

Buonasera e buon anno,

ritorno su questo post perché ho il medesimo problema con il filtro della gridview.

Il filtro è attivato dal parametro ‘filterModel’ => $searchModel,

Ad ogni caricamento della view che contiene la gridview nella finestra modal la successiva chiamata del filtro viene inviata più volte. (1 volta per ogni apertura della modal)

Qualcuno sa cortesemente dirmi se è possibile utilizzare il filtro standard della gridview in una modal e nel caso come evitare chiamate multiple?

Oppure è necessario fare il renderPartial della view e poi gestire manualmente filtro ed ordinamento?

Grazie.

Ola não consigo mandar mensagem para vc poderia me passar skyper para nós conversarmos? estou com maior problema sobre isso.