How to change text in span using Jquery

Question

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(ie 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 1

Instead of concatenating different items to create the Id string, It would be better and clean, if you use relative selectors in your code.

Add a css class to your message span and wrap this in a container div. Also instead of keeping your data inside the Id value, you may keep those in HTML 5 data attributes.

<div class="amtContainer">
  <input class="amnt" data-size="XL" data-price="24.55" type="text">
  <span class="amtMsg">0(This text is not changing)</span>
</div>

And in your script, use the closest() method to get a reference to the outer container div, and then use find() method to get to the message span.

$( ".amnt" ).keyup(function() {
    var _this= $(this);
    var val=_this.val();

    var price=_this.data("price");

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

           _this.closest(".amtContainer").find(".amtMsg").text(price);
        },
        error:function (xhr, ajaxOptions, thrownError){
         alert(thrownError);
        }
    });
});

Answer 2

First create the id concatenating the variables. Then replace . with \\\\. and use the modified id to select the span element. Then use .html() to change text in the span.

You can use this function to escape css selector characters from your id string

function jq( myid ) {

    return myid.replace( /(:|\.|\[|\]|,)/g, "\\$1" );

}

Reference: https://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/

Answer 3

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.