script inside bootstrap modal

Question

Something weird - I have the script inside the bootstrap modal. sometimes the script is loaded and works and sometimes it doesn't. here is a URL for example:

https://ns6.clubweb.co.il/~israelig/sites/followmyroutes/test_sec.php

Click on the button and see the modal, then close the modal and open it again. After the couple of times, the scripts inside the modal stops working (scripts like form validation [when you submit it], image browser)

How can I fix it so all the script will work every time?

Answer 1

我认为请求同步中的问题，可以使用Ajax reque

Answer 2

The way you populate the html is right or not suggested to be advised by coders. Check again from where you got the documentation.

your existing code from backend call

 $(document).on('ready', function() {
    $("#input-8").fileinput({

    });
});

Try changing like

$(document).on('ready', function() {
   setImageUploader();
});


 function setImageUploader(){
 $(document).find("#input-8").fileinput({

        });
}

And also

$.ajax({
                cache: false,
                type: 'GET',
                url: 'itinPage-secManage.view.php',
                data: info,
                success: function(data) {
                    $modal.find('.modal-body').html(data);
                    setTimeout(function(){ //added this line.
                       setImageUploader()
                        })
                }
            });     

Answer 3

It looks like your common libraries like jquery bootstrap-datepicker, fileinput theme etc are being get every time the modal is launched. This may cause a sort of namespace corruption or some weird side effect of the kind you seem to see.

You could put all the common libraries outside of the modal to prevent this from happening.

Answer 4

the problem in the ajax request, I means you maste waite while the request it's done.

var request = $.ajax({
                cache: false,
                type: 'GET',
                url: 'itinPage-secManage.view.php',
                data: info
            });
request.done(function(data) {
$modal.find('.modal-body').html(data);
});