I keep getting an uncaught syntex error which I know usually means your code has a missing closing something. I keep failing to see what it is that I am missing.
The idea of the function is that it extracts the a links ID and Text content and add's it to an un-ordered list.
The links have a class of 'ingredient_add' and the unordered list has an ID of 'ingredientsAdded'.
I can't see what I've missed here.
$(document).ready(function() {
$('.ingredient_add').click(function() {
event.preventDefault();
var id = this.id;
var value = this.text();
$('#ingredientsAdded').append("<li id='"+id+"'>"+value+"</li>");
}); //end add to list
}); // end document ready()
The error you should be getting is Uncaught TypeError: undefined is not a function
$('.ingredient_add').click(function () {
event.preventDefault(); <-- what is event?
should be
$('.ingredient_add').click(function (event) {
event.preventDefault();
if you are still getting that error, there is something else going on that is not in your code.
Your syntax looks good. You do need to pass in the event to the function though.
$('.ingredient_add').click(function(event){
event.preventDefault();
Check out Jonathan Lonowskis comment on your .text().
Hello your problem was just a simple mistake.
var value = $(this).text();
Here is a jsfiddle: http://jsfiddle.net/Grimbode/pFLXf/1/
I updated your code. Watch out not to use the same id more than once.
$(document).ready(function(){
var counter = 0;
$('.ingredient_add').click(function(event){
event.preventDefault();
var id = this.id;
var value = $(this).text();
$('#ingredientsAdded').append('<li id="'+id+counter+'">'+value+'</li>');
counter+=1;
}); //end add to list
}); // end document ready()
You missed an argument in click handler function.
$(document).ready(function(){
$('.ingredient_add').click(function(event){
event.preventDefault();
var id = this.id;
var value = this.text();
$('#ingredientsAdded').append("<li id='"+id+"'>"+value+"</li>");
}); //end add to list
}); // end document ready()
Related
I am still new to JavaScript and jQuery, so I am confused as to why the following code is not working as I anticipated. All I am trying to do is save input on a button click (id=recordInput) and display it with another button click (id=displayInput). What I observe is that tempInput is stored, (the code works until that point) but assignment of displayInputs onclick attribute is not executed. My question is, can you not nest a $().click() call inside of another &().click() call?
<script>
$(document).ready(function () {
$('#recordInput').click(function(event) {
var tempInput = $('#testInput').val();
&('#displayInput').click(function(event) {
console.log(tempInput);
});
});
});
</script>
My thinking is this in pseudocode:
assign recordInput onclick attribute to the following function:
store tempInput
set displayInput onclick to alert the tempInput value
what is wrong with my thinking?
NOTE: I did not include any html tags but all of the ids are referenced correctly
It's not working because you have put & instead of $ here
$('#displayInput').click(function(event) {
Fixing this may work, but you shouldn't set event handlers this way. Because every time your first handler function is called it will set an event handler for the second one. You can try with your console.log and you will see that the number of console.log is increasing by every click on #recordInput. So you should better set it like this :
var tempInput;
$('#recordInput').click(function(event) {
tempInput = $('#testInput').val();
});
$('#displayInput').click(function(event) {
console.log(tempInput);
});
I would change
$(document).ready(function () {
$('#recordInput').click(function(event) {
var tempInput = $('#testInput').val();
&('#displayInput').click(function(event) {
console.log(tempInput);
});
});
});
to
$(function(){
var testInput = '';
$('#recordInput').click(function(){
testInput = $('#testInput').val();
});
$('#displayInput').click(function(){
if(testInput !== ''){
console.log(testInput);
}
});
});
You are using & instead of $. Of course, you don't have to format the code exactly like I did.
I'm trying to get the value of a dropdown's option (there is an id on the select markup), when opening the web page
Using
$(document).ready(function() {
$('#cat_list').ready(function(){
var category = $(this).val();
alert(category);
});
});
I get a blank alert.
But Using .change (when selecting something else inside the dropdown) the following code works perfectly with the same function
$(document).ready(function() {
$('#cat_list').change(function(){
var category = $(this).val();
alert(category);
});
});
Finally, this works using basic javascript and it gets successfully the values on open, refresh, on form submit fail, ... etc
$(document).ready(function() {
$('#cat_list').ready(function(){
var e = document.getElementById("cat_list");
var category = e.options[e.selectedIndex].value;
alert(category);
});
});
Thanks for any help on why the first version .ready + $(this).val(); fails
Correct code is:
$(document).ready(function () {
var category = $('#cat_list').val();
alert(category);
});
$(document).ready itself means the whole document (including #cat_list) is ready to be processed. why are you checking if an element is ready or not!!??
you can directly use the value of the element like
$('#cat_list').val();
The documentation says that .ready:
Specify a function to execute when the DOM is fully loaded.
And 3 possible usage cases are:
$(document).ready(handler)
$().ready(handler) (this is not recommended)
$(handler)
However you can actually assign .ready to any element and it will be triggered:
$('#cat_list').ready(function(){
});
This code is fired. BUT this inside .ready function always refers to document.
It will work this way:
$(document).ready(function() {
$('#cat_list').ready(function(){
var category = $('#cat_list').val();
alert(category);
});
});
But actually your code is overengineered:
$(document).ready(function() {
var category = $('#cat_list').val();
alert(category);
});
I want my textArea to resize when the page is fully loaded. I found that
$(document).ready(function() {
// Handler for .ready() called.
});
can help me, so I try to test it and put next code into that function:
$(document).ready(function() {
var element = $('#elementId');
alert(element.value);
});
But when the page is loading, alert shows undefined value of textArea, however there is text inside it.
How can I fetch those value inside ready function?
$(document).ready(function() {
var element = $('#elementId');
alert(element.val());
});
element isn't a DOM element but a jQuery wrapped object, it doesn't have any value property.
Use
$(document).ready(function() {
var element = $('#elementId');
alert(element.val());
});
or
$(document).ready(function() {
var element = document.getElementById('elementId');
alert(element.value);
});
or
$(document).ready(function() {
var element = $('#elementId');
alert(element.get(0).value);
});
You need to use DOM object to use value property and you have jQuery object you need to use val() on it.
$(document).ready(function() {
var element = $('#elementId');
alert(element[0].value);
//or
alert(element.val());
});
I am trying to get the class or an id of the last clicked element. This is what I have based off of what I found here...
HTML
Button
JQUERY
$('.button').click(function () {
myFuntion();
});
function myFunction (e) {
e = e || event;
$.lastClicked = e.target || e.srcElement;
var lastClickedElement = $.lastClicked;
console.log(lastClickedElement);
}
This sort of does what I want, but I am not sure how to go about modifying it so I can get just the class.
I have also tried using this solution but couldn't get it to work with my code.
$('.button').click(function () {
myFuntion();
});
function myFunction(){
var lastID;
lastID = $(this).attr("id");
console.log(lastID);
}
When I do this my console log comes back as undefined. I am probably missing something obvious. Any help is much appreciated. Thanks.
You can pass clicked element as parameter to your function:
$('.button').click(function () {
myFunction(this);
});
function myFunction(element) {
console.log(element);
console.log(element.id);
console.log($(element).attr("class"));
}
UPDATE added jsfiddle
A couple of ways come to mind:
$(".button").click(myFunction);
Should work with the above myFunction.
$(".button").click(function () { myFunction($(this)); });
function myFunction($elem) {
var lastID;
lastID = $elem.attr('id');
$.data('lastID', lastID);
}
In order to get the class-name of the element, assuming you have an accurate reference to the element from which you want to retrieve the data:
var lastClickedElement = $.lastClicked,
lastClickedElementClassNames = lastClickedElement.className;
This does return the full list of all the classes of the element though.
$('.button').click(function () {
myFuntion(this);
});
function myFunction(ele){
var lastID;
lastID = $(ele).attr("id");
console.log(lastID);
}
First Select all possible DOM Elements
var lastSelectedElement = null
$(document).ready(function(){
$("*").live("click",function(){
lastSelectedElement = $(this);
myFunction($(this));
});
});
function myFunction(element) {
console.log(element);
console.log(element.id);
console.log($(element).attr("class"));
}
than you could play with lastSelectedElement by grabbing it's ID or Class with jQuery .attr("ID OR CLASS");
I hope it's stupid, but my head is today right overloaded:) I have this code and I need to store the pointer on the element which is clicked on and pass it to the callback function. Exactly is it a submit button and after correct ajax submit of the form I want to delete content of them. I've tried lot of these parent(),children(),.. combinations, but it does not work:
$("form :submit").click(function () {
var element = this;
$(this).ajaxSubmit(function(payload, element){
$.nette.success(payload);
$(element).parent().children(".addStatusTextArea").val("");
hideMessage();
}
);
return false;
});
The problem is that element is also specified in your parameters for the callback, leave this out, like this:
$("form :submit").click(function() {
var element = this;
$(this).ajaxSubmit(function(payload) { //no element here in params
$.nette.success(payload);
$(element).parent().children(".addStatusTextArea").val("");
hideMessage();
});
return false;
});
When it's in the parameters a more local element is defined, not what you set it to just before. I'm not sure if your relative .parent().children() call is correct (it could be .siblings(".addStatusTextArea") if it is) without seeing your markup...but your main issue is element not being what you want.
Remove the element parameter from the function passed to ajaxSubmit.
i.e.
$("form :submit").click(function () {
var element = this;
$(this).ajaxSubmit(function(payload){
$.nette.success(payload);
$(element).parent().children(".addStatusTextArea").val("");
hideMessage();
});
return false;
});