We Keep Coding

What is the correct sequence of including jquery files?

Today i wanted to add datepicker() to my page.So I downloaded jqueryui and added then in the sequence below.
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/superfish.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/retina.min.js"></script>
<script src="assets/validate.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script src="js/functions.js"></script>
<script src="js/wizard_func.js"></script>
<script src="check_radio/jquery.icheck.js"></script>
<script type="text/javascript" src="js/navi_artstyle.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/mapmarker.jquery.js"></script>
<script type="text/javascript" src="js/mapmarker_func.jquery.js"></script>
It didn't work. It took me whole day to figure out what is wrong. it was the SEQUENCE of js files included!!! To work my code i had to include them like bellow.("jquery.js" position had to change)
<script src="js/superfish.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/retina.min.js"></script>
<script src="assets/validate.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script src="js/functions.js"></script>
<script src="js/wizard_func.js"></script>
<script src="check_radio/jquery.icheck.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/navi_artstyle.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/mapmarker.jquery.js"></script>
<script type="text/javascript" src="js/mapmarker_func.jquery.js"></script>
Can some one explain this please. Please give me a Source so I wont make this mistake again.

Normal jQuery (core)
jQuery migrate if you have
jQuery UI
jQuery mobile
Scripts that need jQuery / scripts that are jQuery plugins
Other scripts like bootstrap
You own scripts depending which is needed first

First you have to include normal jQuery library.After that You have to include other jquery library like jquery ui and jquery mobile and all finally you have to include your own javascript files.

As mentioned in comments you have to mention the scripts in the order you use that.
Simply anything used Jquery will goes after jQuery, anything that depends on jQuery UI goes after jQuery UI etc.

TypeError: $(...).visualize is not a function

I include a javascript file that displays a chart and I get this message : TypeError: $(...).visualize is not a function
I tried with jQuery().visualize and this is the same thing.
Here is my code :
<script type="text/javascript">
$(function () {
$('table').visualize({ type: 'line' }).appendTo('body');
});
</script>
Libraries :
<script language="javascript" type="text/javascript" src="Scripts/jquery.visualize.plugin.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
I'm new in javascript, I don't understand.

The problem is you include visualize library before you include jQuery. Swap the includes in places as follows:
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/jquery.visualize.plugin.js"></script>

Change the order of your including - JQuery must be added first.
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/jquery.visualize.plugin.js"></script>

You need to include the jquery.visualize.plugin.js AFTER jQuery. It's dependent.
You can also remove the language="javascript".
Like this:
<script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.visualize.plugin.js"></script>

Jquery clash because of -jquery-1.10.2.min.js

My Menu does not seem to function properly on photogallery page :-http://www.vancha.in/Photogallery.aspx
However its seems to function on the home page.
If I remove jquery-1.10.2.min.js file on photogallery page ,then it functions properly.
I'm using lightbox script.
There is some clash that's happening.
Please Help !
Regards,
Vancha
I have tried something like this since now I'm using pretty Photo:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var $jq161 = jQuery.noConflict();
</script>
<script type="text/javascript">
$jq161(document).ready(function () {
$("a[rel^='prettyPhoto']").prettyPhoto();});
</script>
Its still not working :(

try something like this,Use the library you required
<script type="text/javascript" src="jquery1.4.2.js"></script>
<script type="text/javascript">
var jq_4 = jQuery.noConflict();
jq_4(function () {
jq_4('#gallery a').lightBox({ fixedNavigation: true });
})
</script>
http://interface88.blogspot.in/2012/07/using-multiple-version-of-jquery-on.html
http://api.jquery.com/jQuery.noConflict/

I can see that Jquery is referenced multiple times on this URL
http://www.vancha.in/Photogallery.aspx
You may need to fix that.

How to overcome with conflicting jQuery files

I have two jQuery files.
One is for calling datepicker and the other is for calling highchart files.
When I am trying to include both files, my highchart is working and datepicker is not working.
Here is the source code - code for datepicker:
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery.ui.datepicker-cc.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/calendar.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery.ui.datepicker-cc-ar.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery.ui.datepicker-cc-fa.js"></script>
Code for hichchart is:
<script src="<?=base_url()?>js/jquery-1.9.1.js"></script>
<script src="<?=base_url()?>js/highcharts.js"></script>
<script src="<?=base_url()?>js/exporting.js"></script>
I have also tried to put the jQuery noconflict to any where of my code I got no result
<script type="text/javascript">$.noConflict();</script>
Any help will be appreciated.

Try to use only the jquery's and jquery ui's newer version,
<script src="<?=base_url()?>js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery.ui.datepicker-cc.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/calendar.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery.ui.datepicker-cc-ar.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery.ui.datepicker-cc-fa.js"></script>
<script src="<?=base_url()?>js/highcharts.js"></script>
<script src="<?=base_url()?>js/exporting.js"></script>

try something like this
<script src="<?=base_url()?>js/jquery-1.9.1.js"></script>
<script type="text/javascript">
var jq = jQuery.noConflict( true );
//use jq for highchart
</script>

First call jquery
<script src="<?=base_url()?>js/jquery-1.9.1.js"></script>
and Use following code after calling jquery
<script type="text/javascript">
var jqobj = jQuery.noConflict( true );
</script>

jQuery / Javascript Conflicts

I am fairly new to web developing, but I believe I have a conflict with my jQuery / javascripts (am not entirely sure which one). My site has a drop-down menu and an image selector. When both scripts are in there together they will not work. Whichever one comes first, is overide by the latter. I believe the 2 scripts that are actually causing the problem are "js/jquery-1.js" and "js/global-perf-minified.js" but here are all the scripts being used within my page:
<script src="js/jquery-1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/product.js" type="text/javascript"></script>
<script src="js/searchsuggest.js" type="text/javascript"></script>
<script src="js/full.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery_004.js"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/easing.js" type="text/javascript"></script>
<script src="js/slider.js" type="text/javascript"></script>
<link href="css/colorbox.css" type="text/css" rel="stylesheet">
<script src="js/jquery_007.js" type="text/javascript"></script>
<link href="js/cloud-zoom.css" type="text/css" rel="stylesheet">
<script src="js/cloud-zoom.js" type="text/javascript"></script>
<script type="text/javascript" src="js/utag_008.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script src="js/global-perf-minified.js" type="text/javascript"> </script>
<script type="text/javascript" src="js/product-minified.js"></script>
I saw some posts about adding a '.noconflict()' style but didn't seem to have much luck. I am willing to accept that I could just be inserting it wrong / picking up the wrong code for this. Any help is greatly appreciated! Thank you.

Possible duplicates:
<script src="js/jquery-1.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery_004.js"></script>
<script type="text/javascript" src="js/jquery_004.js"></script>
Declaring jquery many times....better check those and see if they are duplicates ;)
-----------------EDIT---------------------------
Now your code should looks like, with just one jquery:
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/product.js" type="text/javascript"></script>
<script src="js/searchsuggest.js" type="text/javascript"></script>
<script src="js/full.js" type="text/javascript"></script>
<script src="js/easing.js" type="text/javascript"></script>
<script src="js/slider.js" type="text/javascript"></script>
<link href="css/colorbox.css" type="text/css" rel="stylesheet">
<link href="js/cloud-zoom.css" type="text/css" rel="stylesheet">
<script src="js/cloud-zoom.js" type="text/javascript"></script>
<script type="text/javascript" src="js/utag_008.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script src="js/global-perf-minified.js" type="text/javascript"> </script>
<script type="text/javascript" src="js/product-minified.js"></script>
If you keep with problems then try putting just, two or three js, like this:
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
If works with this two, then adding the others until you find the one that is creating bugs or problems(conflicts) with the rest of your js ;)
Saludos.