Suppose I have created in the loop several modal bootstrap windows, where the main window div is:

<div id="myModal'.$rezult['id'].'" class="modal fade" role="dialog">

Form in the window:

 <form id="form'.$rezult['id'].'" action="ajax/insert.php?id='.$rezult['id'].'" method="post">

Window call button:

 <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal'.$rezult['id'].'">Insert</button>

Then in the modal window I placed 2 buttons <input> and <button> , both buttons have the ability to close the window:

 <input type="submit" class="btn btn-primary" data-dismiss="modal" value="Сохранить" form="form'.$rezult['id'].'"> <button type="button" class="btn btn-default" data-dismiss="modal">Отменить</button>

I used ajaxform plugin to send data from the form, but the type="sumbit" attribute does not work due to the data-dismiss="modal" attribute and as a result the script does not work. Without knowing the exact naming of the form id and the main div'a , I don’t know how I can take the data.

jquery script:

 $(this).ajaxForm( { success: function(data) { if(data) { $('#pkSkLapa').html(data); } else { alert("error!"); } } });

    2 answers 2

    Remove data-dismiss="modal" and add:

     $(this).ajaxForm( { var modal = $(this).closest('.modal'); success: function(data) { modal.modal('hide'); // либо сюда if(data) { $('#pkSkLapa').html(data); } else { alert("error!"); } } }); $('input[type="submit"]', this).click(function() { $(this).closest('.modal').modal('hide'); // либо сюда });
    • The first method is not called at all, and the second hides the window, but does not remove the translucent gray background. The #pkSkLapa element is also not updated, although through Firebug I see that the request was sent and the response from the server came. - Zin Kun
    • I updated the answer, I can not say anything to the #pkSkLapa account, this is a separate question. - apelsinka223

    Implemented this idea differently. Now the modal window is created once, tobish not in a loop:

     <div id="myModal" class="modal fade" role="dialog">

    Only the window call button remains in the loop, they call the same window, but now have the value attribute

     <button type="button" class="btn btn-info btn-lg getid" data-toggle="modal" data-target="#myModal" value="'.$rezult['id'].'">Insert</button>

    Modified <input type="submit"> and added some <input type="hidden"> :

     <button id="post" type="submit" class="btn btn-primary" form="form1">Сохранить</button> <input id="btnsubmit" type="hidden" name="id" value="ok" form="form1" > <button type="button" class="btn btn-default" data-dismiss="modal">Отменить</button>

    And then I do this:

     function getByid() { var getid=$(this).val(); $.ajax( { type: "POST", data: "getid="+getid, //отправляю id в глоб.массив $_POST['id'] url: "ajax/getbyid.php?ref=pk9kl", dataType: "json", success: function(data) { if(data!=null) { if(data.e)//если пришла ошибка { $("#vu").val(data.e); $("#skola").val(data.e); } else { $("#vu").val(data.vu); $("#skola").val(data.skola); $("#btnsubmit").attr("value", data.id); } } else { $("#vu").val("error!"); $("#skola").val("error!"); } } }); } $('#form1').ajaxForm( { success: function(data) { $("#myModal").modal('hide');//закрываем окно $("#form1")[0].reset();// ресет формы location.reload();//перезагрузка страницы } });

    The truth was not able to achieve an asynchronous update, so I decided to just reload the page, it looks not too bad, and it does not appear in my eyes.