nTuply nTuply - 4 years ago 849
Javascript Question

How to change text in span using Jquery

I'm pretty new to Ajax and JQuery. I'm trying to change the value of a span when I type text in an input box but nothing is working(i.e the value in the span is not changing). After some research around StackOverflow, I found out that I should either use the

text()
or
html()
of JQuery to change the value but it still does not change. I'm not sure where I went wrong. Below is my code:

Html of Input Box:

<input class="amnt" id ="Red:XL:50:24.55" type="text">
<span id="50-Red-24.55">0(This text is not changing)</span>


Here's my JQuery. It first performs an Ajax(I omitted this part) and then after Ajax success, it should change the value of my span:

$( ".amnt" ).keyup(function() {
var split = this.id.split(":");
var color = split[0];
var size = split[1];
var ID = split[2];
var price = split[3];

$.ajax({ //create an ajax request to getData.php
success: function(response){

$("#"+ID+"-"+color+"-"+price).text(price);
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError);
}
});
});


I also tried
$("#"+ID+"-"+color+"-"+price).html(price);
instead of
$("#"+ID+"-"+color+"-"+price).text(price);
but nothig changes on
keyup
.
Can anyone please explain what I'm doing wrong here?

Thanks.

Answer Source

The problem (credits to @adeneo):

In the interpolated selector string, jQuery sees periods (which are perfectly fine ID characters) as class names, so something like "#my.cool.id" would actually select this element:

<div id="my" class="cool id"></div>

and not this one:

<div id="my.cool.id"></div>

The solution:

To avoid that issue, simply escape or replace the period in your price part of the ID with any legal ID character that's not a number or a period or a colon (since you're usign it for splitting), for example, 24X55, 24|55, etc. will all work fine.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download