I am trying to use jQuery in a highly conflict environment. .noConflict() doesn't work and I am trying to do something like
<script type="text/javascript">
document.write( document.write(unescape("%3Cscript src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
jQuery.noConflict();
var $ = jQuery;
</script>
Any ideas how to fix this ?
Are you sure it has nothing to do with the fact that you have:
document.write( document.write(unescape(...longstringhere...)); // Missing final close paren?
That would cause an error and then noConflict wouldn't work.
Also, do you need to be using Prototype and jQuery at the same time? The whole purpose of jQuery.noConflict() is to NOT set the jQuery variable to $ because Prototype uses it (I'm sure there are other reasons, but that's the main one in this case). jQuery and Prototype aren't good friends, usually.
Finally, are you absolutely positive (assuming you don't have the syntax error in your real code) that jQuery is getting loaded?
Did some quick research. Check this link and see if it helps any:
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Basically, you might have to call jQuery first, and you will have to call Prototype BEFORE you use noConflict()
Don't use $ - that is the source of the conflicts. Substitute jQuery wherever you'd normally use it, like so:
jQuery('#my-id')
jQuery('.my-class')
and so on
Related
Trying to resolve $ conflict between prototype.js and jQuery.js because I need to use jSlider which requires the jQuery library.
I add jQuery.noConflict() at the end of the jquery.js file then in the jslider.js file I change $._roundNumber to jQuery._roundNumber. Yet I still get an error which says jQuery._roundNumber is not a function. Please help.
Here is the example of integrating prototype and jquery...May check you did the right thing or not.?
<script src="prototype.js"></script>
<script src="effects.js"></script>
<script src="jquery.js"></script>
jQuery.noConflict();
jQuery(document).ready(function($){
jQuery("a").click(function(){
Effect.Shake('shake_demo');
});
});
<div id="shake_demo" style="width:150px; height:40px; background:#ccc; text-align:center;">
Click me to shake!
</div>
And now for rounding the number you can use this code:
var txt=jQuery('#txtBox').val());
var amt = parseFloat(txt);
alert(amt.toFixed(2);
https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Number/toFixed
Fixed. Just realised that the reason jQuery.noConflict() was not working was because jQuery was already being used in the template page that I was including in my current page so the problem was two fold:
'$()' which is the default jQuery selector was clashing with prototype.js which Tapestry includes by default
when I added jQuery.noConflict() at the end of my jquery.new.js file then tried using 'jQuery()' as the selector it did not work either because a different version of jquery (let's call this jquery.old.js) was already included in the template page (which I was including in my current page). To get the jquery.old.js to work with prototype.js, the previous developer already used jQuery.noConflict() so the 'jQuery()' selector was already taken as well.
Fix: I added $j2 = jQuery.noConflict() at the end of jquery.new.js file then I used '$j2()' selector in my new library that uses the jSlider and I also modified the selector in the jSlider.js file. It all works well now.
I am leaving both jquery.new.js and jquery.old.js file in the project (rather than using just one) because the template page which uses the older jquery version is used all over the site (I don't want to test the entire site after changing this) while the new component I'm adding needs the new version of jquery (jquery.new.js) file. And yes I know it's better to add the no conflict commands at the top of my html page rather than at the end of the js library files - will change that after this update on stack overflow :)
I have some jQuery code that deals with DOM manipulation, simple stuff like fadeIn(), etc...
Is the best practice to put
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
and any script associated with manipulating the HTML on a CI view right on the view.php file?
Thanks
That's eminently reasonable. If you're using jQuery you should probably wrap your manipulation code in a ready call.
I'm maintaining an application with monorail, and we decided to change the validation method for the Jquery one. So far so good, but... the problem i'm having is that i can't get rid of the reference to the previous validation method which is prototype.
Thing is that a Javascript is always placed after the tag forms i create.
<script type="text/javascript">
if (!window.prototypeValidators) prototypeValidators = $A([]);
var validator = new Validation('form1', {onSubmit:true, focusOnError:true, stopOnFirst:false, immediate:true, useTitles:true});
prototypeValidators['form1'] = validator;
</script>
I haven't been able to find clear documentation about monorail validation methods.
And this turns to produce some errors on the browser like so:
$A is not defined
[Break On This Error] if (!window.prototypeValidators) prototypeValidators = $A([]);
Any help or pointers in the right way for documentation about this or how to remove this kind of validation from monorail, will be greatly appreciated.
Thanks in advance
MetalGeorge
PS. i gotta say i'm fairly new to monorail
You can switch to jQuery generation (default is Prototype as you noted) with the JSGeneratorConfiguration property in the Monorail config. See http://hammett.castleproject.org/?p=238 for reference.
Or you can get rid of form validation generation completely by replacing:
$Form.FormTag("%{action='LoginAction'}")
...
$Form.EndFormTag()
with a regular form tag:
<form method="post" action="$Url.For("%{action='LoginAction'}")">
...
</form>
<blink>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>
<script type='text/javascript' src='/lightview.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type="text/javascript" src="/photography/js/scrollable.js"></script>
<script>
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div.scrollable").hide();
});
// Use Prototype with $(...), etc.
$('div.box').hide();
</script>
</blink>
My code isnt working im not sure why?
any advice?
You need to use jQuery.noConflict() to release $ back to prototype, like this:
jQuery.noConflict(); //restore $ to prototype
jQuery(document).ready(function(){
jQuery("div.scrollable").hide();
});
$('div.box').hide();
Though jQuery can do show/hide, so you may not need both libraries, depending on what you're doing (for example, there are lightbox plugins for jQuery and scrollable plugins for prototype, so you could go either way with using a single library for everything).
You can also give it an alias from the $ restoring call, it returns a reference to jQuery, so you can do this:
var $j = jQuery.noConflict(); //restore $ to prototype
$j(function(){
$j("div.scrollable").hide();
});
$('div.box').hide();
Once I had the same problem, using Prototype and jQuery on the same page, and specifying the jQuery.noConflict() function, but my stuff didn't fade in/out right (stuff were jumping weird and sometimes only worked on the first animation). When I disabled Prototype, my jQuery code did exactly what it was supposed to do. I came to the conclusion the jQuery and Prototype have the same function names and these cause conflict in some way.
Disable Prototype temporarily and see if your jQuery code performs as expected.
I thought this was pretty straight forward but I don't get the same results as the tutorials I read. I have a button on an html page that calls a function in script tags. I also have a reference to the prototype.js file which I haven't even begun to implement yet. If I leave that reference in the page, my function call does not work from the button's onclick event. Below is what is called from the button onclick event.
callIt = function(){
alert('It worked!');
}
</script>
A couple of things: first, make sure your HTML is valid. Run it through the validator at http://validator.wc.org.
Next, once you're sure that your page is valid, add the prototype.js library as the first script reference on the page:
<script type="text/javascript" src="prototype.js"></script>
Notice that I didn't close it like this <script ... /> Script blocks need to have an explicit closing tag (at least in XHTML 1.0 Transitional)
Now, to answer your question, I'm really not sure what you're asking, but if you wanted to attach the callIt method to the onclick handler of your button using Prototype, then do this:
Event.observe(window, 'load', function() {
Event.observe('button_id', 'click', callIt);
});
Put this in script tags in the element of the page, below the prototype script reference. This will execute when the DOM is loaded & the button exists on the page.
Hope this helps.
That worked. I'm just puzzled why none of the examples I have been working from have done this.
Thanks!