Calling JS function from PHP not working

Question

Using a method recommended by a user in a previous question I used just one document (index.php) to show different contents instead of creating one file for each one.

This is the code:

HTML

<a href="index.php">Home</a>
<a href="?id_page=1">More info</a>
<a href="?id_page=2">Contact Us</a>


<div id="index">...index content...</div>
<div id="more_info">...more info content...</div>

JS

$(document).ready(function(){
    function more_info(){
        $('#index').hide();
        $('#more_info').show();
    }
});

PHP

<?php
    if (isset($_GET['id_page'])) {
        $id = $_GET['id_page'];
        if ($id == 1) {
            ?>
            <script>
                more_info();
            </script>
            <?php
        }
    }
?>

That's not working. But if I change <script> more_info(); </script> for:

<script>
    $(document).ready(function(){
        $('#index').hide();
        $('#quienes-somos').show();
    });
</script>

It works. Why is this?

DSlagle · Accepted Answer · 2015-04-02 02:42:21Z

It looks like the problem you are having is because you are defining your more_info function inside of a function. This takes it out of the global scope which will not make that function accessible anywhere except for inside of your document ready function.

//more_info is now available globally
function more_info(){
    $('#index').hide();
    $('#more_info').show();
}

$(document).ready(function(){
    //document ready code here
});

This should make the more_info execute when you output the JS function from PHP. Also it is good to note that since you are not executing the function on ready you will need to make sure the html is available for the JS to modify it. It is normally best practice to put all your JS just before the closing tag. This will ensure your html loads as quickly as possible and your JS will always have access to the HTML you are attempting to edit. With the JS in the head tag you need to make sure your JS is being called at the correct time using:

$(function() {
});

OR

$(document).ready(function() {
});

OR

$(window).load(function() {
});

All of these methods execute at different times during page initialization. With JS in the head tag your browser will need to download all the JS to the client before it can begin to render the HTML which will also add to time between going to the site and actually seeing the site.

Collectives™ on Stack Overflow

Calling JS function from PHP not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related