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

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

• javascript
• jquery
• bootstrap-modal

Share Improve this question Follow edited May 28, 2017 at 20:07 Gabriele Petrioli 196k3434 gold badges271271 silver badges328328 bronze badges asked May 28, 2017 at 19:40 ReactingReacting 6,14388 gold badges4242 silver badges9595 bronze badges 5

• I'm not sure what's the problem, have you tried $('.read-more').html($('.read-more p').text()) – jackJoe Commented May 28, 2017 at 19:56
• @jackJoe the problem is not the appending of the text. Is that depending on the data-attribute it should show some text. – Reacting Commented May 28, 2017 at 19:58
• so you would like to get the text from the "related" read-more by its index (I assume by hovering or something), is that it? and currently you are getting the text from ALL the read-more, correct? – jackJoe Commented May 28, 2017 at 20:00
• @jackJoe yes, that is correct. – Reacting Commented May 28, 2017 at 20:01
• In that case it's just a case of getting it by the index: you need to pass it to the modal and then get it, example: hover the object with the attr id 1, and just update the modal text, don't append, write it via a html like my first ment. – jackJoe Commented May 28, 2017 at 20:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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./javascript/#modals-related-target

From what I understood after the ments, 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());