Jquery conflict issue

Jquery conflict issue - javascript

I am using many js file in my header file as shown below
<script src="{$BASE_URL}js/jquery.form.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/cmxforms.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery.metadata.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery.validate.min.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/functions.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery-1.10.1.min.js" type="text/javascript"> </script>
<script type="text/javascript" src="{$BASE_URL}js/jquery-ui.min.js" > </script>
<script type="text/javascript" src="{$BASE_URL}js/timepicker/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="{$BASE_URL}js/jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="{$BASE_URL}js/jspatch.js"></script>
<script src="{$BASE_URL}js/script.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript">
I am getting error as below.
$(...).live is not a function in
$("#reset").live('click',function(){
findproject (line 925)
SyntaxError: syntax error
<script type="text/javascript">//<![CDATA
$(...).validate is not a function
So, what the issue. I am not getting exact way. validation functality is not working

You need to put core jquery lib at the top as this is required to resolve dependencies of other jquery library-
<!-- This must be first library to inlcude-->
<script src="{$BASE_URL}js/jquery-1.10.1.min.js" type="text/javascript"> </script>
<script src="{$BASE_URL}js/jquery.form.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/cmxforms.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery.metadata.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery.validate.min.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/functions.js" type="text/javascript"></script>
<script type="text/javascript" src="{$BASE_URL}js/jquery-ui.min.js" > </script>
<script type="text/javascript" src="{$BASE_URL}js/timepicker/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="{$BASE_URL}js/jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="{$BASE_URL}js/jspatch.js"></script>
<script src="{$BASE_URL}js/script.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript">
Also .live() is not available with this version, you should use .on()

Instead of using .live() use .on() because .live() is deprecated since Jquery 1.7 and removed after Jquery 1.9+ versions and try reordering your Jquery file as shown :-
<!-- This must be first library to inlcude-->
<script src="{$BASE_URL}js/jquery-1.10.1.min.js" type="text/javascript"> </script>
<script src="{$BASE_URL}js/jquery.form.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/cmxforms.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery.metadata.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery.validate.min.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/functions.js" type="text/javascript"></script>
<script type="text/javascript" src="{$BASE_URL}js/jquery-ui.min.js" > </script>
<script type="text/javascript" src="{$BASE_URL}js/timepicker/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="{$BASE_URL}js/jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="{$BASE_URL}js/jspatch.js"></script>
<script src="{$BASE_URL}js/script.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

Use on instead of live:
$("#reset").on('click', function () {
// ...
});

Firstly, you need to include jquery.js first in the page, as other script will rely on it:
<script src="{$BASE_URL}js/jquery-1.10.1.min.js" type="text/javascript"></script> <!-- < First -->
<script src="{$BASE_URL}js/jquery.form.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/cmxforms.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery.metadata.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery.validate.min.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/functions.js" type="text/javascript"></script>
Secondly, live has been removed from the latest versions of jQuery. You need to use the delegated version of on() instead.

Related

Fixing my scroll to a smooth scroll on your webpage

I am trying to make the navigation smooth scroll to their approiate section of the page. Right now my navigation goes to the section of the page I want it too, but it doesn't smooth scroll.
I have included the smoothscroll.js in the js folder and called it in my html through this script:
<script type="text/javascript" src="js/smoothscroll.js">
I have added these scripts to the end of the body tag after the end of my wrapper
<script type="text/javascript" src="js/_jq.js">
</script>
<script type="text/javascript" src="js/_jquery.placeholder.js">
</script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
Not sure why it is not smooth scroll and why it is not keeping the navigation bar as I scroll up n down. I also added anchor points above the container containing the about us and contact section.
seen here:
<a href="#aboutus" class="smoothScroll">
<span class="label-nav">
About Us
</span>
</a>
Any advice? Thanks!
extra scripts:
<script src="js/activeaxon_menu.js" type="text/javascript"></script>
<script src="js/animationEnigne.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/easypiecharts.js" type="text/javascript"></script>
<script src="js/ie-fixes.js" type="text/javascript"></script>
<script src="js/jquery.base64.js" type="text/javascript"></script>
<script src="js/jquery.carouFredSel-6.2.1-packed.js" type="text/javascript"> </script>
<script src="js/jquery.cycle.js" type="text/javascript"></script>
<script src="js/jquery.cycle2.carousel.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.easytabs.js" type="text/javascript"></script>
<script src="js/jquery.eislideshow.js" type="text/javascript"></script>
<script src="js/jquery.flexslider.js" type="text/javascript"></script>
<script src="js/jquery.infinitescroll.js" type="text/javascript"></script>
<script src="js/jquery.isotope.js" type="text/javascript"></script>
<script src="js/jquery.parallax-1.1.3.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="js/jQuery.scrollPoint.js" type="text/javascript"></script>
<script src="js/jquery.themepunch.plugins.min.js" type="text/javascript"></script>
<script src="js/jquery.themepunch.revolution.js" type="text/javascript"></script>
<script src="js/jquery.tipsy.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jQuery.XDomainRequest.js" type="text/javascript"></script>
<script src="js/retina.js" type="text/javascript"></script>
<script src="js/timeago.js" type="text/javascript"></script>
<script src="js/tweetable.jquery.js" type="text/javascript"></script>
<script src="js/zeina.js" type="text/javascript"></script>
<script type="text/javascript" src="js/smoothscroll.js"></script>
</body>
</html>

simple midi.js Player example

I have been looking all over, but I can not seem to find a simple Player example for midi.js http://mudcu.be/midi-js/ .
The Player example is so complex I cannot get it to work in my page....What am I missing?
<script src="./js/MIDI/AudioDetect.js" type="text/javascript"></script>
<script src="./js/MIDI/LoadPlugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Plugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Player.js" type="text/javascript"></script>
<script src="./js/Window/DOMLoader.XMLHttp.js" type="text/javascript"></script>
<!-- extras -->
<script src="./inc/Base64.js" type="text/javascript"></script>
<script src="./inc/base64binary.js" type="text/javascript"></script>
<script type="text/javascript">
MIDI.Player.loadFile("start.mid",MIDI.Player.start);
MIDI.Player.start();
</script>

You missed some imports. For a midi player, you should use the script tags from the demo-MIDIPlayer.html file.
<script src="./js/MIDI/AudioDetect.js" type="text/javascript"></script>
<script src="./js/MIDI/LoadPlugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Plugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Player.js" type="text/javascript"></script>
<script src="./js/Widgets/Loader.js" type="text/javascript"></script>
<script src="./js/Window/Event.js" type="text/javascript"></script>
<script src="./js/Window/DOMLoader.XMLHttp.js" type="text/javascript"></script>
<!-- jasmid package -->
<script src="./inc/jasmid/stream.js"></script>
<script src="./inc/jasmid/midifile.js"></script>
<script src="./inc/jasmid/replayer.js"></script>
<!-- extras -->
<script src="./inc/Base64.js" type="text/javascript"></script>
<script src="./inc/base64binary.js" type="text/javascript"></script>
Also, you need to load the plugin, before you can start playing a file.
window.onload = function () {
MIDI.loadPlugin({
callback: function() {
MIDI.Player.loadFile("start.mid", MIDI.Player.start);
}
});
}

Packing all CSS/JS links into an included PHP file?

After years of using spaghetti code to write my PHP projects, I have opted to switch over to using Code Igniter just to get some experience with a MVC Framework (Yeah, I know its dying but Laravel/Composer blew brain).
I have a site theme I purchased years back and decided to use it while experimenting with creating Views. The particular theme has a massive amount of JS links though due to not being optimized but rather just showing all features.
Is there any issues with just placing all of the Header content into a PHP file and then including it into the the actual View file?
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/plugins/spinner/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/plugins/charts/excanvas.min.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.orderBars.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.pie.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.resize.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.sparkline.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/uniform.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.cleditor.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.validationEngine.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.autosize.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.maskedinput.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.dualListBox.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.inputlimiter.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/chosen.jquery.min.js"></script>
<script type="text/javascript" src="js/plugins/wizard/jquery.form.js"></script>
<script type="text/javascript" src="js/plugins/wizard/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/plugins/wizard/jquery.form.wizard.js"></script>
<script type="text/javascript" src="js/plugins/uploader/plupload.js"></script>
<script type="text/javascript" src="js/plugins/uploader/plupload.html5.js"></script>
<script type="text/javascript" src="js/plugins/uploader/plupload.html4.js"></script>
<script type="text/javascript" src="js/plugins/uploader/jquery.plupload.queue.js"></script>
<script type="text/javascript" src="js/plugins/tables/datatable.js"></script>
<script type="text/javascript" src="js/plugins/tables/tablesort.min.js"></script>
<script type="text/javascript" src="js/plugins/tables/resizable.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.tipsy.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.collapsible.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.progress.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.timeentry.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.colorpicker.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.jgrowl.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.breadcrumbs.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.sourcerer.js"></script>
<script type="text/javascript" src="js/plugins/jquery.fullcalendar.js"></script>
<script type="text/javascript" src="js/plugins/jquery.elfinder.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="js/charts/chart.js"></script>

This is possible for your local files. Of course you need two php files - one for your css and one for your JS.
Here is an example
<?PHP
header("content-type: application/javascript");
$all_your_js_ressources = array(
'libs/foo.js',
'libs/bar.js',
'modules/foo.module.js',
'modules/bar.module.js',
'plugins/foo.plugin.js',
'plugins/bar.plugin.js',
'main.js'
);
foreach ($all_your_js_ressources as $filename) {
readfile( $filename );echo "\r\n";
}
?>

Issue including elFinder and JQuery UI

I'm trying to setup an elFinder window on my website. So I downloaded the latest release of from GitHub and followed it's instructions.
I included every file they asked for:
<!-- elFinder -->
<script type="text/javascript" src="../includes/elfinder/js/elfinder.min.js"></script>
<script type="text/javascript" src="../includes/elfinder/js/i18n/elfinder.nl.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.selectable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.slider.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.dialog.js"></script>
And I include this into my head-section as well:
<script type="text/javascript">
$().ready(function() {
var elf = $('#elfinder').elfinder({
lang: 'nl', // language (OPTIONAL)
url : '../includes/elfinder/php/connector.php' // connector URL (REQUIRED)
}).elfinder('instance');
});
</script>
But for some reason, all I get is this image:
But those files are, obviously, included... So I'm wondering what I'm doing wrong since I can't get my finger on the issue...

Why don't you combine the jQuery UI files into one?
Yes the order of includes does matter.
Here a working demo.
Here is the code
HTML
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://elfinder.org/demo/css/elfinder.min.css" />
</head>
<div id="elfinder"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="http://elfinder.org/demo/js/elfinder.min.js" ></script>
Javascript
$().ready(function() {
var f = $('#elfinder').elfinder({
url : '/connector'
}).elfinder('instance');
});

have you tried changing the order of inclusion?
<!-- elFinder -->
<script type="text/javascript" src="../includes/elfinder/js/elfinder.min.js"></script>
<script type="text/javascript" src="../includes/elfinder/js/i18n/elfinder.nl.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.selectable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.slider.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.dialog.js"></script>
Let me know ;)

Adding multiple js files in the header

I'm trying to add two different javascript functions to my header:
1) is for a lightbox (see code below) and the
2) is for a local scroll (code below). When I place them both in my header tag, as seen below, one or the other will not work at all--depending on the order in which I place them the tag-- when I go to view my page.
Q: how can I get all these js. files to work when I view my page?
<script type="text/javascript" src="/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
\\\\and this one below////
<script type="text/javascript" src="/jquery-vertical-scroll/js/jquery.min.js"></script>
<script src="jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$.localScroll.defaults.axis = 'y';
$.localScroll();
});
</script>

You are using prototype w/ jQuery make sure you have jQuery.noConflict(); after your jquery framework script and prototype framework and before you run any main scripts. It is not recommended to use more than one JavaScript framework at the sametime.
<header>
<link rel="stylesheet" href="/lightbox2.04/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/jquery-vertical-scroll/js/jquery.min.js">
</script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src="jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery.localScroll.defaults.axis = 'y';
jQuery.localScroll();
});
</script>
</header>
give this a try

We Keep Coding

JavaScript is the programming language of the Web.

Jquery conflict issue - javascript

Use on instead of live: $("#reset").on('click', function () { // ... });

Related

Fixing my scroll to a smooth scroll on your webpage

simple midi.js Player example

Packing all CSS/JS links into an included PHP file?

Issue including elFinder and JQuery UI

Adding multiple js files in the header

Categories

Resources