How to get the value of an html attribute - javascript

I have the following jquery code :
$j = jQuery.noConflict();
function displaySelected(elem){
var value = $j(elem).find(".columnToHide").html();
console.log(value);
}
The out put of this is : <div class="hiddenId" data="a05o000000V88VFAAZ"></div>.
However, I would like to only get the value in the data tag i.e. the id. I know you can do something like this..
.html("<div class='hiddenId' data='a05o000000V88VAAAZ'></div>")
but this doesn't strip the tags. Any help please

Use jquery's .attr() method. So: $j(elem).find(".columnToHide").attr("data")

Use jQuery's data method to retrieve the value. (Your data attribute should probably take the form of data-name if you have control over that.)

This line will drill down to the content you want:
$(value).attr('data')
To put in context of the rest of your script:
$j = jQuery.noConflict();
function displaySelected(elem){
var value = $j(elem).find(".columnToHide").html();
console.log($(value).attr('data')); // a05o000000V88VAAAZ
}

$j = jQuery.noConflict();
function displaySelected(elem) {
var value = $j(elem).find(".columnToHide").attr("data");
console.log(value);
}

Related

Get value of custom atrribute in javascript

I have this code
var elem = document.getElementById('EMM');
<span id="EMM" data-var="MM"></span>
Problem is I want to access the value of data-var attribute in elem in JavaScript, something like elem.attributevalue('data-var')
Use getAttribute
var elem = document.getElementById('EMM');
alert(elem.getAttribute('data-var'));
<span id="EMM" data-var="MM"></span>

getting id of a input using id from another element using jquery

I'm trying to get the id of an input using jquery. What I do is I get the id of a button I click, then I concatenate the string to get the id of the element I want to have. But when I get the var picloc to show, it says undefined. How do I get the id of the hidden input?
$('.photo-frame').click(function (){
var id = this.id;
var picloc = $('#'+id+'_location').val();
$('#picture-selected').html(id);
});
<span class="photo-frame" id="<?php echo $filetitle2;?>">
</span>
<input id="<?php echo $filetitle2;?>_location" type="hidden">
If the hidden element is just the next of span in DOM then You can use following script.
$('.photo-frame').click(function (){
var hidden_element = $(this).next('input:hidden').val();
});
Try this:
$('.photo-frame').click(function (){
var id = $(this).attr('id');
var picloc = $('#'+id+'_location').val();
$('#picture-selected').html(id);
});
var id = this.id;
has some problems.
this refers to the document's itself. You should surround it with a $() in order to point the clicked element. And I do not know if [object].id is usable.
Change the line as the following.
var id = $(this).attr('id');
Are you sure to use the above block of codes inside the $(document).ready(function(){ ... }); or the page itself.
You can try this:
var currentId = $('#element').attr('id');
This will only work provided that you have a valid jQuery object $(this), eg:
var currentId = $(this).attr('id');

Select element from Jquery post return

I am trying to select an element from jquery post returning data. String is returning but when I try to select an element from returning html string, selection is always null. This is a userscript which is being loaded with greasemonkey.
refresh();
function refresh(___id,___action,___page){
$.post("http://www.example.com", {auction_id:___id,action:___action,page:___page}, function(bidpage){
var auction_id = $("#auction_id", bidpage).val();
console.log(auction_id);
});
This post returns this data
<html><head></head><body><input type="hidden" name="auction_id" id="auction_id" value="8583949"></body></html>
But auction_id is always null. Cant find any solution to that. Thank you for your helps.
This is because you get bidpage as string. You need to convert it to HTML first:
var auction_id = $("#auction_id", $( bidpage ) ).val();
As by jQuery API [context] should be DOM Element, Document, or jQuery.
COMMENT:
Seems like jQuery strips <html> and <body> elements so you need to use:
var auction_id = $( bidpage ).val();
you could try adding your post data to a div:
<div id="appendpostdatahere"></div>
function refresh(___id,___action,___page){
$.post("http://www.example.com", {auction_id:___id,action:___action,page:___page},
function(bidpage){
$('#appendpostdatahere').html(bidpage);
var auction_id = $('#auction_id).val();
console.log(auction_id);
});
}

How to render a javascript variable in an HTML attribute using jQuery

Using the following code:
<div class="whatever" addthis:title="Hi, your name is [firstName]"></div>
If I have a JS variable like this
var name = John
How would I replace the "[firstName]" with my JS variable in the first code snippet using jQuery?
It's ok if I need to set the attribute using jQuery to begin with like:
$('.whatever').attr( 'addthis:title', 'Hi, your name is [firstName].' );
Simply run replace on your string...:
var name = 'John';
$('.whatever').attr('addthis:title', function(i, attr){
return attr.replace('[firstName]', name);
});
P.S. Are you sure you want an attribute addthis:title, not simply title? That's invalid HTML! If you want to create your own attributes, prefix them with data-:
<div class="whatever" data-addthis-title="Hi, your name is [firstName]"></div>
Did you try it? Your example code contains all the pieces you need.
var name = "John";
var element = $('.whatever');
var newAttrValue = element.attr('addthis:title').replace(/\[firstName\]/, name);
element.attr('addthis:title', newAttrValue);

problem with .attr() method for getting value of attributes of elements

i have a string like this :
string_data = "<option value='1'>ahmad</option><option value='2'>mohammad</option><option value='3'>ali</option>"
now i want get the value of value attribute of options and alert it. for this i write this :
$(string_data).contents()
.each(function(){
value = $(this).attr('value');
text = $(this).text();
alert(value);
});
but this code return undefined for all of them .
in Addition string_data is a string that i get it from a php script with Ajax via $.post() jQuery method.
i am using jquery 1.6 .
The contents() method retrieves the children of your elements which in your case are the text nodes. Omit that method call to iterate through <option> elements:
$(string_data).each(function(){
value = $(this).attr('value');
text = $(this).text();
alert(value);
});
I'm not sure it's valid to load the string_data like this, when jQuery expects an identifier. It should probably be more like:
$('#some_hidden_select').html(string_data).find("option")
.each(function(){
value = $(this).attr('value');
text = $(this).text();
alert(value);
});
Try:
$(string_data).find("option")
.each(function(){
value = $(this).attr('value');
text = $(this).text();
alert(value);
});

Categories

Resources