JQUERY AJAX LOAD Function Error

Question

I loaded a second.php file in first.php using jquery ajax load function

$(".divclass").click(function(){ $("#divid").load('second.php', { id : $(this).attr('id') }); // alert("view Clicked"); });

the second.php loaded second php content in first.php file success.

but second.php contains some jquery function... in second.php

$(document).ready(function(){ alert("second document jquery"); });

this not working... and Back this back javascript also not working when load in first.php but both working when directly calling second.php

what to do

Answer 1

Your second file — which I presume is a fragment of HTML and not a complete document — is not going to get a "ready" event, because you're just modifying the DOM. If you need some embedded Javascript to run, just put it directly in a tag at the end of the fragment:

<div id='stuff'>
  <!-- ... --->
</div>
<script>
  alert("Hi I have just been loaded");
</script>

jQuery will make sure that the Javascript block runs when the fragment is added to the DOM.

Answer 2

The javascript in second.php won't run like that, why don't you just use the success function?

$(".divclass").click(function(){
  $('#divid').load('second.php', { id : $(this).attr('id') }, function() {
    alert('second document jquery');
  });
});

Answer 3

Use $.get instead of load:

$(".divclass").click(function(){
  var elmt_id = $(this).attr('id');
  $.get('second.php',
        { id: elmt_id, nbRandom: Math.random() },
        function(data){
          $("#divid").html(data);
        });
});

Why? Because load will strip out any javascript from loaded page. $.get will put all content from second.php, any js code there will be executed.

I use the code like above in all my project. The page that loaded have jQuery DOM ready block code, and all worked.

In my code above, I add second parameter. The purpose is just to prevent caching in IE. Choose a name that will not be used by second.php.