How to initialize javascript on a webpage using the datatables plugin - javascript

I am attempting to use a jQuery plugin called DataTables. I am new to jQuery and setting this up on my own site in as basic a way as possible to get familiar with it. On the last step on setting it up the guide says to:
"Initialize DataTables".
"All we need to do now is to tell DataTables to actually work on the page."
The code I am suppose to Initialize is the following:
$(document).ready( function () {
$('#table_id').dataTable();
} );
I assume I am suppose to put it in a script tag in the head or right after the head like so:
<script type='text/javascript'>
$(document).ready( function () {
$('#table_id').dataTable();
} );
</script>
sorry for such a basic question and enlightenment would be great! thanks!

your scripts looks correct
make sure you are inluding jquery and datatable pluging
you can inlude them in the head tag or in the end of the body tag best practice to inlude all your script in the end of your body tag before the </body>
and make sure to follow the right order jquery then datatables then your sctipts
and make sure the table is using thead and tbody
good luck and Merry Xmas

Related

jQuery Find and Append/Prepend to existing javascript

I have read many of the articles on using jquery to find and append. I have been successful at doing this on other projects, but mostly appending to a div element. I need to append to javascript on the page that unfortunately I don't have core access to.
Existing JS:
<div class="widget">
<script type="text/javascript">
var widget37 = new VideoWidget("VideoCanvas",
"divVideoCanvas37", "DS37");
widgetVideoCanvas37.SetWidth("630");
widgetVideoCanvas37.SetHeight("355");
widgetVideoCanvas37.SetVariable("isMute", "false");
widgetVideoCanvas37.RenderWidget();
</script>
</div>
Before the RenderWidget, I need to add
widgetVideoCanvas37.SetVariable("isAutoStart", "true");
I've tried something like this:
$( "widgetVideoCanvasDS37.RenderWidget()" ).prepend( "<p>Test</p>" );
but it does appear to be working. Maybe prepend isn't the best way to do this. Thanks in advance for the help!
The element would be selected like $('script').appened('blah');
But i feel that that probably won't or shouldn't work. That be a very large security flaw if i was able to run my own script locally to append JavaScript to the script element of another page that i don't have core access to.

MVC Add HTML with MvcHtmlString.Create but with JavaScript functionality

I have a big doubt. In a MVC project, I render a HTML template (loaded from .html file) into a View with MvcHtmlString.Create();
This works fine but have a problem. This HTML template need to do javascript functionality, the problem? That this don't work, because the HTML is rendered after the javascript and the js functionality not work.
Something like this:
<script type="text/javascript">
$(document).ready(function(){
$("#SomeID").click(funciton(){
//This don't work because the #SomeID not exists yet
});
});
</script>
<br />
#MvcHtmlString.Create(#Model.HTMLTemplateContent);
Someone can help me about this or tell me something at respect?
Thanks
Use jquery on method.
$(document).ready(function(){
$(document).on("click","#SomeID",function(){
alert("Working");
});
});
on method will work for current and future (Any thing injected to DOM later (Ex : through javascript code, ajax) elements.
Thanks! I not have idea about this.
Is possible to access at elements by the same "method"? How to do to get this? i.e
I'm using jSignature to implement sign en the document.
whit this:
$("#someDivID").jSignature();
I'm using now to access at div element with this:
var signCanvasOn = document.getElementById("someID");
signCanvasOn.jSignature();
signCanvasOn.jSignature("reset");
But this don't work for me, only work if I use:
$("#someID").jSignature();
$("#someID").jSignature("reset");
What is the real problem?
Have you tried adding the jquery at document level?
That's how i usually ensure that jquery continues to work with any stuff i load on the page dynamically.
Something like this:
$(document).on("click","#SomeID",function()
{
//This don't work because the #SomeID not exists yet
});

Adding jQuery to sublime text 2

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/

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