Adding jQuery to sublime text 2 - javascript

I am new to jQuery world, and only today started using sublime text 2. Therefore, I am not aware of what packages I have to download and how to download. So, I would kindly request if anyone know how do I add jQuery to use it in my sublime text 2 editor. It will be great if you can give me a step by step instructions, like I said I am new to this. Also, how to get list of selections for jQuery.
Any help would be greatly appreciate it. Thanks :]

jQuery is a JS library. To use it you need to include it in your document like:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Than you'll be able to manipulate your DOM elements/events doing crazy stuff like this:
<script>
$(function(){
$('body').prepend('HELLO EVERYONE!');
});
</script>
or like
this demo
To help you in your work Sublime has a possibility to easily include that jQuery library by creating a shortcut snippet, I'll show you how:
Tools > New Snippet...
<snippet>
<content><![CDATA[
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
]]></content>
<tabTrigger>jquery</tabTrigger> <!-- the text that using [Tab] will paste the snippet -->
</snippet>
File > Save As...
(Under Documents And Settings/yourUserName/Application Data/Sublime Text 2/Packages/User/ )
jquery.sublime-snippet
Restart Sublime type jquery + hit your TAB key and the jQuery library snippet will be included in your document.
The same way you can create your own snippets that you use over and over for example like
$(function(){
});
var intv = setInterval(function(){
}, 1000 );

Sublime Text 2 is just an editor, you don't need to use the packages, snippets, etc. to use jQuery. In the HTML file where you want to use jQuery, you need to add a script tag that points to where the jQuery framework lives (this can either be a local path to where you placed jQuery, or a url of where jQuery resides on the internet).
For example:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
jQuery(function(){
// your code goes here, you can use jQuery at this point
});
</script>
As for a list of "selections" that really depends on the HTML markup you use. At this point, I can only recommend you read the jQuery documentation. Here's a link to their learning center: http://learn.jquery.com/

Related

How do I use typed.js without jquery or needing a main.js file?

Not too experienced w/ HTML and was wondering how to use typed.js in just HTML/CSS, without any JS at all. I've downloaded a typed.min.js into my site root and was wondering how to actually set it up with strings, any help appreciated :)
I've already seen this: Typed.js installation without Node.js - and would like to know how to set it up if possible with a simple div/h2 tags
infact it seems i was being stupid, thanks for the help!!
You have to first include the library then include a script after that to actually use it. Normally you would do this at the verry bottom of your page.
<script src="https://cdn.jsdelivr.net/npm/typed.js#2.0.9"></script>
<script>
var typed = new Typed('#typed', {
stringsElement: '#typed-strings'
});
</script>
Then somewhere on your page where you want to use it...
<div id="typed-strings">
<p>Typed.js is a <strong>JavaScript</strong> library.</p>
<p>It <em>types</em> out sentences.</p>
</div>
<span id="typed"></span>
The docs explain this pretty well near the bottom for static HTML
https://github.com/mattboldt/typed.js/
Simply just include the library by referencing the script from their website, then inside a <script> tag, define a new var with var or let and use it as described in the docs (see below);
var typed = new typed.js
var typed = new Typed('.element', {
strings: ["First sentence.", "Second sentence."],
typeSpeed: 30
});
------------
// then where you want to use it,
<div id='coolStrings'>
// stuff inide here
<div>
https://mattboldt.com/demos/typed-js/ - here's the docs

Injecting HTML that contains JS

I've been given some great tips on how to inject HTML into HTML that I can't edit.
The trouble is now that the snippet contains JS it won't render to the page.
The Jquery looks lke this:
$(document).ready(function() {
var $body = $(document.body);
if ($body.is(".ly_productdetails.ProductDetails.en.en_GB")) {
$('.info_section').prepend('<div id="test-widget"></div><script type="text/javascript" src="/frontend/latest/build.min.js" data-test="test-widget" data-instance="xyz" data-apikey="12345678" data-tags="" async="async"></script>');
}
});
I tried putting backslashes in before the quotations but this didn't work.
How else can you write this to the page so that the JS is included?
Many thanks,
Adam
JSfiddle : https://jsfiddle.net/fs6qgzrj/
This is a security feature. jQuery allows <script> elements in HTML code but it won't execute them (at least not the src="..." part; inline scripts work). This is because jQuery has no way to make sure the script isn't malicious or from a safe source (an error in your code might allow people to enter scripts in a form element).
Use jQuery.getScript(url, successCallack) instead.
See also: jQuery - script tags in the HTML are parsed out by jQuery and not executed
It looks like jQuery won't load an external script when parsing HTML. But if you create a script element it will:
$('body').prepend($('<script>', {
src: 'http://dev.bridgebase.com/barmar_test/test.js'
}));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to include two jquery mobile version in oracle apex 4.2

I have some problem while trying to include jquery mobile 1.2 in apex 4.2. Currently apex 4.2 bundled with jquery mobile 1.1.1 and i need to use newest version which support dialog and pop up with a simple way. But when i try to include this newest version. My page become so mess up just like being rendered twice by jquery 1.1.1 and 1.2 version. Every object appear twice. I've tried using this script:
<script>
var jqm120 = jQuery.noConflict();
</script>
but no luck . Please kindly give me a hint. Thanx alot.
In APEX 4.2 you have new substitution strings #APEX_CSS# and #APEX_JAVASCRIPT# in your page template. You can remove them if you want to use your own libraries. Removing these substitution strings will prevent the following code from being added into the page header (assuming the Content Delivery Network from the application attributes is set to "None") :
/your_image_prefix/css/apex.min.css?v=4.2.0.00.27
/your_image_prefix/libraries/jquery-ui/1.8.22/themes/base/jquery-ui.min.css
/your_image_prefix/libraries/apex/minified/desktop_all.min.js?v=4.2.0.00.27
/your_image_prefix/libraries/apex/minified/legacy.min.js?v=4.2.0.00.27
<script type="text/javascript">
var apex_img_dir = "/your_image_prefix/", htmldb_Img_Dir = apex_img_dir;
</script>
Warning : you may have to include some of the removed files manually, as some APEX default functionnalities will be removed at the same time :/
For example :
apex.min.css?v=4.2.0.00.27 is needed for the developer bar to be displayed properly.
desktop_all.min.js?v=4.2.0.00.27 does not include only JQuery and JQuery UI but also all the apex JQuery core functions...
legacy.min.js?v=4.2.0.00.27 is defining some main apex Javascript functions (like doSubmit(), etc...).
Unfortunately APEX does not provide substitution string to remove only the JQuery libraries...
So a solution is to retrieve the default APEX files, then remove only the JQuery library code from them, and replace it with the newer library code...
It is the only solution I have found, even if of course a simpler solution would be to use JQuery.noConflict as you mentionned (to be honest I have not tried it), but it will load the library two times, making your page to load slower ?
EDIT :
Sorry, in your case, as you are using JQuery mobile, it should be something like :
/your_image_prefix/libraries/jquery-mobile/1.1.1/jquery.mobile-1.1.1.min.css
/your_image_prefix/themes/theme_50/css/4_2.css
/your_image_prefix/libraries/apex/minified/mobile_all.min.js?v=4.2.0.00.27
/your_image_prefix/libraries/jquery-mobile/1.1.1/jquery.mobile-1.1.1.min.js
/your_image_prefix/libraries/apex/minified/legacy.min.js?v=4.2.0.00.27
<script type="text/javascript">
var apex_img_dir = "/your_image_prefix/", htmldb_Img_Dir = apex_img_dir;
</script>
that will be removed from the template (you can check by yourself).
But the remarks still apply.
You could do something like this:
<script type='text/javascript' src='js/jquery_1.7.1.js'></script>
<script type='text/javascript'>
// In case you wonder why we pass the "true" parameter,
// here is the explanation:
// - When you use jQuery.noConflict(), it deletes
// the "$" global variable.
// - When you use jQuery.noConflict(true), it also
// deletes the "jQuery" global variable.
var $jq = jQuery.noConflict(true);
</script>
<script type='text/javascript' src='js/jquery_1.2.1.js'></script>
And this way when you want something made with the new version of jquery instead of the $ use $jq.
$jq('.selector').on('click', function(){
//do something
});

how to re-factor/extract methods to separate file for re-use

I'm fairly new to the whole JQuery/javascript world, but I've managed to wack together a working jqgrid with a datepicker & custom control (used jquery auto complete) based on code samples i found on the net. I've added the code to a T4 template in my project as it'll probably act as a base/starting point for most pages. (Side note. I'm using asp.net MVC)
JFIDDLE: LINK
1.) I'd like to move the initDateEdit & initDateSearch to the same function (using a parameter, to disable/enable the showOn property) as they are basically similar.
2.) How would be the best way to set nonWorkingDates from outside the new function/file. same applies to the autocomplete_element (I'd like to specify the url)
Changing
"function nonWorkingDates(date)" to => "function nonWorkingDates(date, nonWorkingDates)"
isn't working, (guess it's got got something to do with how its gets called "beforeShowDay: nonWorkingDates")
Thanks in advance!
If you have a chunk of JS code like this:
<script type="text/javascript">
... code goes here ...
</script>
You simply copy the whole thing, eliminate the containing script tags, and save the raw code
... code goes here ...
to a file, which you then include with:
<script type="text/javascript" src="yourfile.js"></script>
However, since you're using jquery, you'll have to make sure that this above snippet is placed AFTER the script tag that loads up jquery, or you'll get a "no such function" syntax error.

Simple JavaScript question - where does this go

I'm trying to follow the tutorial to use jQuery UI plugin. I'm new to JavaScript and I'm not sure where to put a particular bit of code.
I've got everything I need downloaded. I've put the files where they need to be and included them in the like I'm supposed to - all no problems there. But next I get a little stuck due to my utter noobieness.
It says I give an ID to the element I want to use e.g. id="date" and call:
$('#date').datepicker();
on it.
Where do I put the above code? Along with the html and php? Or in the Javascript file I've included?
First load your jQuery library:
<script src="/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
Then load your jQuery UI library:
<script src="/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
Then, load your code with something like:
<script type="text/javascript">
$(document).ready(function() {
$('#date').datepicker();
});
</script>
Put it within a script tag like :
<script type="text/javascript">
$(function(){
$('#date').datepicker();
})
</script>
You will usually execute jQuery-code on $(document).ready(), but there are cases where you don't. Maybe this gets you started: http://docs.jquery.com/How_jQuery_Works
In your HTML/PHP code between script tags. Mostly in the head section or at the bottom just infront of the end body tag.
your code would look like this: ...
<script type="text/javascript">
$(document).ready(function() {
$('#date').datepicker();
});
</script>
the code you are trying to use is Javascript, so it normally goes into a .js file, or into a script type="javascript" tag of your resulting html. As it uses the jQuery $ function, you need to have the jQuery Library included before calling the code you have in your question. The code itself is best placed into the document.ready function that jQuery provides, so it will be called only when all the neccessary libraries are loaded and the html Dom tree has been constructed.
$(document).ready(function() {
$('#date').datepicker();
});
You have to put that code inside the javascript file such that the input text box element is already append to DOM.For example,
var input = document.createElement('input');
input.type = 'text';
input.id = 'date';
document.body.appendChild(input);(or)[If div to append then div.appendChild(input);
$('#date').datepicker();
Here,the input element is appended to body or the parent div.Then the datepicker() can be rendered

Categories