CODEWITHSUNDEEP
phpjavascriptjquery
Joost
Joost

Reputation: 418

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

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.

Upvotes: 6

Views: 5290

Answers (14)

Paul Sweatte
Paul Sweatte

Reputation: 24637

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

Upvotes: 2

Avinash
Avinash

Reputation: 801

Try this,

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

Upvotes: 0

Umut
Umut

Reputation: 66

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

Upvotes: 1

chenio
chenio

Reputation: 592

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

Upvotes: 2

Avisek Chakraborty
Avisek Chakraborty

Reputation: 8309

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(); });"; 
?>

Upvotes: 2

ssdesign
ssdesign

Reputation: 2821

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.

Upvotes: 4

alex
alex

Reputation: 580

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

Upvotes: 5

Ali Youhanaei
Ali Youhanaei

Reputation: 384

Jason Brumwell enter right answer, also you can use the $.when function of JQuery.

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

Upvotes: 1

King Friday
King Friday

Reputation: 26106

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.

Upvotes: 3

Jason Brumwell
Jason Brumwell

Reputation: 3550

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

Upvotes: 10

techfoobar
techfoobar

Reputation: 66693

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>"; ?>

Upvotes: 3

Manse
Manse

Reputation: 38147

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

Upvotes: 4

Teun Pronk
Teun Pronk

Reputation: 1397

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

Upvotes: -4

GolezTrol
GolezTrol

Reputation: 116190

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.
}

Upvotes: 0

Related Questions