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>
Related
I am using a call to smoothscroll.init() which looks like this:
new WOW().init();
//smoothScroll
smoothScroll.init();
But I am getting the following error:
Uncaught ReferenceError: smoothScroll is not defined
at main.js:136
at main (main.js:140)
at main.js:144
Could anyone help me figure out why?
These are my javascript libraries:
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/SmoothScroll.js"></script>
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/jquery.isotope.js"></script>
<script type="text/javascript" src="js/jqBootstrapValidation.js"></script>
<script type="text/javascript" src="js/contact_me.js"></script>
<script type="text/javascript" src="js/owl.carousel.js"></script>
First add this to your project:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Second: make sure your path to smoothscroll is correct.
Third: identify each of your html you want to use smoothscroll on with the class class="smoothScroll".
Fourth: the smoothscroll you are using now isn't editable in another javascript directory, it's only used for inside your html, as it already uses the smoothscroll.
EDIT:
If you want to use your own smoothscroll, I'd recommend you to look at this.
Maybe I am careless with sequencing the jquery plugins but I found it perplexing why is that the jquery plugin is not working when the source file is coming from local but when I try to use the cdn source it is working fine.
Here's the JS Plugin Structure [Non-working one]
<script src="./plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script src="./plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="http://www.fuelcdn.com/fuelux/3.13.0/js/fuelux.min.js"></script>
<script src="./plugins/datatables/dataTables.bootstrap.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="./plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="./plugins/fastclick/fastclick.js"></script>
<script src="./dist/js/app.min.js"></script>
<script src="./dist/js/demo.js"></script>
<script src="./plugins/fullcalendar/fullcalendar.min.js"></script>
When I try to use the datetimepicker it return a "Uncaught TypeError. datetimepicker is not a function".
When I use the cdn source file instead it works
<script src="./plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="http://www.fuelcdn.com/fuelux/3.13.0/js/fuelux.min.js"></script>
<script src="./plugins/datatables/dataTables.bootstrap.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="./plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="./plugins/fastclick/fastclick.js"></script>
<script src="./dist/js/app.min.js"></script>
<script src="./dist/js/demo.js"></script>
<script src="./plugins/fullcalendar/fullcalendar.min.js"></script>
I have this script installed on my website:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: 'en-US'}
</script>
When I try to add another element with following script, it refuses to show up any responce -
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).load(function() {
$('.flexslider').flexslider({
});
});
});
</script>
What could be the issue and how to resolve that?
You can do without the window.load event.
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.flexslider').flexslider({});
});
</script>
remove the below script
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script>
you have already loaded the jquery using below line
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>
Please check on browser console, you should see some error or more information on error.
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.
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>