-4

I haven't found anything, so hopefully I can get an answer here?

I'm seeing the following error when loading content on a php page of mine:

TypeError: $(...).load is not a function [Break On This Error]

$(document).load(function() {

So I took a look at my current jQuery settings, including source in Firebug, and confirmed the following:

  • jQuery 1.8.0 is loaded correctly
  • I've added conditional statement before load call to check if jQuery is populated.
  • Library that I am using has loaded
  • alerts before the document load are firing

Here is my code - Is there something not allowed with PHP include files and jQuery?:

<html>
<head> ...... </head>
<body>
    <div id='header'></div>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery.nivo.slider.js"></script>
    <script type="text/javascript">

        $(window).load(function() {
            $('#slider').nivoSlider({
                animSpeed: 500,
                pauseTime: 5000,
                slices:40
            });
        });

    </script>

    <!-- Included file -->
    <div id='container'>
        <div style="height:245px;" id="wrapper">
                <div style="height:245px;" class="slider-wrapper theme-default">
                    <div style="height:245px;" class="nivoSlider" id="slider">
                        <img data-transition="sliceUpDownLeft" alt="" data-thumb="images/toystory.jpg" src="images/toystory.jpg">
                        <img title="This is an example of a caption" data-transition="sliceUpDownLeft" alt="" data-thumb="images/up.jpg" src="images/up.jpg">
                        <img data-transition="sliceUpDownLeft" alt="" data-thumb="images/walle.jpg" src="images/walle.jpg">
                        <img title="#htmlcaption" data-transition="sliceUpDownLeft" alt="" data-thumb="images/nemo.jpg" src="images/nemo.jpg">
                    </div>
                    <div class="nivo-html-caption" id="htmlcaption">
                        <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
                    </div>
                </div>

        </div>
    </div>
    <!-- End included file -->

    <div id='footer'></div>
</body>
</html>
user82302124
  • 1,093
  • 5
  • 28
  • 56
  • Your code does not seem to reflect your statements, where is for example the conditional statement you are talking about? – jeroen Dec 06 '12 at 18:33
  • This is a PHP question without PHP code whatsoever. Where is the PHP in this? – Alexander Dec 06 '12 at 18:35
  • error shows `$(document).load(function(){` when you are using `$(window).load` ? Or is that a typo – wirey00 Dec 06 '12 at 18:36
  • @user82302124 change your jquery inclusion src to h t t p://ajax... See:http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready – AaronSantos Dec 06 '12 at 19:09

3 Answers3

4

PHP doesn't care what goes on clientside - the code that runs on the browser (JavaScript) and your server (PHP) do not interact at all, even when PHP generates a page containing JavaScript.

The only time they intersect is indirectly, when you use PHP to pre-populate JavaScript constants (usually a bad idea) or when the JavaScript uses GET/POST to send data back to a new instance of the script (standard practice.)

So with that discounted, let's look at your page in JSFiddle:

http://jsfiddle.net/Rfh9A/

It works fine there, though I had to point the NivoSlider link at GitHub. So now we have only a few options:

  1. Your actual code is different from what you posted
  2. You're loading this page via AJAX and jQuery is already part of the parent document. This has caused issues for me in the past, particularly when you're loading two different versions of the library. It might work if you change $ to jQuery, in case the library's disabled the shorthand for compatibility.
  3. A JavaScript error in a part of the page not pasted (see answer 1) is preventing jQuery from instantiating.
  4. (Long shot) You've got a DNS problem or something on your local machine preventing the jQuery library from loading on your browser.
Winfield Trail
  • 5,251
  • 2
  • 22
  • 43
  • I tried your http://jsfiddle.net/Rfh9A/,as a local html file. it seems chrome is treating the //ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js include as being a local file. See: http://stackoverflow.com/questions/4831741/can-i-change-all-my-http-links-to-just – AaronSantos Dec 06 '12 at 19:05
  • 1
    That shouldn't impact his document or my suggestion - this is, in fact, the way Google recommends incorporating their CDN's offerings, so it's (generally speaking) likely to work. – Winfield Trail Dec 06 '12 at 19:12
  • He's very likely using the html as a local file(without a server) See Dave Ward's answer at: http://stackoverflow.com/questions/4831741/can-i-change-all-my-http-links-to-just – AaronSantos Dec 06 '12 at 19:17
  • 1
    He's loading it through PHP, which means it's coming through a server. Even if it's local, he isn't using the `file` protocol so that's not relevant. From the answer you linked: "Using a local web server like Apache or IIS to test against http://localhost addresses works fine though." – Winfield Trail Dec 06 '12 at 19:19
  • This is correct. I had an JS error that was causing this not to work. – user82302124 Dec 06 '12 at 20:07
0

Use:

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

window.onload vs $(document).ready()

Edit:

Disregard what I said.

If you are using this in a local html file the jquery inclusion with the // path will be treated as a local file such as file:///ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js, which doesn't exist.

Use:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
Community
  • 1
  • 1
AaronSantos
  • 159
  • 1
  • 7
-1

Try including your javascript files within the <head></head> tags to ensure it's all loaded before your inline script runs.

Felix Guo
  • 2,632
  • 12
  • 20