yiisoft / jquery-pjax

pushState + ajax = pjax
http://pjax.herokuapp.com
MIT License
143 stars 40 forks source link

Too many form submits #67

Closed delikates-nsk closed 1 year ago

delikates-nsk commented 6 years ago

Sorry for broken english. I have modal window. Inside him pjax-container and form loading by ajax request every time when i'mopen the window.

<div class="modal-dialog">
    <div class="modal-content">
        <div id="pjax-form-content" data-pjax-container="" data-pjax-timeout="1000">
            <form id="modal-form" >
                 ...
                 <button type="submit">Save</button>
             </form>
    </div>
</div>

Submitting form, closing modal window. Open modal-window again and try submit. Inside browser "developer tools" on tab "Network" i'm see 2 submit requests. Close window. Open. Submit. See 3 (!) submit requests... and more.. and more...

On close window event i'm bind next .js-function

$("document").ready(function(){
             var $modal = $(".modal-dialog").parent();
             $modal.one("hidden.bs.modal",function () {
                jQuery(document).off("submit", ".modal-dialog div[data-pjax-container] form[data-pjax]");
             });   
         });

After open and closing window i see inside browser "developer tools" on tab "Inspector" form and form's submit events. I found 2 events - from Yii and pjax. After closing window - event by Yii is deleted, but event from pjax not deleted. And after open window again i'm see 3(!) submit events, 1 from Yii and 2(!) same events from pjax. If i'm close window and open again - i'm see 3(!) same events on submit form by pjax.

I do not understand why this happens but I found a solution.

1st - inside widgets\Pjax.php change string

$js .= "\njQuery(document).on($submitEvent, $formSelector, function (event) {jQuery.pjax.submit(event, $options);});";

to

$js .= "\njQuery(document).off($submitEvent, $formSelector);
\njQuery(document).on($submitEvent, $formSelector, function (event) {jQuery.pjax.submit(event, $options);});";

2nd - On close window event i'm bind next .js-function

$("document").ready(function(){
             var $modal = $(".modal-dialog").parent();
             $modal.one("hidden.bs.modal",function () {
               var $id = $(".modal-dialog div[data-pjax-container]").attr("id"); 
                jQuery(document).off("submit", "#"+$id+" form[data-pjax]"); //for disable too times pjax submit                           });   
         });

I hope this will somehow help the author to solve this problem

hiinngg commented 6 years ago

you can refer this: https://www.yiiframework.com/forum/index.php/topic/69942-solved-pjax-in-remote-modal-cause-multiple-request/ but I think it's not the best way

delikates-nsk commented 6 years ago

This is the first thing I tried. Unfortunately it did not help me

hiinngg commented 6 years ago

if there have nesting relation about pjax ? refer this option: skipOuterContainers

samdark commented 1 year ago

Closing since it was more of a support question.