How do I run a function only when a div gets loaded? - php

Question

I want to run a function only when a div gets loaded.
When I load the page, a number of files are loaded. At the end of the list, PHP echoes a div. When this one is displayed, jQuery should run a function.
I can do this with a click-event, but I want it to work automatically, without pushing a button.
This is 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 the div echoed 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 the specific div will be printed and should trigger the new jQuery function.

Answer 1

This is how I would tackle this issue, assuming I've understood it correctly in which the submission of the form PP_search_input, returns the html needed, in which then a the javascript code should 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 putting your javascript code inside the generated ajax code.
For example if your ajax is generated from the 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 could use the livequery plugin
You would then 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 would execute when the element in the selector (#PP_end_show) was added to the DOM

Answer 4

Why not echo your javascript along with the DIV code?
You can use PHP to echo Javascript like this:
After 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>";
This should work.

Answer 5

In your JS, wrap the code you want to execute in a function. i.e.
function showInfoBlock() {
$("#PP_head_bar").slideToggle("slow");
$("#PP_info_file_wrap").slideUp("slow");
}
In your PHP, write out the JS needed to call that function after writing out 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 are asking:
(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 silly and what you are asking for hints you not understanding but that is why you are here. Since you already know when your 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 were not doing AJAX as you say, I would put a script tag at the end of your output and have it call your code as the simplest approach. Even still, you could use the jQuery.load method (not event) which by default executes JavaScript from your response.
Happy coding.

Answer 7

keep that jquery live-click-function as it is
& run the below code in php
<?php
echo "<div id=\"PP_end_show\"></div>";
echo "$(function(){ $(\"#PP_end_show\").click(); });";
?>

Answer 8

$.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 9

Bind the live event to a custom event that is triggered by the document:
$(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 10

Jason Brumwell enter right answer, also you can use the $.when function of JQuery.
http://api.jquery.com/jQuery.when/

Answer 11

If the action you want to perform once the desired div loads is bound to a click event, simply trigger click at the end of the ajax request something like:
$.ajax({
url:'whatever.php',
type:'post', //guessing obviously
success: function(data){
$('#PP_end_show').click(); //etc
}
});
These guys are right though, you are doing this all backwards mate

Answer 12

Does it have to be that exact div? It seems to me that you should just execute the function on load of the document. That way you know all your elements 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 this,
if(window.isBodyLoaded){
try{
$("#PP_head_bar").slideToggle("slow");
$("#PP_info_file_wrap").slideUp("slow");
}catch(d){
alert(d)
}
}

Answer 14

Use a callback function.
Its a function that will be triggered as soon as your event is handled.
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 should do the trick