I want to update the content of a span like so:
$('#myElement').text('£' + parseFloat(myPrice));
But the HTML does not render the £ correctly when updated. There are other instances where I want to use a different symbol as well.
Is there a way around this?
You need to use the html() method as text() encodes the value. Try this:
$('#myElement').html('£' + parseFloat(myPrice));
$(function(){
var myPrice = "403";
$('#price').html('£' + parseFloat(myPrice));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<p id="price"></p>
Related
I made a custom attribute to add a title to each links.
And here is the jQuery code
$('#ex1,#ex2').append('<span class="title">'+$(this).attr("nameOf")+'</span>');
But the link displays as undefined. How can I fix this.
Iterate over the element tags & append to it
$('a').each(function(i, v) {
$(this).append('<span class="title">' + $(this).attr("nameOf") + '</span>');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
the this in your example is window, it does not know that it is supposed to be a reference to a link. In order to use this, you would need to use a function inside of append() and return the string.
$('#ex1,#ex2').append( function() { return '<span class="title">'+$(this).attr("nameOf")+'</span>'});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
And if you do not want to use JavaScript at all and have the text show up in the link, there is always a CSS Solution.
a[nameOf]::before {
content: attr(nameOf)
}
You can achieve the same as below using loop:
$('[nameOf]').each(function(){
$(this).append('<span class="title">' + $(this).attr("nameOf") + '</span>')
});
but as per w3c rules you can not use nameOf attribute in a tag, So you can use use data-nameof instead.
in HTML you can't create a custom attribute in camel case. if you want to add more words to your custom attr, you need to add a - symbol. so, for your case, do.
later, for a search, I suggest you use the camel case.
$(element).attr('nameOf');
I have a piece of string:
'Dow<br> <span class="table-sub-header">Value</span>'
I want to replace 'Value' inside the span with an arbitrary variable. I know that the span class will be there every time.
I've tried things like:
var s = 'Dow<br> <span class="table-sub-header">Value</span>';
And then doing a replace with something like this as the regex:
/<span class="table-sub-header">*</span>/
But it looks messy. Is there a clean way of doing this?
Edit: 'Value' in this case is arbitrary. I don't know what it is and I wanted a general method to replace what is in the span.
If you are working in browser, you may try put s in some element innerHTML and replace it as it in dom do
var s = 'Dow<br> <span class="table-sub-header">Value</span>';
t = document.createElement('div');
t.innerHTML = s;
t.querySelector('.table-sub-header').textContent = 'Something Else';
t.innerHTML // 'Dow<br> <span class="table-sub-header">Something Else</span>'
BTW, your regexp should be something like /<span class="table-sub-header">(.*)<\/span>/
Have you tried the replace string method?
var s = 'Dow<br> <span class="table-sub-header">Value</span>';
s = s.replace("Value", "New Value");
Yes, you can use jQuery for this.
var s = 'Dow<br> <span class="table-sub-header">Value</span>';
var div_wrapper = '<div style="display:none;">'+s+'</div>';
$(document).ready(function(){
$('body').append(div_wrapper);
var new_value = 'newvalue'; // an arbitrary variable
$('.table-sub-header').text(new_value);
console.log($('.table-sub-header').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
</body>
</html>
You can dynamically replace what is in the span tag by using JavaScript or any JavaScript library. For example using Javascript you can use a class selector to select the span and set the inner html to whatever value you want based on a condition or logic of some sort. You can also use Jquery .text()
refer to the links below
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
http://api.jquery.com/text/
I want to change the message in a <span> using JavaScript/jQuery.
<span id="access-code-error" class="rsvp required-fields"> </span>
I am using the following code to replace the text which will be added to this <span>:
$("span:contains('I need <br>this text to be replaced')").text( "hello<br> How r u" );
But this isn't working. What do I need to do differently?
You can use the jQuery text() method like below:
$("#access-code-error").text("Your message");
Working fiddle:
https://jsfiddle.net/6wcpLpbw/
Using a html tag inside a :contains will not work properly.
.text() should be used only with plain text not with html tags inside it.
You should use .html() instead of .text().
Try something like this:
$("span:contains('I need this text to be replaced')").html("hello<br> How r u");
Note: ID should be used only once in a page.
To change the error message of your access-code-error span, you can do the following:
JavaScript:
var errormsg = document.getElementById("access-code-error");
errormsg.innerHTML = "hello<br> How r u";
jQuery:
1) You can use the html() method as shown:
$("#access-code-error").html("hello<br/> How r u");
2) You can also use the text() method in a similar way:
$("#access-code-error").text("hello<\br/> How r u");
This first html('') will remove current text from the span and the other one will add the text you want.
:)
$('#access-code-error').html('').html('hello<br> How r u');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="access-code-error" class="rsvp required-fields">This need to be Replaced </span>
Since you have provided the id of the span, you can use that as shown:
$("#access-code-error").text("Your message");
I am pretty new in JQuery and I have the following problem.
I have create this JQuery function that when the user select a file into an input tag having id=rendicontoAllegato it put the name of this file into an hidden div having id=nomeDocumentoRendicontazione into my page
$(document).ready(function() {
$("#rendicontoAllegato").change(function() {
alert("DOCUMENTO dopo selezione: " + $("#nomeDocumentoRendicontazione").text());
var selectedFileName = $("#rendicontoAllegato").val();
$('#nomeDocumentoRendicontazione').append(selectedFileName);
});
});
It works fine but the only problem is that if I first select something asfile1.txt and then select another file as file2.txt into the div having id=nomeDocumentoRendicontazione I will have the concatenation of the 2 files name.
So I will have something like file1.txtfile2.txt and it is not good for me.
How can I replace the value of the div having id=nomeDocumentoRendicontazione instead to append a new value inside it?
You can use the .text() fn if you are dealing with with your data to be inserted as text or .html() fn if you are dealing with html to be replaced
$('#nomeDocumentoRendicontazione').text(selectedFileName);
Or
$('#nomeDocumentoRendicontazione').html(selectedFileName);
Use html() instead of append().
$(document).ready(function() {
$("#rendicontoAllegato").change(function() {
alert("DOCUMENTO dopo selezione: " + $("#nomeDocumentoRendicontazione").text());
var selectedFileName = $("#rendicontoAllegato").val();
$('#nomeDocumentoRendicontazione').html(selectedFileName);
});
});
You have to use
$('#nomeDocumentoRendicontazione').html(selectedFileName);
it will replace the already present HTML of that. OR you can use
$('#nomeDocumentoRendicontazione').text(selectedFileName);
it will do the same but append your data as text.
Consider a input element
<input id="meta[152][value]" type="text" />
Here the input field is dynamically generated. I need to select that field. So I used,
alert($('#meta[152][value]').val());
But this seems to be invalid. After searching I found, that the "square brackets" need to be escaped like #meta\\[152\\]\\[value\\]
So how to do that ?
I currently use this code,
var id = "#meta[152][value]" // (I get this value by another method) I need the escaping to be done here. So that i can use as
/** I need the value of id to be escaped using regex,replace or any other method
to get #meta\[152\]\[value\]
and not manually **/
alert($(id).val());
Your suggestions will be helpful !
The following should work:
alert($('#meta\[152\]\[value\]').val());
or
var id = "#meta\[152\]\[value\]";
alert($(id).val());
Working Example
Conversion Function:
function ConvertValue(id)
{
var test = id.replace(/[[]/g,'\\\\[');
return "#" + test.replace(/]/g,'\\\\]');
}
Conversion Example
If you feel more comfortable without escaping you also use the attributes selector and search for the element with that id like this: $("[id='meta[152][value]']")
The simplest way is just to use the regular getElementById, which requires no escaping:
document.getElementById("meta[152][value]").value;
this shoudl work for you, you almost had it:
$(document).ready(function() {
var id = "#meta\\[152\\]\\[value\\]";
alert($(id).val());
});
Um, just put the escaped value right in your string.
var id = "#meta\\[152\\]\\[value\\]";
See it working here
You can use the _.escapeRegExp method from the Lodash library.
console.log($('#' + _.escapeRegExp('meta[152][value]')).val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<input id="meta[152][value]" type="text" value='Test' />