CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
gooogenot
gooogenot

Reputation: 509

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?

Upvotes: 2

Views: 8429

Answers (2)

Prometee
Prometee

Reputation: 76

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');

Upvotes: 0

merv
merv

Reputation: 76790

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

  1. having jQuery parse the same string into html repeatedly;
  2. instantiating a new Modal object for every message; and
  3. 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

Upvotes: 10

Related Questions