Run php script on Jquery document ready

Question

I would like to know if is there a way to load a part of script only when the document is ready, i mean when all css, js, and images are downloaded Run the php script that is a bit heavy.

in php i know that can be use an if else but on jquery ?

can be: ?

        <script>
        jQuery( document ).ready(function( $ ) {
        </script>
        <?php
         $script = $this->getAllItems();
        ?>
        <script>
        });
          </script>



    <div class="page">
            <?php echo $this->getChildHtml('header'); ?>
            <div class="main-container col2-left-layout">
                <div class="main container_16 clearfix">
                    <div class="col-main grid_16">
                        <?php echo $this->getChildHtml('top_callout'); ?>
                    </div>
                    <div class="col-main grid_16">
                        <?php echo $this->getChildHtml('breadcrumbs'); ?>
                    </div>
                    <div class="col-main grid_12">
                        <?php echo $this->getChildHtml('global_messages'); ?>


on document ready call content
                        <?php echo $this->getChildHtml('content'); ?>



                    </div>
                    <div class="col-left sidebar grid_4"><?php echo $this->getChildHtml('left'); ?></div>
                </div>
            </div>
            <?php echo $this->getChildHtml('footer'); ?>
            <?php echo $this->getChildHtml('before_body_end'); ?>
        </div>

Any help is appreciated !

Answer 1

I think there is a language confusion. PHP is a server-side language. It has already run and completed by the time the raw source touches your browser. JavaScript on the other hand is client-side parsed and rendered in the browser.

If you need to run a PHP script after a page loads, you'll need to make use of AJAX. You'll have to do something like the following:

$(window).load(function () {
    $.ajax({
        url: "some-php-script.php",
        data: { ... } // data to send to php if applicable,
        ... // other options that may be needed
        success: function (res) {
            ... // handle successful return of data (if applicable)
        }
        error: function (res) {
            ... // handle error if appropriate
        }
    });
});

Reference: .ajax()

EDIT:

Suggested by user3553931

Since you're wanting to wait for all stylesheets, scripts and images to load, I've updated my answer to use the load event instead of DOMContentLoaded (the event behind $(document).ready ).

Per the MDN documentation below, it seems that the load event will fulfill your question requirements better than the DOMContentLoaded event.

Reference: DOMContentLoaded

Excerpt:

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).

Answer 2

You'll have to do this via ajax. By the time your document.ready runs the PHP is long gone. PHP is executed on the server side and JS is executed on the client side. Try doing something like this:

<script>
(function($) {
    $.ajax({
        type: "POST",
        url: 'index.php',
        data: { }, //send data if needed
        success:function(){
            alert("Success!");
        }
    });
</script>

Where url is the path to your php script. You can even return something in that php file and do something with it in the success handler of the ajax call.

For more info on AJAX see here: .ajax()