yii2-pjax I open modal 2 times, it will submit 2 times.

[mbilkin]

#11761 pigochu write 16 Jun 2016

I create a bootstrap modal , the modal content loaded from a pjax page. The pjax page is ActiveFom and set 'data-pjax' => true... Thats why I open modal N times, it will submit N times.

I install yii2-pjax 2.0.7.1 I use gridView and action on row, wich inicialize modal content (pjax+form). After submit modal form gridView reloaded. view for modal window:

use yii\bootstrap\ActiveForm;
use yii\widgets\Pjax;

 Pjax::begin(['id' => 'new_note', 'enablePushState' => false,]);
 $form        = ActiveForm::begin([
                'layout'      => 'horizontal',
                'options'     => ['class' => 'signup-form form-register1', 'data-pjax' => 'true'],
                'fieldConfig' => [
                    'template'             => "{label}\n{beginWrapper}\n{input}\n{hint}\n{error}\n{endWrapper}",
                    'horizontalCssClasses' => [
                        'label'   => 'col-sm-4',
                        'offset'  => 'col-sm-offset-4',
                        'wrapper' => 'col-sm-8',
                        'error'   => '',
                        'hint'    => '',
                    ],
                ],
    ]);
...

Yii generated js:

jQuery(document).pjax("#new_note a", {"push":false,"replace":false,"timeout":1000,"scrollTo":false,"container":"#new_note"});
jQuery(document).on("submit", "#new_note form[data-pjax]", function (event) {jQuery.pjax.submit(event, {"push":false,"replace":false,"timeout":1000,"scrollTo":false,"container":"#new_note"});});

But if I open modal N times, it will submit N times. I look at methods handleSubmit and handleClick and I see that one (handleClick) is fixed and the other does not (handleSubmit). In the handleSubmit method, there are no following lines:

      // Ignore event with default prevented`
     if (event.isDefaultPrevented())`
         return false;

Why?

Additional info

Q	A
Yii version	2.0.5
PHP version	5.6

[fcaldarelli]

How do you create/open the modal window? You could check that just one modal window should be open. If you see in browser console modal window duplicates, when fire the action to open the modal window destroy the previouses, so the form should be submitted just one time.

[mbilkin]

On the page there is a GridView with its pjax, it has links in the lines. Links are not one but several.

<a href="{url}" data-target="#clob-data" data-toggle="modal" data-remote="true"><span class="glyphicon glyphicon-duplicate" title="" data-toggle="tooltip" data-original-title="Дублировать"></span></a>

When you click link, the modal window opens. Content is loaded remotely (data-remote="true"). The code for the remote script was presented above. In it, the form sends data to its pjax. In this case, the event hung on opening the first modal window is saved (not destroyed) ... and when the next modal window is opened, it will also be executed. Because the next code will be executed each time a window is opened.

jQuery(document).pjax("#new_note a", {"push":false,"replace":false,"timeout":1000,"scrollTo":false,"container":"#new_note"});
jQuery(document).on("submit", "#new_note form[data-pjax]", function (event) {jQuery.pjax.submit(event, {"push":false,"replace":false,"timeout":1000,"scrollTo":false,"container":"#new_note"});});

[m1roff]

is it fixed?

[samdark]

No.

[fmunoz88]

Dobles peticiones con pjax lo solucionaba concatenando uniqid de PHP: 'id' => 'new_note' . uniqid()

[ak868308]

@fmunoz88 solution is good. If you want to call some manual pjax event just set the "class" and call them by using className

[solinskip]

Is it fixed ?

[samdark]

No, it's not. When something is fixed, issue is closed.

[adyoi]

$('#pjax-name').on('pjax:end', function(e) {
        e.preventDefault();
        $.pjax.reload({timeout: false, container:'#grid-name'});
});

// Fix The Problems of Universe
$(document).on('submit', '#form-name', function(e) {
        e.preventDefault();
        return false;      
});

after try several many times, i found the best solutions, greet thanks.

[fcaldarelli]

Nowadays the best, fast and scalable solution for these things is using Vue.js. React.js or similar.

They are usable also for just one single page / view, simply including js references.

[lgveronese]

I did it to solve:

Pjax::begin( [ 'id' => uniqid('pjax_'), 'clientOptions' => [ 'container' => '.modal-content' ] ] );

Now it works fine..