jQuery work in development environment, but not on test server
I put a jQuery news rotator on my Master page. It works in my workspace, which is in Windows 7 64 bit. I uploaded the entire project to my test server which is MS Server 2008 R2. The project is in Sitefinity 5.4. The rotator works fine in my workspace, but it does not show up at all on the test server.
Using Console on Firebug I get this error:
"TypeError: $(...).fancyNews is not a function http://192.168.156.76/ Line 27"
Here is the head section that the jquery is in. I call it with a simple <div id="fancyNews">.
<
head
id
=
"Head1"
runat
=
"server"
>
<
title
>My Page</
title
>
<!-- Style sheets -->
<
link
href
=
"bootstrap/css/bootstrap.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"css/jquery.fancyNews.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
type
=
"text/javascript"
src
=
"//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"
></
script
>
<
script
src
=
"js/bootstrap.min.js"
></
script
>
<
script
src
=
"js/jquery.fancyNews.min.js"
></
script
>
<
script
type
=
"text/javascript"
>
jQuery(document).ready(function ($)
$('#fancy-news').fancyNews(
feed: 'rss.cnn.com/.../edition.rss', width: 400, height: 95, useLinks: true, slideTime: 3000, previewsPerPage: 2, infiniteLoop: true, backgroundColor: '#E5E6E8', backgroundOverColor: '#E5E6E8', arrows: true
);
);
</
script
>
</
head
>
EDIT: Forgot to mention that I added alert boxes to test the error and the alert box shows if it is outside the ready(function), but does not if it is inside.
The problem was that the fancyNews.min.js was not loading properly on the server for some reason. Solved issue by inserting the javascript from the file into the master page.