jQuery .load() html page with javascript inside

Question

i have a problem with loading .html pages (with JavaScript inside) into a div element.

This is my div:

<div class="content"></div>

This is my php:

<?php
  if(!$_POST['page']) die("0");
  $page = (int)$_POST['page'];
  if(file_exists('pages/page_'.$page.'.html'))
    echo file_get_contents('pages/page_'.$page.'.html');
  else echo 'There is no such page!';
?>

This is my script:

var default_content="";
$(document).ready(function(){   
checkURL();
$('ul li a').click(function (e){
        checkURL(this.hash);
}); 
//filling in the default content
default_content = $('.content').html();     
setInterval("checkURL()",250);  
});
var lasturl="";
function checkURL(hash)
{
if(!hash) hash=window.location.hash;    
if(hash != lasturl)
{
    lasturl=hash;       
    // FIX - if we've used the history buttons to return to the homepage,
    // fill the pageContent with the default_content        
    if(hash=="")
    $('.content').html(default_content);        
    else
    loadPage(hash);
}
}

function loadPage(url)
{
url=url.replace('#page','');    
$('.content').css('visibility','visible');  
$.ajax({
    type: "POST",
    url: "load_page.php",
    data: 'page='+url,
    dataType: "html",
    success: function(msg){         
        if(parseInt(msg)!=0)            
        {
            $('.content').html(msg);        
        }
    }       
});
 }

When the page is loaded the JavaScript code inside the .html page isn't executed. If i click on the browser reload button the JavaScript code is executed.

How can i execute the JavaScript inside the pages using jquery?

genesis · Accepted Answer · 2011-08-14 09:52:48Z

4

your script does not make sense

$.ajax({
    type: "POST",
    url: "load_page.php",
    data: 'page='+url,
    dataType: "html",
    success: function(d){
        $('.content').html(d);        
    }       
});

is better and will execute javascrit page loaded from ajax

answered Aug 14, 2011 at 9:52

genesis

51.1k20 gold badges99 silver badges127 bronze badges

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

2 Comments

pimvdb Over a year ago

What's the difference except a variable being renamed?

genesis Over a year ago

@pimvdb: .load to .html and also explained that ajax-loaded content is executed automatically (that javascript is executed automatically)

agf · Accepted Answer · 2011-08-15 03:55:25Z

1

Are the jQuery event handlers binded with live() ?

http://api.jquery.com/live/

If javascript/jquery is attached to the dom after the page has loaded, normal click(), change() events wont be attached/executed.

You need to attach these events using live().

$('#some_element').live('click', function(){});

live() will initialize the event handler whenever an element is attached to the page.

edited Aug 15, 2011 at 3:55

agf

178k45 gold badges300 silver badges241 bronze badges

answered Aug 14, 2011 at 9:54

Matt Ward

1731 gold badge1 silver badge6 bronze badges

Collectives™ on Stack Overflow

jQuery .load() html page with javascript inside

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related