This question already has answers here:
'$' is undefined
(2 answers)
Closed 8 years ago.
What I want to do with my code is to use information from an input box in other parts of the webpage or data validation. From my understanding, I have to use something to the effect of, for example:
<script>
var value = $('input').val();
alert(value);
</script>
But when I try to use this block of code, Chrome's console is telling me the error message "Uncaught Reference Error: $ is not defined," but I don't know why. If it helps, the following is my code:
JS:
click = function() {
var password = $('input#password').val();
alert(password);
};
HTML:
<input type="text" id="password">
<input type="submit" onClick="click();">
If anybody could please explain why this error is occurring, I would greatly appreciate it. Thanks in advance!
$() is a javascript function that's defined by the jQuery library.
(It's just like any other function - foo(), for example... it's just named with a single $)
The example you're working from looks like it's written to use jQuery, so you need to make sure you include jQuery on your page before you run your code.
Try adding this line at the top of your document (in the <head> section if possible):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
There are other libraries that sometimes use the $ name as well - prototype, for example - and having multiple libraries fighting over the $ name can sometimes give you similar looking errors. There are techniques you can use to help avoid conflicts like that.
try this
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
$(document).ready(function(){
var value = $('input').val();
alert(value);
click = function() {
var password = $('input#password').val();
alert(password);
};
});
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('');
});
});
This question already has answers here:
Uncaught ReferenceError: $ is not defined?
(40 answers)
Closed 6 years ago.
Firstly, I want to make sure that you know that I know that stackoverflow is filled with topics related to my issue, however I have looked through them and literally none of them seem to relate to my issue.
I am a complete noob when it comes to javascript, however I am good in Googling and analyzing/adjusting free-to-use codes so that it works for me (until now...)
The initial project was a calculation form which I got to work the way I wanted it. Now I want to show a value right under the dropdown boxes in the top of the page, since each choice needs an accompanying comment.
I have literally copy-pasted a piece of code I found through StackOverflow which works perfectly fine in JSFiddle: http://jsfiddle.net/irama/ZFzrA/2/
hideAllDivs = function () {
$("#hourly").hide();
$("#per_diem").hide();
$("#fixed").hide();
};
handleNewSelection = function () {
hideAllDivs();
switch ($(this).val()) {
case '1':
$("#hourly").show();
break;
case '2':
$("#per_diem").show();
break;
case '3':
$("#fixed").show();
break;
}
};
$(document).ready(function() {
$("#project_billing_code_id").change(handleNewSelection);
// Run the event handler once now to ensure everything is as it should be
handleNewSelection.apply($("#project_billing_code_id"));
});
However, when I add it to my existing code and upload the changes, I receive the reference error in my browser and the div's under the dropdown box show by default.
My complete code: https://jsfiddle.net/ohwwzo7q/
So basically my question is where did it go wrong?
P.S. My calculator doesn't work probably because of the error, when I remove the extra code it does work again however.
You need to include jquery as a dependency to use $
You can either download a version from the jquery website, or use a CDN. Either way, it can be included like this:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
Or how would I convert a list of SelectItems to a JavaScript array?
Currently I am trying this:
<h:outputScript>
<!-- Trailing commas valid as per http://www.ecma-international.org/ecma-262/5.1/#sec-11.1.5 -->
var possibleOption = [<ui:repeat value="#{bean.mySelectItems}" var="selectItem">"#{selectItem.value}",</ui:repeat>];
var firstOption = possibleOption[0];
</h:outputScript>
And it works, except that firstOption is undefined although possibleOption gets correctly populated when I check in the console. Maybe a timing problem? Is this even valid JSF, and if so, is there a "blocking" version of ui:repeat or something?
Or which other approach would you recommend?
Aaaah, I got it:
actually I was using:
var chosenOption = '#{empty bean.chosenOption ? possibleOption[0] : bean.chosenOption}';
Which is (now) of course wrong, because I was using possibleOption[0] inside the EL expression headbang
Sorry, one should always post the actual code I guess, not some dumbed down showcase ;)
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:
Get formatted HTML from CKEditor
(12 answers)
Closed 9 years ago.
I'm using CKEditor in my web app, but I don't know how to get html content from it.http://cksource.com/ckeditor
I searched online found one said using getData() method, but there is no getData() method after typing dot after the controler. Can anyone give me a sample code to get html from CKEditor controller? Thank you in advance.
To get htmlData from editor you should use the code snippet bellow:
var htmldata = CKEDITOR.instances.Editor.document.getBody().getHtml();
If this solution won't work, check if you have BBCode plugins installed.
getData() is part of the javascript API.
It seems that you are trying to do it at the server side, so you should check the specific API of whatever wrapper you are using, or just check the value in the form posted data.
Not sure how you're implementing usage of the CKEditor.
If you're replacing a textarea using CKEDITOR.replace( 'NameOfTextarea', this should work:
CKEDITOR.instances.NameOfTextarea.on( 'instanceReady', function( instanceReadyEventObj )
{
var editorInstanceData = CKEDITOR.instances.NameOfTextarea.getData();
alert( editorInstanceData );
});
Replace "NameOfTextarea" with the name of your textarea, it's used to name the editor instance.
It's a good idea to put it inside the "on instanceReady" function so you don't get an undefined error.
Joe