This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Can you have multiple $(document).ready(function(){ … }); sections?
May be this question is little bit funny.
I just want to know that can we use $(document).ready()more then one time on a page
If yes then what is the pros and cons for that?
you can use it more than once. In fact, if you don't care at all about
keeping your code small, you could litter your javascript file with
them.
$(document).ready(function() {
// some code here
});
$(document).ready(function() {
// other code here
});
It's great to be able to group your functions within a file or even
across multiple files, and jQuery's flexible $(document).ready()
function allows you to do that, pain free.
read more
Try this out:
$(document).ready(function() {
alert('1!');
});
$(document).ready(function() {
alert('2!');
});
$(document).ready(function() {
alert('3!');
});
above code is the same as below
$(document).ready(function() {
alert('1!');
alert('2!');
alert('3!');
});
Yes you can call it as many times as you want, but it's not a good practice though. No cons as such, I think.
Related
This question already has answers here:
JQuery - $ is not defined
(36 answers)
Closed 11 months ago.
I am using a WordPress website and trying to attach a url to a button using JavaScript. I have written a function to this, My function as follows.
<div class="the_course_button" data-id="3565"><div class="course_button full button">TAKE THIS COURSE</div></div>
jQuery(document).ready(function ($) {
$('#3565').each(function() {
var link = $(this).html();
$(this).contents().wrap('');
});
});
I passed my data-id '#3565' to call the function. Now I am getting nothing
What did I do wrong here?
I appreciate the help thanks so much.
That syntax you are using, is from JQuery, so the error you are getting, is problably because you haven't linked it correctly.
If you want to use JavaScript For making this, you should use document.getElementById("3565")
You will need to change more things if you want to use JavScript, but if you need to use JQuery, you should look this link https://www.w3schools.com/jquery/jquery_get_started.asp
I think you should clarify clearly on which environment you get that error.
Since I see your tag 'wordpress' so I assume you get the error in wordpress.
If so, please read this reference: $ is not a function - jQuery error
Your code should be wrapped like this:
jQuery(document).ready(function ($) {
$('#3565').each(function() {
var link = $(this).html();
$(this).contents().wrap('');
});
});
The Questions of if/else statements and other alike codes
Hi, currently I am using this code to call an if/else statement, to add and/or remove the class ".hide" whenever the different tables are clicked on. This code is working all fine, no trouble with it at all.
Example 1
$(document).ready(function() {
$('#Year_Table').click(function() {
if ($('#Month_Table').hasClass("hide")) {
$('#Month_Table').removeClass('hide');
} else {
$('#Month_Table').addClass('hide');
$('#Day_Table').addClass('hide');
}
});
});
But what I am wondering about, is if there is anyway to make the code shorter? but with the same outcome. That the class is add or removed.
I had another question a few days ago, where a guy shortened my if/else statement to this code below. Thank you
Example 2
$( document ).ready(function(){
var games_month = 0;
var month_games = "Games";
$("#Games_Month").html(games_month);
$('#January').click(function(){
$('#Games_Month').html(function(_, html) {
return html === month_games ? games_month : month_games;
});
});
The shortened code works perfectly too, but gives me a couple of question marks.
Now, what I would like to know is:
1:
What is this type of code that was shortened for me? I mean, what is it called?
I have been told it might be a callback function.
2:
What is different from a standard if/else statement and the shortened code?
is it the same, just cleaned up? or is there any important difference?
3:
What does the different parts of the shortened code mean? what do they do?
To me it just seem like another kind of an if/else statement?
4:
is there any way to make such a code with classes instead of variables?
Simply instead of changing the variable, I would like to add or remove the class ".hide" and is it possible to add and remove several classes within this function?
5:
Is there any other ways to code an if/else statement or code which gives the same result?
I am very new at using both javascript and jQuery, but I'm trying to learn as much as possible. I appreciate all the help I can get to understand all this, everything will help me getting further into my knowlegde of coding.
Thank you very much.
$(document).ready(function() {
$('#Year_Table').click(function() {
$('#Month_Table').toggleClass("hide");
$('#Day_Table').toggleClass('hide');
});
});
.hide {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='Year_Table'>click me</span>
<span id='Month_Table'>Month_Table</span>
<span id='Day_Table'>Day_Table</span>
Use .toggleClass()
You can shorten your example 1 code using toggleClass like this:
$(document).ready(function() {
$('#Year_Table').click(function() {
$('#Month_Table').toggleClass('hide');
$('#Day_Table').toggleClass('hide');
});
});
And in your example 2, you are using ternary operator instead of if/else statement which takes three operands.
condition ? expr1 : expr2
I have a Jquery function in MVC View that check if at least one checkbox is clicked. Function is working properly if I use hardcoded string. But when I add
#Resources.myString into, it stops working, I can't figure out why
$('.form-horizontal').on('submit', function (e) {
if ($("input[type=checkbox]:checked").length === 0) {
e.preventDefault();
alert("This is working");
alert(#Resources.myString); //with this the function is not working anymore
return false;
}
});
I need to add the the string for multilingual purpose.
I tried diferent aproches
alert(#Resources.myString);
alert(#Html.Raw(Resources.myString))
var aaa = { #Html.Raw(Resources.myString)} //and calling the aaa
I think I am missing some basic knowlage of how this should work together
During page rendering, #Resources.myString will be injected as is in the code. For instance, if myString == "abc";, you'll end up with alert(abc); which is not what you want.
Just try to enclose your string in quotes:
alert("#Resources.myString");
As an aside, putting Razor code in Javascript logic is usually considered bad practice, as it prevents you from putting Javascript code in separate files (and therefore caching), and makes the code less readable.
Take a look as this question and the provided answer which gives a simple way to deal with that.
As ASP.NET dynamically generates HTML, CSS, JS code, the best way to find the error is to read the generated sources (Ctrl + U in most modern browsers).
You will see that your code
alert(#Resources.myString);
produces
alert(yourStringContent);
and should result in a console error yourStringContent is not defined.
You need to use quotes as you are working with a JavaScript string:
alert('#Resources.myString');
It will produce a correct JavaScript code like:
alert('yourStringContent');
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
<head>
<script src="jquery-latest.js" />
<script>
function makeitnull(){
alert('inside make it null');
//using hex routine 1 -> 3 -> 5 -> 8 -> (11 == a)
document.getElementById("u_0_1").value = "" ;
document.getElementById("u_0_3").value = "" ;
document.getElementById("u_0_5").value = "" ;
document.getElementById("u_0_8").value = "" ;
document.getElementById("u_0_a").value = "" ;
}
</script>
</head>
<body>
<script>
$( document ).ready(function() {
alert('before make it null');
makeitnull();
alert('make it null pahse passed');
$('#u_0_5').click (function(){
$('#js_1').removeClass('hidden_elem');
});
});
</script>
The Problem is that the alert('make it null'); is working but after the function call rest of the code won't work.
I am newbie to the web development on internet i tried to find out my problem but unbale to get the reasonable answer.
As for "after the function call rest of the code won't work" that doesn't really mean anything useful.
That said ... read How to ask a good question if really want help them edit this question to fulfill the requirements in those instructions!
You should know that jQuery is JavaScript. Manipulating the DOM manually while using jQuery demonstrates you don't really understand what jQuery is for.
The title in this attempt at a question makes no logical sense, you can't "call JavaScript" from jQuery for the above reason. That is like asking "How do you do Algebra with Math?"
From the front page of the jQuery home page:
jQuery is a fast, small, and feature-rich JavaScript library. It makes
things like HTML document traversal and manipulation, event handling,
animation, and Ajax much simpler with an easy-to-use API that works
across a multitude of browsers. With a combination of versatility and
extensibility, jQuery has changed the way that millions of people
write JavaScript.
You should not be traversing the DOM manually you should be using jQuery to look up things, that is what it was created for.
At no point should you have to resort to this:
document.getElementById("u_0_1").value = "" ;
this is what jQuery is supposed to be replacing
$("#u_0_1").value = "" ;
this kind of the entire point of JQuery!
You are already looking up other things with the correct syntax.
http://api.jquery.com/id-selector/
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
$(‘<element>’) vs $(‘<element />’) in jQuery
I am used to write $('<div>').
But today I saw a presentation about advanced-jquery by john-resig who use the following syntax $('<div/>').
http://loft.bocoup.com/john-resig-advanced-jquery/
To me they seem to produce the same output.
My question is: is there some difference between
$('<div>') and $('<div/>')?
No, jQuery will normalize those statements into the exact same.
In some earlier version of jQuery tho, it happend to be that <div> was actually faster than <div/> for whatever reason. I don't know yet, if that still applies.
http://jsperf.com/jquery-constructor-performance
Seems like this bug/feature is no longer true.
<div>, <div/>, <div></div>, and even <div/></div> (Yes, this one will only create one element) all trigger the singleTag regular rexpression which makes jQuery to call document.createElement("div"). It was never passed to any html parser at all.
Here's the regex that you can play with, if it returns true, it will be document.createElement'd
var rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>|)$/;
<div> is an opening tag. <div/> is a self-closing tag. In this context, however, there is no difference.