I don't know if this is possible. This is how my js file will look like:
$(document).ready(function(){
$("li#dropdown").on('click', function(e) {
$('#toggleList').slideToggle();
e.preventDefault();
});
});
//javascript code...
Will this be possible? or is it better to have my javascript code in another file
That depends entirely on what you want to do.
If your javascript has code, that will be used inside of your $().ready event then you should put it before the $().ready.
The rule is code with functions to do specific stuff, you can call it "your" library, and you should put that code in a separated file.
Code that deals with event handling of your page controls, you should put on a file with [the name of the page].js, but this is just a way for you to organize stuff.
Because javascript is so flexible if you want you can put all in the same file, and it will work generally.
Jquery is an library made out of javascript code.
So actually you are writing javascript in javascript.
So you can combine it, what is already combined :P
haha
You can script inside jquery with javascript goodluck!
That is going to work well and accurate. There is no issue with the code, to be written in jQuery or JavaScript.
jQuery is just a library written in JavaScript. jQuery just shorten downs the code for you. There is no other major difference.
$(document).ready(function(){
$("li#dropdown").on('click', function(e) {
$('#toggleList').slideToggle();
e.preventDefault();
});
});
Would work in every browser, when you have included your jQuery plugin in your web app. Otherwise browser won't be able to recognize $ character and you'll get error. That's the thing you need to worry about only.
.slideToggle() is just a method; function, or jQuery. e is handler for event, and the preventDefault is also a part of JavaScript. So you can see, that jQuery and JavaScript are alike. There is no major difference.
JavaScript is executed by every browser. So it would be executed as it is by every browser.
Related
I'm building a service that allows people to put a javascript code I gave them to their site.
The javascript code is based on jQuery.
My question is how to do this to be safe and optimized, cause I don't want to break certain users website.
The thing I'm looking for so far( you can update if you think I need to face other problems):
what happens when the user already has jquery loaded on their page? should I load my jquery library using different namespace or should I use his jquery library.
in case I can use his jquery library, I think I'll need to check to see if the versions corespond, but again is this safe?
in case I want to use his jquery library, how do I check if he has jquery loaded and if he has the right version
this is related to 3. what happen if he changes his jquery library that doesn't correspond with the library I think it will be, leading to a bad result.
Looking for your answers.
Thanks
Don't depend on the page's jQuery or try to use it. This will just turn into a support nightmare. You can't even be sure that a version is accurate, as the target page can alter its version of jQuery.
The best approach is for your code to create and load an iFrame. This gives you complete control over the iFrame's jQuery, CSS, etc. With vastly reduced chances of conflict.
If the iFrame approach is not possible for some reason, Use noConflict to minimize the chance of conflicting jQuery versions.
Something like this:
<script type="text/javascript">
if ($ || jQuery) {
var PagesLibrary = $;
var PagesjQuery = jQuery;
</script>
<!-- load your jQuery -->
<script type="text/javascript" src="http://example.com/jquery-1.6.2.js"></script>
<script type="text/javascript">
var my_jQuery = $.noConflict (true);
if (PagesjQuery) {
$ = PagesLibrary;
jQuery = PagesjQuery;
}
</script>
Then instead of $('#selector').function();,
Use: my_jQuery('#selector').function();.
Without the context of actually what your injected code does, it's hard to say. If you're writing a general bit of functionality, you probably want to just implement it as a jQuery plugin, specify what version you target, and then leave it to your users to decide how to include it, etc.
However, it sounds more like you're writing a service of some kind. In that case, I recommend the following course:
Place all the code you depend on (jQuery, other libraries, your code, etc) in an anonymous function wrapper, and have the snippet you have people just inject a script tag pointing to your js file. This is most likely to give you reliable results. If you require special information, like an ID, have the snippet just before the injection code set those values in a global variable, or have extra code that runs just after the injection to call a function of yours with the data. Look at how Google Analytics accomplishes this for reference. Either way, you'll need to affect the global scope.
I know that may not be what you wanted to hear. You could always create an elaborate jQuery detection and injection scheme, but you'd run into exactly the problems you mention (like version collisions etc). The safe way to go is to combine all the code you require along with your own and provide it all as one file which only makes internal references.
Hope this helps!
I would like to edit part of the .js file. I mean add some code, and these code should be executed when I open the website (in browser). How I can do that?
The easiest way to do that is to use jquery and put your code into
$(document).ready(function() {
//your code
}
or if you don't want to use jQuery
document.onload = function()
{
//your code here
}
If you want to add on to existing JavaScript code for a site, I am not sure that you can in a permanent way. However, if you want to change some sort of behaviour just for you, you could take a look into creating a userscript. There are many examples at userscripts.org.
You cannot edit the js file but you can override the functions and the variables. This will work unless the js file is not protected by closure.
You can't modify the js file on client side. However, if you just want to add some code, you can use userscript.
this is a bad...
but if the js is not remote, use AJAX to read the file contents, then change what you need then use the DOM to create the script tag and use .innerHTML to put the content in.
if you would like code tell me if you want JQuery or native and i will post
P.S if the file is remote there is no way to do it...
How do I add a script such as the jQuery library so it is available for use in GWT? I know how to do JSNI, I just don't know how to make the jQuery library available to me so I can call it within JSNI.
GWT can call any JS function or reference any JS variable on the page using JSNI, so as long as the JQuery script is also loaded on the page, you can call any JQuery code you want.
For example:
public native void callJQuery() /*-{
$("p.neat").addClass("ohmy").show("slow");
}-*/;
They don't play well together, yet. The only way I know so far (correct me if I'm mistaken) is GWTQuery. Give it a try ;)
EDIT
I re-explained my thoughts, hope it'll be more clear now
It is possible to call any desired custom JavaScript code, see Jason's answer.
I recommend using GWTQuery, since it's successfull port of JQuery to Java-based GWT ecosystem and doesn't force you to use raw native JavaScript from Java code.
I have a script element in my webpage, something like this:
<script id="myscript"></script>
Now, from a javascript file, I'm doing something like the following:
$('#myscript').src('http://foo.bar?callback=somefunc')
Now this remote script 'returns javascript' of the following form:
somefunc(somearg);
When I run all of this, things work neatly, the script gets loaded dynamically, and the 'somefunc' callback is executed.
The problem happens when I do the same thing again. Let's say I again call the same thing:
$('#myscript').src('http://foo.bar?callback=somefunc')
This, for some reason, DOESNT return the javascript call in Firefox only. (Works fine in IE - somefunc gets executed again as expected).
I can think of ugly workarounds (such as doing a $('head').append('<script...')) every time - but I'd like to know what's going on here.
Thanks in advance!
I would recommend you to use $.getScript instead of using a single script tag load scripts multiple times:
$.getScript("http://foo.bar?callback=somefunc");
That function will abstract the script element creation and its introduction to the DOM.
But it seems you are accessing a JSONP service, in that case you need only $.getJSON:
$.getJSON("http://foo.bar?callback=?", function(json){
// callback
});
I can think of ugly workarounds (such as doing a $('head').append('
Ugliness is subjective; personally, I find the technique you're trying to use (making a single script tag load multiple scripts) far uglier.
But that's not really important. Adding a new script tag works - so if you're having trouble with what you're doing, just use the normal method and live with it.
FWIW: Firefox probably doesn't respond because you're not actually changing anything... If you want to make this even uglier, append some do-nothing querystring parameter that changes each time through.
I want to run the following jquery code on every page in my website.
$(document).ready(function(){
$("#more").click(function(){
$("#morediv").slideToggle("slow");
return false;
});
});
In all my pages I have the more and morediv elements defined, for every page I have different js file and adding this code in every file will not be a good solution (I suppose).
I have created a global.js to include this code, but in other pages also I have the $(document).ready(function(){} function defined and may be that's why its conflicting and not running properly.
You can have multiple $(document).ready(function(){}) elements on your page, so that it's the problem. I suggest using Firefox/Firebug and examining any console errors you find to discover the problem. Perhaps your global.js file is being loaded before jQuery itself? Otherwise, you'll need to dig into it with Firebug's debugger.
Are you actually doing some server-side programming or you are talking about plain HTML pages. I would advise that you have templates (this is specific to your development environment and tools of choice) and include the JS in those templates. Then the actual pages will all use the template and have the JS available. The question you are asking has in fact nothing to do with Javascript or JQuery, but the way you organize your site... unless I'm missing something.
having $(document).ready() event handler in global.js and the page it is included in does not poses any problem I'm using it and it works really fine.
Just a guess, but are you referencing the location of the global.js file correctly?
To be sure, write something like the following into your global script:
$(document).ready(function(){
alert("document ready");
$("#more").click(function(){
$("#morediv").slideToggle("slow");
return false;
});
});
If you don't get the alert the script is not pathed correctly, or is not placed after the jquery include (or the jquery include is not pathed properly).