I added jquery and other js files into assets/js, they appear correctly on layout.js but i keep getting this msg 'Uncaught ReferenceError: $ is not defined', on page source code i can see that the js scripts are added but for some reason i cant use them, the only way to make it work properly is to manually add the scripts into every view.
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/1jquery-3.2.1.js"></script>
<script src="/js/2popper.min.js"></script>
<script src="/js/3jquery-ui.js"></script>
<script src="/js/bootstrap-datepicker.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/jquery.validate.js"></script>
<script src="/js/jsgrid.js"></script>
<!--SCRIPTS END-->
Related
I need to use two different versions of jQuery on my website. Because i need to use one plugin that is using different version of jQuery than my site. I tried to use noConflict and i even made that plugin to work, but my site didnt work properly. Any idea?
<script src="comment/frontend/view/default/javascript/jquery.min.js">
</script>
<script src="comment/frontend/view/default/javascript/jquery-ui/jquery-
ui.min.js"></script>
<script src="comment/3rdparty/read_more/read_more.js"></script>
<script src="comment/3rdparty/filer/filer.js"></script>
<script src="comment/3rdparty/timeago/timeago.js"></script>
<script src="comment/frontend/view/default/javascript/common.js"></script>
<script src="comment/3rdparty/colorbox/jquery.colorbox-min.js"></script>
<script src="comment/3rdparty/highlight/highlight.pack.js"></script>
These last two are using $
<script src="js/core.min.js"></script>
<script src="js/script.js"></script>
I have those scripts loading for a grid in wordpress..
<script src="/wp-includes/js/masonry.pkgd.min.js"></script>
<script src="/wp-includes/js/colorfinder-1.1.js"></script>
<script src="/wp-includes/js/imagesloaded.pkgd.min.js"</script>
<script src="/wp-includes/js/classie.js"></script>
<script src="/wp-includes/js/gridScrollFx.js"></script>
<script>new GridScrollFx( document.getElementById( 'grid' ), { viewportFactor : 0.4 } );</script>
And.. They work fine on a simple HTML page, but if I move everything to wordpress I get an error; "Uncaught ReferenceError: classie is not defined"
So I suppose that is because it hasn't loaded classie.js before moving on to gridscrollfx, but why if it's before it? It works on html but no on wordpress.
Btw, I tried moving it up and down but it just doesn't work, comes up with similar errors.
You have not completed the closing tag in one script tag:
<script src="/wp-includes/js/masonry.pkgd.min.js"></script>
<script src="/wp-includes/js/colorfinder-1.1.js"></script>
<script src="/wp-includes/js/imagesloaded.pkgd.min.js"></script> <!-- Close script tag here after quotes -->
<script src="/wp-includes/js/classie.js"></script>
<script src="/wp-includes/js/gridScrollFx.js"></script>
I am using materializecss to do my design together with Angular. At a certain part, I will need to use (Angular-ui-sortable) for me to be able to be able to sort my list which included jquery-ui. JQuery-UI needs to be included below JQuery and Angular-ui-sortable and it need's JQuery to be before AngularJS. By doing so, the sortable area works while materializecss' initialization of Tab after angular's content is loaded is not working. For the Tab to work, Jquery materialize css needs to be after angular's include. In this case the sortable wise will not work.
Tab works here with error (ui.sortable: jQuery should be included before AngularJS!):
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="libs/angular-resource/angular-resource.min.js"></script>
<script src="libs/angular-ui-sortable/sortable.min.js"></script>
<script src="libs/jquery/dist/jquery.min.js"></script> <---------------------
<script src="libs/jquery-ui/jquery-ui.min.js"></script>
<script src="libs/materialize/dist/js/materialize.min.js"></script>
Sort works here with error (TypeError: Cannot read property 'hash' of undefined):
<script src="libs/jquery/dist/jquery.min.js"></script> <---------------------
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="libs/angular-resource/angular-resource.min.js"></script>
<script src="libs/angular-ui-sortable/sortable.min.js"></script>
<script src="libs/jquery-ui/jquery-ui.min.js"></script>
<script src="libs/materialize/dist/js/materialize.min.js"></script>
Controller for Tab:
function HomeController() {
$(document).ready(function () {
$('ul.tabs').tabs();
});
}
What have I done wrong here?
I am simply trying to show 3 diagrams, nothing more. The problem I am encountering is that the whole page turns white when I include the javascript files that belongs to the diagram number 2 and 3. How can I prevent this conflict, any ideas?
Error code I receive in console:
uncaught exception: Highcharts error #16:
www.highcharts.com/errors/16
SyntaxError: expected expression, got '<'
ExhaustTemperature.js $(...).highcharts is not a function
Here is the library for diagram 1.
<script src="highcharts.js"></script>
<script src="highcharts-more.js"></script>
Here is the library for diagram 2 and 3.
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
Then the funny part... The whole page turns white when I include these two javascript files.
<script src="diagram2.js"></script>
<script src="diagram3.js"></script>
This is what it looks like in index.html file.
<script src="highcharts.js"></script>
<script src="highcharts-more.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="diagram2.js"></script>
<script src="diagram3.js"></script>
I have a designed a website and included some java scripts, they run perfectly locally but on uploading to the server, nothing works!! I tried changing the reference to the pages to //http: but still...nothing. I've tried testing on the server with a simple alert text box,it works. I don't understand why the other .js scripts aren't working. please Help.
<script type="text/javascript">
var shutterSettings = {"msgLoading":"L O A D I N G","msgClose":"Click to Close","imageCount":"1"};
</script>
<script src='http://www.broadigital.co.ke/style/newcss/js/shutter-reloaded.js?ver=1.3.3' type='text/javascript' ></script>
<script src='http://www.broadigital.co.ke/style/newcss/js/jquery.js?ver=1.7.2' type='text/javascript' ></script>
<script src='http://www.broadigital.co.ke/style/newcss/js/jquery.cycle.all.min.js?ver=2.9995' type='text/javascript' ></script>
<script src='http://www.broadigital.co.ke/style/newcss/js/ngg.slideshow.min.js?ver=1.06' type='text/javascript' ></script>
<script src='http://www.broadigital.co.ke/style/newcss/js/jquery.flexslider-min.js?ver=3.4.2' type='text/javascript' ></script>
Uncaught SyntaxError: Unexpected end of input jquery.js:6
Uncaught ReferenceError: jQuery is not defined
Check if you uploaded jQuery correctly. The file might have been truncated in the process.
UPDATE
Checking your jQuery file, the file truncates on line 6 with these as the last few characters.
if(this[0]){var b=f(a,this[0].owne
SOLUTION
Re-upload the jQuery file (jquery.js) again, or
Use jQuery CDN:
Change:
<script src='http://www.broadigital.co.ke/style/newcss/js/jquery.js?ver=1.7.2' type='text/javascript'></script>
To:
<script src='http://code.jquery.com/jquery-1.7.2.min.js' type='text/javascript'></script>