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?

PeterKA · Accepted Answer · 2014-07-03 01:39:10Z

1

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>

answered Jul 3, 2014 at 1:39

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

imbondbaby · Accepted Answer · 2014-07-03 01:39:00Z

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'));
  });
});

answered Jul 3, 2014 at 1:39

imbondbaby

6,4313 gold badges23 silver badges54 bronze badges

Collectives™ on Stack Overflow

Load HTML page inside a DIV using .load and jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related