bootstrap modal box not work in remote tabs

441
November 21, 2016, at 6:05 PM

I work with bootstrap remote tabs plugin and need to load $.ajax modal box link into each remote tabs like this :

HTML:

<ul class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">No remote data</a></li>
    <li><a href="#simple" data-toggle="tab" data-tab-url="remote/normal.html">Simple remote data</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active" id="home">
        <p><a href="javascript:void(0)" id="71" class="push info" title="Full Image">check modal</a></p>
    </div>
    <div class="tab-pane" id="simple"></div>
</div>

JS:

$(document).ready(function() {
        $(function() {
            $('.push').click(function(e) {
                e.preventDefault(); 
                var id = $(this).attr('id');
                $.ajax({
                    type: 'post',
                    url: 'remote/remote.php', // in here you should put your query 
                    data: {'bookid' : id,'lang' : 'en'}, // here you pass your id via ajax .
                    // in php you should use $_POST['post_id'] to get this value 
                    success: function(r) {
                        // now you can show output in your modal 
                        $('#bookdetails').modal({
                                backdrop: 'static',
                                keyboard: false
                            }) // put your modal id 
                        $('.something').show().html(r);
                    }
                });

            });
        });
    });

In reality first tabs is worked and show remote value into modalbox but when I click another tabs I see link but after click in, modalbox not shown and not work with remote link. how do fix this ?

NOTE: please click in check modal link for remote tabs

Live demo

Answer 1

Found the issue . You are binding .push element when page loaded in first tab, so the first modal is working and in second tab whichis remote tab, the .push element in not bound. So

Your JS should be like this :

$(document).on('click', '.push', function(e) {
  e.preventDefault();
  var id = $(this).attr('id');
  $.ajax({
    type: 'post',
    url: 'remote/remote.php', // in here you should put your query 
    data: {
      'bookid': id,
      'lang': 'en'
    }, // here you pass your id via ajax .
    // in php you should use $_POST['post_id'] to get this value 
    success: function(r) {
      // now you can show output in your modal 
      $('#bookdetails').modal({
          backdrop: 'static',
          keyboard: false
        }) // put your modal id 
      $('.something').show().html(r);
    }
  });
});
Rent Charter Buses Company
READ ALSO
What affects the speed of an Ajax call?

What affects the speed of an Ajax call?

I am aware that the amount of data being sent to the server, as well as how much of information is returned in the call have impact on how fast the call would be. .

302
How to solve race condition between js that manipulates iframe and iframe load?

How to solve race condition between js that manipulates iframe and iframe load?

I have got javascript file that checks whether iframe is loaded and if it is loaded then append some content to the iframe.

402
Adding new list options, refreshing updated list dynamically

Adding new list options, refreshing updated list dynamically

I'm learning Yii2 by trying to make a project using it. .

386