ok so I am trying to get a custom alert box working. I am using jquery 2.1.0 and have found out that the jAlert fucntion is not fully functional in jquery 2.1.0. Well the jAlert function I am using is not anyway.
I am now trying to sort out a no conflict script so I can use jquery 1.2.6 for only this function and the normal 2.1.0 for my other functions.
I have never used this no conflict before so my code may be completely wrong as I misunderstood the description about no conflict.
The below code is my jquery includes
<script type="text/javascript" src="jquery/jquery-1.js"></script>
<!-- revert global jQuery and $ variables and store jQuery in a new variable -->
<script type="text/javascript">
var jQuery_1 = $.noConflict(true);
</script>
<script type="text/javascript" src="jquery/jquery-2.1.0.js"></script>
if the above code is incorrect then I do apologize as this is where I misunderstood the no conflict part if i did misread it. The reason why I haven't made jquery-2.1.0.js also a no conflict is because I didn't/don't think I need to make that version no conflict as that is the default jquery I wish to run and earlier jquery versions can't conflict with that. I also thought that if I make this a no conflict then I need to go through all of my functions using the newer version of jquery and pass them through the no conflict function code.
The no conflict function code is what I am having troubles with, that is if the above code is correct of course.
below is the original code i got from a google search and this is also from the page where I read about the no conflict jquery
jQuery_1_1_3('<button>Use jQuery 1.1.3</button>')
.click(function() {
alert('Top: ' + jQuery_1_1_3(this).offset().top + '\n' +
'jQuery: ' + jQuery_1_1_3.fn.jquery);
})
.appendTo('body');
Below is my edited version of the code that isn't working of course and is probably totally wrong as I am bad a js and really need to learn it more.
<script type="text/javascript">
jQuery_1()
(function() {
jAlert("Player details updated successfully","Success"); })
</script>
I am more then willing to use a more up to date version of the alert box jquery function but i just can't seem to find one using Google for some reason.
The script it self will run after someone has submitted a from and has been headed back to a page and that is where the alert box appears to let them know everything went fine.
This is the link to the noConflict description I got my code and also read
http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/
Related
I'm currently running into an issue when using a package called jQuery Sparklines by Gareth Watts. Does anyone have any experience with this package? It seems to be pretty outdated but some people still use it here..
I am importing the package via script tag in a Flask view using regular ol' script tags:
<script src="/custom/css/JS/jquery-sparklines.js"></script>
And have checked the console to make sure jQuery is also installed and loaded before I load the script tag above.
I noticed the issue when I was trying to emulate the example jFiddle in the docs:
I was able to create a working version of the fiddle myself here but only by adding jQuery 1.9.1 on the extensions dropdown, and then toggling the "migrate 1.1.0" slider in the JS section.. pic here
Even with my example working somewhat, AND importing the same things in my html, the HTML doesn't pick up the custom jQuery function in the external code and get:
$(...).sparkline is not a function
Does anyone have any experience with this library? I've followed the docs but theres something i'm obviously missing.
SOS : ( or maybe reccomend other sparkline packages? : (
Thank you soooo much for your time!
UPDATE:
Still fails to recognize sparkline code with the cdn instead of downloaded files : (
Do not know why, but when I put the sparkline reference right before where I use it, the problem's gone.
It looks like:
<script src="~/Scripts/sparkline/jquery.sparkline.js"></script>
<script type="text/javascript">
var $jq = jQuery.noConflict();
$jq(document).ready(function() {
$jq(".sparkline_bar").sparkline([5,6,7,2,0,-4,-2,4], {
type: 'bar'});
//Some other things.
Solved:
I had JS code that was conflicting with the sparklines code in the tags to initialize the lines.
Fixed by simply initializing the lines FIRST before any other JS stuff.
I am using Magento 1.7 version. On my checkout page I have added Autocomplete code with jquery-1.10.2.js and jquery-ui.js. If I use jQuery.noConflict(); below the jquery-1.10.2.js, the Autocomplete works perfectly however I am not able to see the Menubar. And if I use jQuery.noConflict(true); it is showing menu however, I am not able to select the Autocomplete City Value by keybord (I am able to select the City Value by Mouse).
What could be the issue?
What is missing?
Where am I going wrong?
What/Where should I place jQuery.noConflict(true)/jQuery.noConflict()?
your help is appreciated.
noConflict(true) will set $ as the jQuery variable, and you can no longer use jQuery to call functions like jQuery('#someelement).focus() because jQuery will be undefined.
If you code
<script type="text/javascript">
$ = jQuery.noConflict(true)
</script>
as the first line of the html, and then replace every jQuery with $ (which is good practice anyways) then you shouldn't have a problem.
I'm working in a JSF 1.2 application that uses Richfaces 3.3.3. I'm stuck with jQuery 1.3.2 as a result. To compound this, the$variable appears to be unused as it does not work in a component javascript function or within a <script> tag. I don't think it's even set. Whenever jQuery is invoked, it's done asjQuery(...). This works out fine most of the time, but now I find myself needing a later version of jQuery for a particular component, and I cannot seem to get it imported without breaking things.
The page in question extends a template that is shared by many pages. Everything that extends this template is nested in an<a4j:form>. I cannot make major changes to it. About the best I can do is put a<ui:insert>in the<head>of the main template. Then I can use a<ui:define>in other pages to slip the new jQuery version into the head. This almost works, but it breaks some Richfaces components, particularly some client-switched <rich:tab>elements on the page (they do nothing when clicked, no mouseover styling), and I get a boatload of javascript errors in the console. Other javascript/jQuery functions work just fine. jQuery.noConflict()doesn't help. I'm not sure if other components are using$behind the scenes, though.
This is a rough idea of what I'm doing:
<ui:define name="jQueryOverride"> //Inserted in the <head> of the main template
<script type="text/javascript">
var $132 = jQuery;
</script>
<script type="text/javascript" src="../jquery-1.8.2.min.js" />
<script type="text/javascript">
var jqry = $;
jQuery = $ = $132;
</script>
</ui:define>
When I add someconsole.log()statements to check the jQuery version, everything checks out. 1.3.2 is set for both$andjQuery, while jqry is set to 1.8.2. The log statements show up prior to the errors in the console.
I'm not sure how to go about this as it seems the JSF implementation is a bit unconventional on these pages and the usual methods of using a second version of jQuery don't seem to work.
I had an blog using WordPress. I got an jQuery code to make some div fixed after some scroll, got it here:
http://jqueryfordesigners.com/fixed-floating-elements/
Someday ago, I got an plugin to make and "Recent Post Slider" for WordPress. But when I activate it, the fixed div jQuery stop working. I think that can be an conflict, but really don't have sure yet.
What is the best move to know what's happening?
You can use jQuery.noconflict() for this. For example:
$j = jQuery.noConflict();
$j("your_div").css("position", "fixed");
Here you have the code explanation. jQuery.noConflict
Get a browser with JavaScript debugger console and make it print you the $ variable. jQuery returns : function (a,b){return new e.fn.init(a,b,h)}. The $ variable is sometimes used by other libraries, and if you use it directly in your jQuery it may get overwritten. To avoid this, encapsulate your jQuery code:
(function($) {
your code with $
})(jQuery)
This may break some of your global variables though, it depends on how you wrote your code.
I don't think that jQuery does not work anymore as #nicowernli said. But it is possible that the plugin changed the html of the page.
The best move is to disable the "Recent Post Slider" plugin and check if the fix starts working again. Then you will know what where problem is.
make sure that you've included Jquery once but no more
I am trying to use the Nivo JQuery Slider (http://nivo.dev7studios.com/) and a Scrollable Gallery (http://flowplayer.org/tools/demos/scrollable/index.html).
Now I have run into a problem, basically the Nivo Slider uses this JQuery Library:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
and the Scrollable Gallery uses this one:
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
When both are enabled, only the thumbnail gallery works (because it's script import is done after the nivo's), when the 1.42 version is enabled only the Nivo works, and when only the 1.2.5 version is enabled only the Scrollable Gallery Works.
What should I do?
use this solution if you cannot use a single jQuery file for both the plugins:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var jQuery_1_4_2 = jQuery.noConflict();
</script>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
To use jQuery 1.4.2, put the code using it in a SEF (Self Executing Function) like this:
(function($){
//code using jQuery 1.4.2
//here the $variable will be the jQuery object of 1.4.2
})(jQuery_1_4_2)
For jQuery 1.2.5, you can use $ variable directly.
UPDATE:
Based on your comment, following is the way to use it.
If you want to use jQuery 1.4.2, use jQuery_1_4_2 object
For example: jQuery_1_4_2("#abc").slider(options)
If you want to use jQuery 1.2.5 use $ or jQuery object
For example: $("#abc").scrollable(options)
Jquery Tools website says that an upgrade is due out in just over a month bringing it in compliance up to Jquery 1.6.
That being said, there's a ton of different ways to skin this cat, and most aren't this behind the times. I've been using jQuery Infinite Carousel with great success. It looks and acts nearly identical and is written with no conflicts with the latest version of jQuery.
It wasn't clear from your posting, but I would avoid loading two different versions of Jquery if you're doing so. It's a TON of extra overhead that's really not helping your site at all.
Simple just copy & paste this java script code in your "HEAD" TAG
// jquery version conflict code
var newJQuery = jQuery.noConflict(true),
oldJQuery = jQuery;
(function ($) {
// code that needs 1.4.2 goes here
}(newJQuery));
(function ($) {
// code that needs 1.2.6 goes here
}(oldJQuery));
// code that needs oldJQuery and newJQuery can go here
and see it's work 110%..........................:) Enjoy!!!