CODEWITHSUNDEEP
javascriptjquerybootstrap-modal
Reacting
Reacting

Reputation: 6123

How to dynamically append text to a modal?

I have this html

<div class="col-md-6">
    <div class="jumbotron">
        <a href="#" data-toggle="modal" data-target="#myModal">read more...</a>
        <div class="read-more hidden">
            <p>1 - THE TEXT I NEED TO APPEND TO THE MODAL</p>
        </div>

    </div>
</div>
<div class="col-md-6">
    <div class="jumbotron">
        <a href="#" data-toggle="modal" data-target="#myModal">read more...</a>
        <div class="read-more hidden">
            <p>2 - THE TEXT I NEED TO APPEND TO THE MODAL</p>
        </div>

    </div>
</div>

This is the section of the modal where I need to append the text within the element with the class read-more

<div class="modal-body">
    <!-- TEXT FROM THE READ MORE CLASS ELEMENT NEEDS TO BE APPENDED HERE -->
</div>

And this the jQuery function I have so far where I am adding a data-attr for every element with the class read-more:

jQuery(document).ready(function($) {
    var $readmore = $('.read-more');
    var $readmoreParagraph = $('.read-more p');
    $readmore.each(function(i, el) {
        var $dataAttr = $(el).attr('data-attr', i);                   
    });
});

To get this output:

<div class="read-more" data-attr="0">
    <p>THE TEXT I NEED TO APPEND TO THE MODAL</p>
</div>

TL;DR:

I need to append to the modal-body the text on the <p> under the div with the class read-more.

Any suggestions?

UPDATE

I did this:

$('#myModal .modal-body').append($("[data-attr="+i+"] > p"));

But as a result I am getting this in the modal-body:

1 - THE TEXT I NEED TO APPEND TO THE MODAL
2 - THE TEXT I NEED TO APPEND TO THE MODAL

Upvotes: 0

Views: 11848

Answers (2)

jackJoe
jackJoe

Reputation: 11148

From what I understood after the comments, I suggest the following:

After triggering the modal, get the content of the read-more you would like, and just use that text and place it at the modal (not appending, an append adds to the object).

Like this (example for the id 1):

$('#myModal .modal-body').html($("[data-attr=1] > p").text());

Upvotes: -1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

Use the show.bs.modal event to change the contents of the body each time it is shown.

$('#myModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget), // Button that triggered the modal
      content = button.siblings('.read-more').html(),
      modal = $(this);

  modal.find('.modal-body').html(content);
});

See http://getbootstrap.com/javascript/#modals-related-target

Upvotes: 3

Related Questions