load() inside modal-body firing multiple times

Related searches

I am working on a script that opens a bootstrap modal, then you confirm your selection with an "im sure" button, then that post()'s and if it submits successfully it load's a comment form into the modal-body. The comment form is stored in a partial, and the comment for uses wysihtml5. Here is my current code:

    modal_div.find('.confirm-o-c').click(function(ee){
            $.post(
                lnk.attr('href'),
                function(data, textStatus, jqxhr){
                    console.log(data);

                    var lbl = lnk.parent().prev().children('.label').first();
                    lbl.fadeOut('fast');
                    lbl.attr('class','label label-'+data.status)
                       .text(data.text)
                       .fadeIn('fast');
                    var newlnk = $('<a href="#">newlink</a>');
                    newlnk.attr('href',lnk.attr('href').replace('complete','revert'));
                    lnk.parent().append(newlnk);
                    lnk.remove();
                    var status = data.status;
                    var id = data.object.id;
                    var objective_id = data.object.objective_id;

                    if(status === 'submitted'){
                        modal.fadeOut('fast', function(){
                            modal.load('<?=URL::to_action('objectives/completion_comment/')?>/'+id, function(){  
                                modal.fadeIn('fast');
                                $('#message-'+objective_id).wysihtml5();

                            });

                            $('#confirm-objective-complete').addClass('modal-large');
                            $('#submit-comment').css("display", "inline-block");
                            oldfooterbtn.css("display", "none");
                            footerbtncancel.css("display", "none"); 
                            footerbtnclose.css("display", "none");  
                            confirmtext.css("display", "none");                 
                        });
                    };

                });
            // objectives.init();
            ee.preventDefault();

The problem After confirming, the post works great, and it returns submitted, but then when the comment form is leaded it my console shows it happening like 8 times and I get this error TypeError: f.contentWindow is null

I have seen some like:

    $(this).one('load', function () {
        console.log("load complete");
    });'

but I couldn't figure our how to implement using a URL like I am. Any help would be greatly appreciated.

Thank you for looking over my code.


This was happening due the the variable modal being set to $('.modal-body') while their where multiple instiances of that in the DOM. once I narrowed it down to var modal = modal_div.find('.modal-body'); it was able to select only the current modal-body.

Event type of shown.bs.modal calling 2 times, In line `$('#myModal').on('shown.bs.modal', function(e)`, it does 2 times. http:// stackoverflow.com/questions/14969960/jquery-click-events-firing-multiple-times <script> $(function () { $('#myModal').on('shown.bs.modal', function (e) class= "modal-body"> <label class="control-label">Select File</label>� mouse in & out events bubble. as you mouse over the children of the modal, they fire mouse in and mouse out events that bubble up to the parent. this means on a mouse out, determine if the mouse is still inside the modal content. you use the event object passed to the handle to determine the target and the x & y position. the following simple code should work.


Like this : http://api.jquery.com/load/

$(this).load('myurl/page',{/*JSON data*/},function () {
    console.log("load complete");
});'

Javascript � Bootstrap, noConflict() // return $.fn.button to previously assigned value; $.fn. A rendered modal with header, body, and set of actions in the footer. � If a remote url is provided, content will be loaded via jQuery's load method and injected into the . modal-body . Bootstrap's modal class exposes a few events for hooking into modal� Not only the static content but also you can load external URL or dynamic content in a modal popup with Bootstrap. In this tutorial, we will show how you can load content from an external URL in Bootstrap modal popup. Also, you will know how to load dynamic content from another page via jQuery Ajax and display in Bootstrap modal popup.


Make sure you are not binding multiple events to the modal. You can clear it with the unbind function, specially if are binding events to it multiple times:

$('#myModal').unbind();

Modal � Bootstrap, Bootstrap only supports one modal window at a time. Whenever possible, place your modal HTML in a top-level position to avoid potential Included are the modal header, modal body (required for padding ), and modal footer (optional ). For more information, read the modal events docs for details on relatedTarget . Tip: &times; is the preferred HTML entity for close icons, rather than the letter "x". Modal Header and Footer Use w3-container classes to create different sections inside the modal content:


Modals - Bootstrap, Showing more than one modal at a time requires custom code. A rendered modal with header, body, and set of actions in the footer. If a remote URL is provided, content will be loaded one time via jQuery's load method and injected into the All modal events are fired at the modal itself (i.e. at the <div class=" modal"> ). 5. jQuery. On the click of Info button get the button id and split it to get the userid.Send an AJAX request where pass the userid as data.. Append response in .modal-body on AJAX successfully callback and display the modal by calling show method.


Executing code after modal-body is loaded � Issue #5169 � twbs , I tried using shown but loading the modal-body occurs after tghw added a commit to tghw/bootstrap that referenced this issue on Dec 3, 2012 The fact that I have to go digging for jQuery's .load() API belies the fact that this is It became especially apparent in IE (9) where code in the 'click' handler for� Here Mudassar Ahmed Khan has explained with an example, how to open (show) Bootstrap Modal Popup Window on Page Load in ASP.Net using C# and VB.Net. Inside the Server Side Page Load event handler, the RegisterStartupScript method of ClientScript class is used to register a call to the JavaScript function which will open (show) Bootstrap Modal Popup Window on Client Side using jQuery. TAGs: ASP


If I move the outside modal contents from application.haml to lessons/index.haml, the event listeners seem to stack on top of each other, and the amount of times the slideToggle() event fires seems to increment as I open and close the modal more and more times (interior modal contents remain in the modal view events/new).