Home → General →

Javascript not firing

• Edit

Fernando

Feb 11, 2015 @ 10:03 PM

I create an xml file that works as block template. I inserted that file on my configuration set with my page. In this XML file I have a javascript reference the following way "<script src="/files/js/redesign/file-name.js" type="text/javascript"></script>". What this script does it pushes and image to the front of the page and you ex out of it when you are done. Here is a link on how it is suppose to work http://forms.umsl.edu/tours/.

When I put it on a regular cascade page it doesnt show on the live website. I go to the developer tools in google chrome and check the console and it gives me the following error. "Uncaught ReferenceError: $ is not defined". Any thoughts?

Here is the javascript i am using:

$(document).ready(function() {
    setTimeout(function() {
      $('.umsl-day-ad-1').animate({
      opacity: 1
    }, 300, function() {
          $('.umsl-day-banner-1').animate({
     'margin-top': '100px'
}, 400, function() {
$('.umsl-day-ad-1').click(function() {
$('.umsl-day-banner-1').animate({
'margin-top':'-400px'
}, 400, function() {
$('.umsl-day-ad-1').fadeOut();
})
})
});
});
    }, 300)});

1. 1 Posted by Ryan Griffith on Feb 12, 2015 @ 03:53 PM

   

   Hi Fernando,

   I go to the developer tools in google chrome and check the console and it gives me the following error. "Uncaught ReferenceError: $ is not defined". Any thoughts?

   Based on this error, it sounds as though you are not including jQuery on your page, only your script. Try also including jQuery and let me know if that resolves your issue.

   Please let me know if you have any questions.

   Thanks!

   • Edit

2. 2 Posted by Fernando on Feb 13, 2015 @ 05:44 PM

   

   Ryan,

   Thanks again for been so diligent on answering my questions. I believe I have jQuery on it. This is how my XML file looks like:

   “<system-xml>
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
       <script src="/files/js/redesign/umsl-day/umsl-day-banner-ad.js" type="text/javascript"></script>
       <script src="/files/js/redesign/umsl-main-secondary.js" type="text/javascript"></script>
       <script src="/files/js/redesign/bootstrap-secondary.js" type="text/javascript"></script>
       <script src="/files/js/redesign/umsl-day/umsl-day-ad-roll.js" type="text/javascript"></script>
   </system-xml>”

   And this is how my “/files/js/redesign/umsl-day/umsl-day-banner-ad.js” looks like:

   "<script type="text/javascript">
   $(document).ready(function() {
       setTimeout(function() {
         $('.umsl-day-ad-1').animate({
         opacity: 1
       }, 300, function() {
             $('.umsl-day-banner-1').animate({
       'margin-top': '100px'
        }, 400, function() {
      $('.umsl-day-ad-1').click(function() {
        $('.umsl-day-banner-1').animate({
    'margin-top':'-400px'
   }, 400, function() {
      $('.umsl-day-ad-1').fadeOut();
    })
      })
    });
      });
       }, 300)});
   </script>”

   I believe that ajax link on my XML file should be calling the jquery right? Because I tried adding that tag to my umsl-day-banner-ad and it doesn’t really make a difference. What would be the best way to add jquery to my page?

   Thanks again!

   Fernando Sucre
   Web Developer
   Web and Electronic Communications
   314.516.6178

   • Edit

3. 3 Posted by Ryan Griffith on Feb 13, 2015 @ 07:30 PM

   

   Thank you for following up with the additional information, Fernando.

   Curious, is the issue occurring within Cascade, or a page that is accessed via HTTPS? If so, I suspect the issue is the browser may be blocking unsafe scripts from loading. Specifically, take note that you are is pointing to Google's jQuery URL using http:// as opposed to their recommended // or https://. If this is the case, try changing the URL to the following and let me know how it works out:

   //ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
   

   By using the scheme relative URL, you are saying load this using either HTTPS or HTTP, depending on the protocol of the page loading the script.

   Please let me know if you have any questions.

   Thanks!

   • Edit

4. Fernando closed this discussion on Mar 09, 2015 @ 07:23 PM.