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

Pointy · Accepted Answer · 2010-02-02 14:24:01Z

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.

answered Feb 2, 2010 at 14:24

Pointy

415k62 gold badges600 silver badges631 bronze badges

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

2 Comments

udhaya Over a year ago

im doing add, edit, update prog. first i display the list in a table whn i click on a particular name in list it loads the person details in the body content without reloading the page so the second page contains view on particular id(row) then come to edit part when click on edit option in first.php(default list page) it loads d edit php in the body content.. whn clicking update it executes another jquery ajax funtion to post data to update(i.e update.php) my problem is the jquery in edit page to post update not working.. not only the update, any jquery in loaded php is nt working..

Donny Kurnia Over a year ago

AJAX content loaded using $.get and $.post (also $.ajax) will get the "ready" event. load in other hand will strip out any javascript code, so no code from loaded file will be executed. See my answers for the workaround.

fire · Accepted Answer · 2010-02-02 14:24:38Z

0

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

answered Feb 2, 2010 at 14:24

fire

21.5k18 gold badges82 silver badges116 bronze badges

1 Comment

udhaya Over a year ago

there is some dynamic operations in second.php which is loaded in first.php like click on any particular div in second.php

Donny Kurnia · Accepted Answer · 2010-02-03 12:35:13Z

0

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.

answered Feb 3, 2010 at 12:35

Donny Kurnia

5,3135 gold badges38 silver badges53 bronze badges

Collectives™ on Stack Overflow

JQUERY AJAX LOAD Function Error

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related