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>');
});
Related
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>');
i have a variable name value in my javascript code that contain html data.i want to get the data inside form specific id that is inside #myDiv
var value="<div >
<p class="">Hi cname#gmail.com</p>
<br/>
<br/>
<br/>
<div id="myDiv">
sgdhsagdhagh
dhsajdgasj
cjzjcg
</div>
</div>"
Thanks
You should create a DOM element, then traverse up to it and get html() or .text()
var value = '<div >\
<p class="">Hi cname#gmail.com</p>\
<br/>\
<br/>\
<div id="myDiv">\
sgdhsagdhagh\
dhsajdgasj\
cjzjcg\
</div>\
</div>';
alert($(value).find('#myDiv').html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If you need to get parent element, then use
alert($('<div />', {html: value}).find('#myDiv').html())
How about you do like this?
var variable = "stuff n things";
document.getElementById( 'myDiv' ).innerHTML = variable;
Thats the native way :)
EDIT:
if you want to get the data you just do like this:
var variable = document.getElementById( 'myDiv' ).innerHTML;
That will give you the markup of whats inside the div.
Or use document.querySelector("#myDiv") to get the first match on the selector.querySelectorAll returns array.
You can use the HTML of the value variable to create an jQuery object. From this object you can search for the element with the id, and get its HTML content:
var html = $(value).find('#myDiv').html();
console.log(html); //sgdhsagdhaghdhsajdgasjcjzjcg
Or a pure javascript implementation:
var el = document.createElement('div');
el.innerHTML = value;
var html = el.getElementById('myDiv').innerHTML;
console.log(html); //sgdhsagdhaghdhsajdgasjcjzjcg
Using plain Javascriptuse:
document.getElementById("myDiv").innerHTML;
Using jQuery:
$("#myDiv").html();
There are Two ways- Angular way-
var elem = angular.element(value);
var innerDive=elem[0].getElementById('myDiv');
var text= angular.element(innerDive[0]).innerText;
Jquery-
var text= $(value).find('#myDiv').text();
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
I generate dynamically a toc for elements of class=faqQuestion.
The answer resides in a class=faqAnswer element which is hidden by default.
By clicking on class=faqQuestion entry it will show up with
$(this).next(".faqAnswer").slideToggle(300);
Everything works as expected.
What I want: by clicking on a toc link i will jump to the target faqQuestion element and show the corresponding faqAnweser element.
The way I generate the toc:
$(document).ready(function(){
var url = window.location.pathname;
$('<ol />').prependTo('#toc')
$(".faqQuestion").each(function(i) {
var current = $(this);
current.attr("id", "entry" + i);
$("#toc ol").append("<li class=\"faqToc\"><a id='link" + i + "' href='" + url + "#entry" +
i + "' entry='" + current.attr("tagName") + "'>" +
current.html() + "</a></li>");
});
This is what I tried, which will jump to the selected faqQuestion but the faqAnswer element is still hidden.
$(".faqToc").click(function(event){
$(this).next(".faqAnswer").slideToggle(300);
});
My problem is this - at least I think so - so I tried something like - which results in "undefined"
var url = $(this).prop("href");
alert(url);
Trying attr instead of prop returns also "undefined".
Can you point out my problem?
I'm trying to improve my Javascript and jQuery know how, so I don't want to use a toc-plugin.
Update: HTML looks like this:
<div id="toc">
<ol>
<li class="faqToc">
...
</li>
<li class="faqToc">
...
</li>
</div>
<p id="entry0" class="faqQuestion">...</p>
<div class="faqAnswer" style="display: none;">...</div>
<p id="entry1" class="faqQuestion">...</p>
<div class="faqAnswer" style="display: none;">...</div>
A very simple way would be to use the index() method since relationship between the TOC elements and the question/answer elements is 1 to 1.
$(".faqToc").click(function(event){
var index=$(this).index(); /* zero based index position of element within it's siblings*/
/* toggle answer element with same index */
$(".faqAnswer").eq(index).slideToggle(300);
});
jQuery API Reference : index()
I have this html code:
<div class="category" id="154"> Category </div>
<div class="category2" id="156"> Category2 </div>
<div class="category3" id="157"> Category3 </div>
<div class="category4" id="158"> Category4 </div>
<input type="text" />
So in example if I write a id in text box, how to select div .category with this ID and get inner HTML text. With jQuery
so you only need to use the ID as this is a unique value (or should be)
var html = $("#154").html();
NOTE: If you do have duplicate ID values in use then it is important to note that JQuery will only select the first one.
if you want to do this when a textbox value is entered you could do this on the textbox change event...
$("input").change(function(){
var id = $(this).val();
var element = $("#" + id);
if(element){
var html = element.html();
//do something with html here
}
});
NOTE: you may want to put an ID value on your textbox to ensure you get the correct control
Although I strongly suggest you find a way around using duplicate ID values, you could have a function like this to get the DIV you want...
function GetContent(className, id) {
var result = null;
var matchingDivs = $("." + className);
matchingDivs.each(function(index) {
var div = $(matchingDivs[index]);
if (div.attr("id") == id) {
result = div.html();
}
});
return result;
}
Click here for working example
I recommend you give the textbox an ID, in case you add other textboxes to the page.
But if you only have the 1 text input, the following would work:
var id = $('input:text:first').val();
var innerHtml = $('#' + id).html();
Here is a jsFiddle that will alert the html using this technique whenever the text in the textbox changes.
$("#id.class")
will select the necessary element by both class and ID (replacing id and class with their respective names, of course).
Adding .html() to the end will get you the content.
i.e:
$("#id.class").html()