CODEWITHSUNDEEP
phpjqueryajaxmodal-dialog
eberswine
eberswine

Reputation: 1224

Jquery modal with ajax content to load onclick not all at once

I am a bit baffled by my situation, I hope you guys could shine a little light on my challenge!

Ok, I have made a query that loads about 1,000 or so names in my database. I successfully made an echo that loads a modal window with the profile details inside of each modal div.

The problem is when I have 1,000 names to populate, it has to build each modal with the profile details inside and it takes a while to load the page.

I am looking for a better way to retrieve the modal window with an onclick action of some sort, so all the modal windows will not have to be made when the page loads. So maybe just an action that when a user clicks the link, it will load it somehow ?

Here is my code that works, but again -- is loads all the info on each page load:

<div  id="myModal_."$pageID"" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-body">
    <script>
    $("#".$pageID."").load("admin/page1.php?m=".$pageID."");
    </script>
  </div>
</div>

<a data-toggle="modal" href="#myModal_'.$pageID.'">'.$name.'</a>

Thanks in advance!!

EDIT

Here is my html I am seeing in firebug -- it isn't loading anything in the modal window ?

<div class="modal-body">
    <div id="7"></div>                                                 
    <script>
        $('a[href="#myModal7"]').on('click',function(){
        $("#7").load("admin/page1.php?m=7");
        });
    </script>
</div>

<a href="#myModal7" data-toggle="modal">Name goes here</a>

Upvotes: 0

Views: 2301

Answers (3)

Expedito
Expedito

Reputation: 7795

This function creates the HTMLonly when users click on a link. The idea is to avoid wasting a lot of time loading HTML that won't be used:

$(".modalLink").click(function(){
    var id = $(this).attr('id');
    if($("#myModal_" + id).length == 0) {
        var div1 = $('<div id="myModal_' + id + '" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" />');
        var div2 = $('<div class"modal-body"/>');
        $('body').append(div1);
        div1.append(div2);
    }
    $('#myModal_' + id + ' div').load("admin/page1.php?m=" + id);
    $("#myModal_" + id).modal();
    return false;
});

Each link should have the class 'modalLink'and a unique id:

<a id="$pageID" class="modalLink" href="#">$name</a>

Since I don't know what modal script you're using, I coded it for the one I found here: http://kylefox.ca/jquery-modal/examples/. I tested it, and it works as expected.

Upvotes: 1

Adil Shaikh
Adil Shaikh

Reputation: 44740

  <div  id="myModal_."$pageID"" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-body">
        <script>
           $('a[href="#myModal'.$pageID.'"]').on('click',function(){
               $("#myModal_".$pageID." .modal-body").load("admin/page1.php?m=".$pageID."");
           });
        </script>
      </div>
    </div>


<a data-toggle="modal" href="#myModal'.$pageID.'">'.$name.'</a>

Upvotes: 1

Kevin Pei
Kevin Pei

Reputation: 5872

$('#mylink').click(function(){
     $("#".$pageID."").load("admin/page1.php?m=".$pageID."");
});

is this what you're looking for?

Upvotes: 0

Related Questions