Load HTML page inside a DIV using .load and jQuery

Question

I have a function in PHP that renders and return a HTML content and I need to load that result on a DIV when page load. I'm doing in this way:

 <div id="myModal" class="reveal-modal" title="El Farol" data-animation="fade"> <a class="close-reveal-modal">&#215;</a>
     <script>
         $(document).ready(function() {
             $(this).load("http://devserver/app_dev.php/register");
         });
     </script>
 </div>

But I get nothing, if I call http://devserver/app_dev.php/register from browser I get the HTML. What I'm doing wrong? What is the right way to load HTML content in a container on DOM complete load or page load?

Answer 1

Try this:

I inserted the link the a href tag instead of the script... It will be easier to replace links that way.

HTML:

<div id="myModal" class="reveal-modal" title="El Farol" data-animation="fade">
<a class="close-reveal-modal" href="http://devserver/app_dev.php/register">Page 1</a>

JQuery:

$(document).ready(function(){
  $('a').click(function(e){
     e.preventDefault();
     $("#myModal").load($(this).attr('href'));
  });
});

Answer 2

Your html and JS should be separated like this:

<div id="myModal" class="reveal-modal" title="El Farol" data-animation="fade">
</div>

 <script>
     $(document).ready(function() {
         $('#myModal').load("/app_dev.php/register", function() {
              $('#myModal').append( '<a class="close-reveal-modal">&#215;</a>' );
         });
     });
 </script>