Changing the contents of an input/div/span etc - javascript

I add a .listen class to various elements on my page, could be a button, could be an input, div, span etc.
$('.listen').on('click', this._init.bind(this));
In the method I wish to replace text in the element that was clicked.
p._init = function(e){
$(e.currentTarget).val('new data');
};
The above works for input elements, but not for things like divs. Is there a way to change the data on any type of elements or will I have to use a switch to test for the variations?

You could get a little fancy and check if the element has a value property, and change methods based one that, something like
p._init = function(e){
$(e.currentTarget)['value' in e.currentTarget ? 'val' : 'text']('new data');
};
FIDDLE
Unless you're adding value properties to elements that don't natively have value properties, that should work.

For input it's val() for divs and stuff it's text().
If you wanna do everything with a single event, you can do something like:
$('.listen').on(...
{
if($(this).is('input'))
{
use val()
}
else
{
use text()
}
}

Try this DEMO
$(document).ready(function(){
_init = function(e){
if(e.target.nodeName=='SPAN'||e.target.nodeName=='DIV')
$(this).text('new data');
else if(e.target.nodeName=='INPUT')
$(this).val('new data');
};
$('.listen').on('click', _init);
});

Related

Jquery remove element

I am basically trying to print the value of a button in the div with list class if the button is selected. Also remove the same value wwhen it is deselected. I am able to print the value successfully but not able to remove it. Could somebody please help me out with it.
var buttonSelect = $(".btn").click(function() {
if ($(this).hasClass('active')){
$(".list").append(this.value + " ")
}
else {
$(".list").remove(this.value)
}
});
You should rather append the content along with html element like span:
$(".btn").click(function() {
if ($(this).hasClass('active')){
$(".list").append('<span class="newval_'+this.value+'">'+this.value + "</span>");
}else{
$(".list").find('.newval_'+this.value).remove();
}});
The parameters from .remove() is a selector, just having a value in there that contains the content of the element you want to remove will not work. For example if I had this:
<li class="list">test</li>
Doing $(".list").remove("test") will not remove it. You will probably want to use the :contains selector (since you may have the value with spaces at the end). So in the example above doing $(".list").remove(":contains('test')") will remove the element. You can do the same thing in your case:
$(".list").remove(":contains('"+this.value+"')");
If you want to remove the element itself along with everything in it, just use jQuery’s remove() method.
$(document).ready(function() {
$("button").click(function() {
$("div").remove(); //remove Div element
});
});
You can see an example here: How to Remove Elements from DOM in jQuery

Change the text of a textarea, from the selected item in a select

I have this function that successfully populates a textarea with text from a select, when the select is changed.
function Favourites()
{
$('select#favourites').change(function() {
var text = $(this).find('option:selected').attr('data-post');
$('textarea#post').text(text);
});
}
Problem is if I change the select, delete the contents of the textarea, and change the select again, it no longer populates the textarea.
Any idea why please?
You need to use .val() instead of .text():
$('#post').val(text);
Demo: http://jsfiddle.net/jtbowden/HaZWC/
.text() essentially sets the text between the tags <textarea></textarea>, which sets the default value of the textarea. This is fine as long as the user has not typed anything in the text box. But, just like when you do <textarea>My Text</textarea> in html, the default value is always overridden by what the user inputs. Because this is an input, the .val() function sets the actual value of the input, which overrides the default value.
Is there a reason that the change function is inside the Favourites function? You simply need it in your DOM ready function like this:
$(document).ready(function(){
$('select#favourites').change(function() {
var text = $('option:selected', this).attr('data-post');
$('textarea#post').val(text);
});
});
I've also changed:
the .text to .val which will always change a form field value correctly
removed find and replaced with method for searching inside this: $('option:selected', this)
Here's a jsFiddle for you: http://jsfiddle.net/sp5L4/2/
Try using something like on() (the new live()), also, use val() and not text(). might be able to use data() too
$(document).on('change', 'select#favourites', function() {
var text = $(this).find('option:selected').data('post');
$('textarea#post').val(text);
});
Use the 'on' method to attach/listen to event handlers throughout the DOM.
$('select#favourites').on('change', function(){
var text = $(this).find('option:selected').attr('data-post');
$('textarea#post').text(text);
});

getting individual atrributes while selecting a class with JQuery

I'm new to javascript and JQuery, and I'm working in a small project with JSP.
I create a grid dynamically with JSP and I added some buttons wich class is "select" and in the alt attribute I set the current row index. That works perfectly, I'm trying to set the onclick dynamically. This is my code
$('.select').click(function (){
alert($('.select').attr('alt'));
}
I want to each button to show its own index, but that code shows just the first index in each button. I've searched how to do it, but nothing comes out.
Is there a chance to do what I want?
change this line as:
alert($(this).attr('alt'));
When jQuery calls your event handler it sets this to be the DOM element in question, so try this:
$('.select').click(function (){
alert($(this).attr('alt'));
});
If you need to access DOM element properties you can then get them directly, e.g.:
alert( this.id );
this.value = "test";
If you need to use jQuery methods on the element you need to pass it to the jQuery function first, e.g.:
$(this).hide();
$(this).css("color","red").slideDown();
$('.select').click(function (){
alert($(this).attr('alt'));
});
Change
alert($('.select').attr('alt'));
by
alert($(this).attr('alt'));
Now you select the attr alt of the button lauch the event.
Not sure if that's what you're looking for but...
$('.select').click(function() {
$('.select').each(function() {
$(this).attr('value', $(this).attr('alt'));
});
});
This'll have every button "show" the value stored within their alt attribute when you click one button.
By the way, if you're using 1 button per row, you'd probably better go with index().

get the content when the div does not have the id of the div ... only has the class

Good afternoon. I have a table listing days. These days are within a <div>, but I do not have an ID for the <div>. I tried to get the contents of the <div> but it still fails, as it does when I try to get the value.
This is an example of the <div> I'm trying to get the class of.
<div class="fc-day-number">6</div>`
I'm trying to get this value with the Seguito function but am not getting the value of the content div ..
$(".fc-widget-content").click(function () {
var diaSelecionado = $('.fc-day-number').val();
alert(diaSelecionado);
});
});
Instead of val(), use .html() to return the element's innerHTML property:
$(".fc-widget-content").click(function () {
var diaSelecionado = $('.fc-day-number').html();
alert(diaSelecionado);
});
});
val() is used to get the value of form elements, you probably want html():
$(".fc-widget-content").click(function () {
var diaSelecionado = $('.fc-day-number').html();
alert(diaSelecionado);
});
});
From jQuery documentation:
The .val() method is primarily used to get the values of form elements such as input, select and textarea.
In an HTML document, .html() can be used to get the contents of any element.
You will want to change the $('.fc-day-number').val(); to $('.fc-day-number').html();

why this javascript code is not working?

Do you know why this is failing, I mean alert is working (it shows me that if found the button) but text or background is not changed:
$('input[type=button]').click( function() {
var button=document.getElementsByName("contactme");
alert(button.length + " elements!");
button.value="New Button Text";
button.style.backgroundImage="url(some_real_gif);"
});
HTML:
<input type="button" name="contactme" value="test"/>
Thanks...
I have to use plain java script not jQuery..
You're setting value and style of a NodeList. getElementsByName can retrieve multiple elements, as the name attribute does not have to be unique in the document (the clue's in the name!) Setting these has no effect -- it doesn't affect the properties of the element(s) within the NodeList.
Either loop through the element(s) manually (using a for loop) or fully use jQuery:
$('input[type=button]').click(function () {
var buttons = $('input[name="contactme"]');
alert(buttons.length + " elements!");
buttons.val("New Button Text");
buttons.css({backgroundImage: "url(some_real_gif)"});
});
See the jQuery API:
val
css
attribute-equals selector ([name="value"])
It looks like var button=document.getElementsByName("contactme"); would return an array of elements. Try:
var button=document.getElementsByName("contactme")[0];
getElementsByName will return a nodeList but value and style are properties of HTMLElementNodes. You have to loop over the list to get them.
$('input[type=button]').click(function() {
$("#contactme").val('New Button Text').css('background-image', 'url(some_real_gif)');
});
You would need to make sure the button id matches the name...
Because button is a list of elements (even if it is a list of one)
What you can do is use button[0].value and button[0].style.background
Or use a jQuery solution:
To change only clicked button:
$('input[type=button]').click( function()
{
$(this).val("New Button Text");
$(this).css('background-image','url("some_real_gif")');
});
To change all buttons:
$('input[type=button]').click( function()
{
$('input[type=button]').each(function(){
$(this).val("New Button Text");
$(this).css('background-image','url("some_real_gif")');
});
});

Categories

Resources