javascript - twitter bootstrap dynamic show modal - too much recursion error

i have jQuery v1.8.3 and twitter-bootstrap v2.2.1

I want to create a function to dynamically display the message.

function showMsg(header, text, closeFunc) {
    var randId = Math.round(Math.random()*1000000);

    var dialog = '<div id="modal_' + randId + '" class="modal hide fade">';
    dialog += '<div class="modal-header">';
    dialog += '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>';
    dialog += '<h3>' + header + '</h3>';
    dialog += '</div>';
    dialog += '<div class="modal-body">';
    dialog += text;
    dialog += '</div>';
    dialog += '<div class="modal-footer">';
    dialog += '<button id="modalBtn_' + randId + '" class="btn btn-primary">Close</button>';
    dialog += '</div>';
    dialog += '</div>'; 

    $('body').append(dialog);

    var modal = $('#modal_' + randId);

    modal.modal({backdrop : false, show : false, keyboard : false});
    modal.modal('show');

    var btn = $('#modalBtn_' + randId);
    btn.click(function(){
       closeFunc();
       modal.modal('hide');     
    });

}

But after display more than 3 these messages at once I get an error in Jquery: too much recursion

How can I fix it or have another way?

i have jQuery v1.8.3 and twitter-bootstrap v2.2.1

I want to create a function to dynamically display the message.

function showMsg(header, text, closeFunc) {
    var randId = Math.round(Math.random()*1000000);

    var dialog = '<div id="modal_' + randId + '" class="modal hide fade">';
    dialog += '<div class="modal-header">';
    dialog += '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>';
    dialog += '<h3>' + header + '</h3>';
    dialog += '</div>';
    dialog += '<div class="modal-body">';
    dialog += text;
    dialog += '</div>';
    dialog += '<div class="modal-footer">';
    dialog += '<button id="modalBtn_' + randId + '" class="btn btn-primary">Close</button>';
    dialog += '</div>';
    dialog += '</div>'; 

    $('body').append(dialog);

    var modal = $('#modal_' + randId);

    modal.modal({backdrop : false, show : false, keyboard : false});
    modal.modal('show');

    var btn = $('#modalBtn_' + randId);
    btn.click(function(){
       closeFunc();
       modal.modal('hide');     
    });

}

But after display more than 3 these messages at once I get an error in Jquery: too much recursion

How can I fix it or have another way?

Share Improve this question edited Nov 30, 2012 at 10:56 asked Nov 27, 2012 at 22:41 gooogenot 5094 silver badges15 bronze badges

Could you indicate what you might be executing in the callback function closeFunc? I'm testing your code and not seeing any errors, though I do have some suggestions for improvement. Oh, and you probably meant modal.modal('hide') instead of btn.modal('hide') – merv Commented Nov 27, 2012 at 22:59

Add a ment |

2 Answers 2

Sorted by: Reset to default 10

I couldn't recreate your "too much recursion" error, but I did want to suggest a better way of doing dynamic messages than the code you currently have. Namely, you could just be using a single Modal and update the content in it before showing it. That would eliminate all the overhead you're presently incurring by

having jQuery parse the same string into html repeatedly;
instantiating a new Modal object for every message; and
generating random id's and then searching through the DOM for elements created with them.

As an alternative, have the following blank Modal in the markup from the start. Doesn't really matter where, but bottom of the <body> is a typical location. If you must generate it dynamically, do it outside the showMsg function and do it only once.

<div id="msgModal" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3></h3>
  </div>
  <div class="modal-body">
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary callback-btn" data-dismiss="modal">Close</button>
  </div>
</div>

Notice I did make some alterations from yours by adding the fixed id="msgModal" to the modal and added the class callback-btn and attribute data-dismiss="modal" to the button.

Then the code for showMsg could be:

var $msgModal = $('#msgModal').modal({
      backdrop: false,
      show: false,
      keyboard: false
    }),

  showMsg = function (header, body, callback) {
    $msgModal
      .find('.modal-header > h3').text(header).end()
      .find('.modal-body').text(body).end()
      .find('.callback-btn').off('click.callback')
        .on('click.callback', callback).end()
      .modal('show');
  };

Here's a demo which outputs to the console if the footer button is clicked:

Plnkr

Or just trigger this event :

jQuery('<a href="#my_new_div_with_modal_template" data-toggle="modal">Click me !</a>').trigger('click.modal.data-api');

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - twitter bootstrap dynamic show modal - too much recursion error - Stack Overflow

2 Answers 2

Plnkr

与本文相关的文章

评论列表(0)