CODEWITHSUNDEEP
javascriptjqueryhtml
Andrew Butler
Andrew Butler

Reputation: 1060

How to call JQuery functions after page is loaded?

I have a page that has a button. When the button is pressed an AJAX call is made and then the html from that call replaces a div container I have on the main page. I have scripts that need to be loaded on the second page. So my concern is that when the scripts from the second page are running, it gives me a " Object # has no method 'find' " error in the console. Which I know that this is an issue of the script not being able to call the JQuery functions. Does anyone know how I can call the JQuery functions after a second page is generated? Here is an example as to what my page does:

MAIN PAGE: 

<html>
<head>
<script type="text/javascript">
$(document).ready({
    $('body').on('click', '.button', function() {
        $.ajax({
            type: 'GET',
            url: 'page.php'
            data { ... },
            success: function(e){
                $('#container').html(e);
            }
        });
    });
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<button class="button" value="Click me!"></button>
<div id="container">
</div>
</body>
</html>

PAGE.PHP:

echo '<div id="dropbox">';
echo '  <div class="message">Drop files here</i></div>';
echo '</div>';
echo '<script src="js/filedrop.js"></script>';
echo '<script src="js/upload.js"></script>';

And then when the scripts are executed from the second page I get the < Object # has no method 'find' > error. If I include the scripts on the main page, nothing works in the scripts. Anyone know where to point me in the right direction for all of this to work?

EDIT **

Sorry to confuse you guys. The code I put was just something that I had put together real quick. The button click code would be in the document.ready, but the other functions that are called from the second scripts are not in a document.ready. Do they need to be in a document.ready callback for them to recognize the JQuery functions?

EDIT 2 **

Thanks for clarifying that you can have more than one Document.Readys. I will be selecting the answers after the 10 minute window is up.

Upvotes: 0

Views: 7847

Answers (2)

khex
khex

Reputation: 2828

put your code inside

$(document).ready(function() {
  // your code  
  $('body').on('click', '.button', function() {
     $.ajax({
        type: 'GET',
        url: 'page.php'
        data { ... },
        success: function(e){
            $('#container').html(e);
        }
    });
  });
});

document.ready means that page are loaded or create your file myscript.js, in that file wrap all your code in document.ready and 

echo '<script src="js/myscript.js"></script>';

Upvotes: 1

Blender
Blender

Reputation: 298176

Your script tags are in the wrong order. You have to load jQuery before you use it. Also, put all code that interacts with the DOM in a $(document).ready() callback:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('body').on('click', '.button', function() {
            $.ajax({
                type: 'GET',
                url: 'page.php'
                data { ... },
                success: function(e){
                    $('#container').html(e);
                }
            });
        });
    });
</script>

Upvotes: 4

Related Questions