How to run a function only when loading a div?

Question

I want to run the function only when loading the div.

When I load the page, several files load. At the end of the list, PHP has something in common with a div. When this is displayed, jQuery should run the function.

I can do this with the click event, but I want it to work automatically without clicking a button.

Here's how it works with a click:

$("#PP_end_show").live("click",function(){ $("#PP_head_bar").slideToggle("slow"); $("#PP_info_file_wrap").slideUp("slow"); }); 

This is a div repeated by PHP:

  <?php echo "<div id=\"PP_end_show\"></div>"; ?> 

The output is generated after an AJAX call:

 <form id="PP_search_input" method="post" name="search_ID" ONSubmit="xmlhttpPost('PP_search_stream_client.php', 'PP_search_input', 'PP_thumb_output', '<img src=\'images/wait.gif\'>');return false; "> <input name="search_string" type="text" class="PP_input" id="search_string" value="<?php echo $_POST['search_string']; ?>"/> <button type="submit" class="PP_submit" id="search_submit"> search </button> 

at the end of the generated output, a specific div will be printed and should call a new jQuery function.

Answer 1

Here is how I could solve this problem, assuming I understood it correctly, in which the PP_search_input form submission returns the required html, in which javascript code should then be executed.

 $('#PP_search_input').submit(function() { $.ajax({ url: 'PP_search_stream_client.php', type: 'post', data: $(this).serialize(), success: function(html) { $(html).insertAfter('#whereToInsert') //change to however you want to insert the html .find("#PP_head_bar").slideToggle("slow").end() .find("#PP_info_file_wrap").slideUp("slow"); } }); }); 

Answer 2

Try entering javascript code inside the generated ajax code.

For example, if your ajax is generated from php code

 <?php echo "<div id=\"PP_end_show\"></div>"; ?> 

then try smth like this

 <?php echo "<div id=\"PP_end_show\"></div>"; echo '$(function(){$("#PP_head_bar").slideToggle("slow");'; echo '$("#PP_info_file_wrap").slideUp("slow");});'; ?> 

Answer 3

You can use the livequery plugin

Then you will use it as follows:

 $('#PP_end_show').livequery(function(){ $("#PP_head_bar").slideToggle("slow"); $("#PP_info_file_wrap").slideUp("slow"); }); 

The code in the function will be executed when the element in the selector ( #PP_end_show ) has been added to the DOM

Answer 4

Why not repeat your javascript along with the DIV code?

You can use PHP to echo Javascript as follows:

Following your code:

 <?php echo "<div id=\"PP_end_show\"></div>"; ?> 

Write this:

 echo "<script type='text/javascript'> $('#PP_head_bar').slideToggle('slow'); $('#PP_info_file_wrap').slideUp('slow'); "; echo "</script>"; 

That should work.

Answer 5

In your JS, wrap the code you want to execute in the function. i.e.

 function showInfoBlock() { $("#PP_head_bar").slideToggle("slow"); $("#PP_info_file_wrap").slideUp("slow"); } 

In your PHP, write the JS needed to call this function after writing the PP_end_show div. i.e.

 <?php echo "<div id=\"PP_end_show\"></div><script>$(function() { showInfoBlock(); })();</script>"; ?> 

Answer 6

This does what you ask:

 (function($){ var checkForEndInterval = window.setInterval(function(){ if ($('#PP_end_show').length) { // stop interval window.clearInterval(checkForEndInvertal); // call your code now $("#PP_head_bar").slideToggle("slow"); $("#PP_info_file_wrap").slideUp("slow"); } },200); })(jQuery); 

However, this is not a good idea, because its stupid and what you ask for hints that you do not understand, but that is why you are here. Since you already know when AJAX is called, call it explicitly and attach a success handler to it.

 $.ajax({ /* your other setup code here */ success : function(data) { // run your code } }); 

If you did not do AJAX, as you say, I would put the script tag at the end of your output and ask your code as the easiest approach. You can also use the jQuery.load method (not an event), which by default executes JavaScript from your answer.

Happy coding.

Answer 7

save this jquery function live-click-function as it is

& execute the code below in php

 <?php echo "<div id=\"PP_end_show\"></div>"; echo "$(function(){ $(\"#PP_end_show\").click(); });"; ?> 

Answer 8

Bind a live event to a custom event that the document fires:

 $(document).trigger('echo'); $("#PP_end_show").live("echo", function(){ $("#PP_head_bar").slideToggle("slow"); $("#PP_info_file_wrap").slideUp("slow"); }); 

References

• jQuery API: .trigger ()
• JQuery API: .live ()

Answer 9

  $.ready(function(){ $("#wrapper").add("div").attr('id','PP_end_show'); $("#PP_head_bar").slideToggle("slow"); $("#PP_info_file_wrap").slideUp("slow"); }); <div id='wrapper'> </div> 

Answer 10

Jason Broomwell introduces the correct answer, you can also use the $.when JQuery function.

http://api.jquery.com/jQuery.when/

Answer 11

If the action you want to perform after the required div loads are tied to the click event, just click the button at the end of the ajax request something like this:

 $.ajax({ url:'whatever.php', type:'post', //guessing obviously success: function(data){ $('#PP_end_show').click(); //etc } }); 

These guys are right though, you do it all back helper

Answer 12

Should it be an exact div? It seems to me that you should just execute a function when loading a document. This way you know that all of your items are loaded.

 $(function() { // This function is executed when the DOM is ready, including that last div. // Could be that images are still loading, but your code usually won't depend on that. } 

Answer 13

Try it,

 if(window.isBodyLoaded){ try{ $("#PP_head_bar").slideToggle("slow"); $("#PP_info_file_wrap").slideUp("slow"); }catch(d){ alert(d) } } 

Answer 14

Use the callback function. This is a function that will fire as soon as your event is processed. so for jquery:

 $("#PP_end_show").live("click",function(){ $("#PP_head_bar").slideToggle("slow"); $("#PP_info_file_wrap").slideUp("slow"); }, myCallback()); function myCallback(){ //Do what ever you want to happen after //the div creationin this function } 

And I think that was supposed to do the trick.