Hi I have a requirement of printing the value is the popup,
I have used the below code
"code"
$('#warning').html('<p style="font-size: 12px;padding-top: 13px;">The updated list value is <p>' + var11);
but i wanted the value 500 to be displayed next to the text in the same line
can some one help me out with this
Thanks
Just need to concenenate with + inside the <p> tag.
var var11 = 500
$('#warning').html('<p style="font-size: 12px;padding-top: 13px;">The updated list value is ' + var11+'<p>' );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="warning"></div>
Hope this helps
Just add the variable to the text of <p> tag also you can use Template strings:
$('#warning').html(`<p style="font-size: 12px;padding-top: 13px;">The updated list value is ${var11} <p>` );
Get your variable inside the p tag :
$('#warning').html('<p style="font-size: 12px;padding-top: 13px;">The updated list value is' + var11 + ' <p>');
Related
I have some autogenerated html code highlighting some texts in my angularJS app. The line generating the html code is this one:
var replaced = original.replace(regEx, '<span style="background-color: red;">' + replacing + '</span>');
line[key + 'HL'] = replaced;
But writing this on template
<div><p>{{line.codeHL ? line.codeHL : line.code}} {{line.price}}</p></div>
shows this:
<span style="background-color: red;">GD5AU211</span> 102€
How can I force the evaluation of html code inside a string?
Also let's just say I can't use document.getElementById() for reasons.
Refer to this link. This may be what you seek:
AngularJS : Insert HTML into view
To enable html insertion into view you have to define html as trusted data using $sce.trustAsHtml()
Hope this would help.
if you are using angular 4 then use innerHTML
<div><p>
<div [innerHTML]="line.codeHL ? line.codeHL : line.code">
</div> {{line.price}}
</p></div>
if you are using angular 1 then use ng-bing-html
<div><p>
<div ng-bind-html="line.codeHL ? line.codeHL : line.code | cust">
</div> {{line.price}}
</p></div>
now create a cust filter like this
.filter('cust',function($sce){
return function(html){
return $sce.trustAsHtml(html)
}
})
Add <xmp> tag before your html that has to be displayed as text.
var replaced = original.replace(regEx, '<span style="background-color: red;"><xmp>' + replacing + '</xmp></span>');
I have the following HTML:
<div class="dropdown" data-offers-filter-segments="">
<button class="toggle--dropdown" name="toggle-segment-cagetories-list">
<span class="dropdown__label" id="dropdown__labelAllCategories">All Categories</span>
</button>
<div class="dropdown__content" hidden="hidden">
Which renders a dropdown, when clicked a new class is appended which is called is-dropped so the parent div will look like this once its been clicked on class="dropdown is-dropped"
Now using Javascript I'm trying to retrieve name="toggle-segment-cagetories-list" which we will use within DTM (Adobe Tag Manager) as an eVar value but I'm uncertain how I go about retrieving that name value, so far I have the following javascript:
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
if(hasClass(document.getElementsByClassName('dropdown')[0], 'is-dropped')){
// Now get the name value ?
}
else {
alert("false");
}
Now I'm pretty new to javascript so if someone can shed some light in how I go about getting the name value and passing it to DTM I would highly appreciate it.
use document.querySelector:
<div class="dropdown is-dropped" data-offers-filter-segments="">
<button class="toggle--dropdown" name="toggle-segment-cagetories-list">
<span class="dropdown__label" id="dropdown__labelAllCategories">All Categories</span>
</button>
<div class="dropdown__content" hidden="hidden">
<script>
var button=document.querySelector('div.is-dropped button.toggle--dropdown');
var name=button&&button.name||'';
alert(name);
</script>
if you want to use your own data-attributes, you need start your attribute name with 'data':
<button class="toggle--dropdown" data-name="toggle-segment-cagetories-list">
In order to retrieve the value of the attribute, you can do as shown in the example below:
var article = document.getElementsByClassName('toggle--dropdown');
article[0].dataset.name // article[0] because getting elements by className returns an array
I'm trying to get the parent's attribute value and display that as text inside the child's div. It's returning as undefined.
My HTML:
<div class="info" data-info="whatever I want displayed" ></div>
My jQuery:
$(function(){
var $info = $(this).parent().attr("data-info");
$('.info').prepend($('<div class="new-info" >' + $info + '</div>'));
});`
My desired result:
<div class="info" data-info="whatever I want displayed" >
<div class="new-info" >whatever I want displayed</div>
</div>
There is no parent. And $(this) on the first line is not refer to info element. You need to select .info element first and followed by prepend like so :
$(function(){
// and if you already use html5 data attribute
// you can just select it value by using .data()
var
$info = $('.info'),
dataInfo = $info.data("info");
$info.prepend('<div class="new-info" >' + dataInfo + '</div>');
});
I don't really know why I can't do this apparently silly thing.
I have a template that parses dynamically a js file with an html textarea only with the class attribute.
What I want to do is to add name attribute to it so I can get it with $_POST in php.
So far I have tried:
var txt = $('.note-codable');
txt.prop('name','description');
$('.note-codable').attr('name','description');
and other options that doesn't seem to work.
This is html that is added dinamycally:
<div class="note-editor">
//other divs
<textarea class="note-codable"></textarea>
</div>
when I do (in order to TRY the code):
var txt = $('.note-codable');
alert(txt);
the result is [object] [object]
what am I missing? why is attr name not writing?
Try this, tell me if there is anything else I can do.
window.onload = function(){
//get the element
var txt = $('.note-codable');
//set the name attribute
txt.name = 'yourName';
//get the name and console.log it
console.log(txt.name);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="note-editor">
//other divs
<textarea class="note-codable"></textarea>
</div>
You seem to be doing it right... Here's an example for clarity.
$(function() {
var $el = $("#example");
var $out = $("#output");
$out.append("<p>Name is: " + $el.attr('name') + "</p>");
$el.attr('name', 'description');
$out.append("<p>Name is: " + $el.attr('name') + "</p>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="example"></textarea>
<div id="output"></div>
Your code is working on my end: the name is set dynamically. You are getting [object object] from the alert because you are returning the textbox itself, not its contents or the value of its name attribute.
Assuming you want the name put into the textbox instead of added as an attribute, you should set it with txt.val('your name here').
var txt = $('.note-codable');
txt.attr('name', 'description');
console.log(txt.get(0));
txt.val(
'html: ' + txt.parent().html().trim() + '\n' +
'name: ' + txt.attr('name')
);
textarea {
height: 100px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="note-editor">
<textarea class="note-codable"></textarea>
</div>
If you alert an object(like what the jQuery selector will return) it will not give display the information. It will always read [object Object]. Using console.log would be a better way to read through it. Alternatively, if just want to test if the name attribute is in fact applied, this should the trick.
var txt = $('.note-codable').attr('name');
alert(txt);
Assuming the jQuery was successful, it should read description
Not sure why I cannot get this to work. Tried a few permutations now.
I have built a JSFIDDLE here.
I cannot get this jQuery to return the inner HTML for the target element. Is it because of the number child elements in the hierarchy?
jQuery:
modalContentLeft = 'Project: ' + $('#mob-' + uuid + ' div.project-name').html();
I have also tried using .find() without success. Thanks for any help.
I found your fault:
you are closing the div tag of the id before it gets to the name.
You are closing it before the class <div class="mobile-item-row clearfix">, so the selector does not find the children ".project-name" in it,because there is none. if you remove the closing tag and close it at the end of the HTML and change the syntax of the selector a bit, it works.
Project: ' + $('#mob-'+uuid+' .project-name').html()
Here you go: https://jsfiddle.net/ucupbtsf/5/
First your post here and your jsfiddle don't reflect the same...
JsFiddle :
modalContentLeft = 'Project: ' + $('#mob-' + uuid + ' div div .project-name').html()...
Here :
modalContentLeft = 'Project: ' + $('#mob-' + uuid + ' div.project-name').html();
Then, your html is :
<div class="mobile-item-row-first first-row clearfix" id="mob-6c985947-c68a-4f5b-9ebe-0d488b696f0d">
<div class="project-client pull-left">
<i class="ion-ios-people ion-fw" data-original-title="" title=""></i> Sienna Cremin
</div>
</div>
which does not reflect your jquery selector :
$('#mob-' + uuid + ' div div .project-name').html()
Seems you closed too much div, so your .project-name div is not in the #mob-id div.
$(elem).html() will get you all the content of the div (including the <i></i> part). If you only want the text, you can go for $(elem).text().