dynamically created bootstrap3 modals do not work

Question

I have a page with dynamically generated list of items. Every item has button toggling modal window with more info but modal do not appear. The modals are placed right after body opening tag:

<div class="modal fade" id="auto9" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Something</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="auto16" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Something</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>

The buttons are:

<button class="btn btn-default" data-toggle="modal" data-target="#auto9" type="button">Подробнее</button></p>
<button class="btn btn-default" data-toggle="modal" data-target="#auto16" type="button">Подробнее</button></p>

If i place only button and modal within html body everything works fine. What is wrong?

Here is an example link: http://limo.delai-seo.ru/article/id/zakaz-vnedorozhnika — Alex Betev, Dec 29 '15 at 08:58
if you are dynamically adding these modals in html , then u must need to apply scope to those modals. — NiranjanK, Dec 29 '15 at 09:03
check console error "SyntaxError: expected expression, got '<' jquery-2.1.1.js (line 1) SyntaxError: expected expression, got '<' " — Lalji Tadhani, Dec 29 '15 at 09:06
Alex, check your `jquery-2.1.1.js` and `bootstrap.js` files. They seem to contain HTML content. If bootstrap.js isn't loaded, modals won't work — Edmund Sulzanok, Dec 29 '15 at 09:11

Anil Panwar · Answer 1 · 2015-12-29T09:18:48.837

Here is step by step Implementation in one of my project, hope it will help.

1-Suppose its your List, which have button in it(MVC Razor view example).

@foreach (var list in ListCollection)
 {                            
  <button type="button" class="btn btn-xs  btn-primary" data-toggle="modal" data-target="#exampleModal" data-id="@list.ID> Details </button>
 }

2-Here I have put data-id to each button to open a modal for this button in the list.

3-Each button will open the modal with more info using script(script below).

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">Title Here</h4>
            </div>
            <div class="modal-body">
              //Put here more details of the item, by Ajax call or any thing you like
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

4-Now the script part

$(document).ready(function () {
        $('#exampleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);//Button which is clicked
            var clickedButtonId= button.data('Id');//Get id of the button

            var modal = $(this);
            modal.find('.modal-body').text(clickedButtonId);
//Id of the clicked button which i have put inside the modal-body div class or put info here using ajax call for the button that button.

//Ajax call to get the more details of clicked button in the list.

            $.ajax({
                url: "URL",
                type: "POST",
                data: JSON.stringify({ id: clickedButtonId}),
                dataType: 'JSON',
                contentType: "application/json",
                success: function (response) {
                    modal.find('.modal-body').text(response);//Put here more info using ajax
                }
                  ,
                error: function () {

                }
            });

        })

    });

dynamically created bootstrap3 modals do not work

1 Answers1

Linked