This question already has an answer here:
Jquery get Name value of hidden field
(1 answer)
Closed 6 years ago.
I have little of an issue writing my script.
$(function(){
$(".wolny").click(function() {
var godzina = this.id;
var minuta = this.name;
alert(godzina + ":" + minuta);
});
Alert should give me output looking like so hour:minute. Instead of that I am getting this: hour:undefined. I really dont know what to do :x
Here's HTML code (php generated)
<div class="col-sm-3 kafelek wolny" name="15" id="9"></div>
Thank's for any help.
A div element doesn't technically have a name attribute. If you want to store a piece of data, store it as a data-* attribute. Something like this:
<div class="col-sm-3 kafelek wolny" data-name="15" id="9"></div>
Then retrieve it as such:
var minuta = $(this).data('name');
Try using .attr() function instead like so:
var minuta = $(this).attr('name');
This works because name in your case is a attribute and not a property. This will work with any random attribute like foo that you may add.
A better way is to add a data attribute like data-name="something" and read it with $(this).data(name).
Working Example:
$(function(){
$(".wolny").click(function() {
var godzina = this.id;
var minuta = $(this).attr('name');
alert(godzina + ":" + minuta);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-3 kafelek wolny" name="15" id="9"> Click me! </div>
Try this instead:
$(function(){
$(".wolny").click(function() {
var godzina = $(this).attr('id');
var minuta = $(this).attr('name');
alert(godzina + ":" + minuta);
});
});
However, if possible, I would recommend using data attributes for your values. Here's an example:
<div class="col-sm-3 kafelek wolny" data-hour="9" data-minute="15"></div>
Then, in the JavaScript, you use "data-hour" and "data-minute" for the attributes instead of "id" and "name" like it is now.
Related
I have a list of products, each one displayed whithin a div like this :
<div data-productSheetId="n" class="productSheet"></div>
My current selector is the following :
var productSheet = $('[data-productSheetId="' + $(this).data('productSheetId') + '"]');
I'm pretty sure i'm doing it wrong, how could i select it properly ?
You can use the .filter() method:
var productSheet = $("div.productSheet").filter(function() {
return $(this).data("productsheetid") == "n";
});
Update:
Thanks to #mplungjan. The data attributes should be all lowercase. Now, when the attribute has hyphens, the camel-case equivalent can be used to read the data:
//<div data-productsheetid="n" class="productSheet"></div>
//use:
.data('productsheetid')
//<div data-product-sheet-id="n" class="productSheet"></div>
//use either:
.data('product-sheet-id')
//or:
.data('productSheetId')
You likely meant to
have an all lowercase attribute
use the data-attribute to select the productsheet by its id
like this
<div id="xxx" class="productSheet"></div>
<div id="yyy" class="productSheet"></div>
<div id="zzz" class="productSheet"></div>
<button class="btn" type="button" data-productsheetid="xxx">Select XXX</button>
$(function() {
$(".btn").on("click",function() {
// get the id to access from the button's data attribute
var id = $(this).data("productsheetid"); // for readability
var productSheet = $("#"+id);
});
});
Just lowercase your key:
productSheet = $('[data-productSheetId="' + $(this).data('productsheetid') + '"]');
The camelcase key you are using (productSheetId) is used for attributes like
<div data-product-sheet-id="n" class="productSheet"></div>
var x = 5;
var productSheet = $('div[data-productSheetId =' + x + ']');
This is going to do trick. Just change the variable x when selecting.
This seems to be a very simple question but I've been at it for a couple of hours trying to make it work.
I have a string like:
var myhtml = '<div id="wrapper"><div id="full" width="800px"></div></div>';
I need to find my div #full, remove it's "*width*" attribute and then use myhtml with the updated version.
I'm using this in jQuery:
var newhtml = $(myhtml).filter("#full").removeAttr("width");
console.log(newhtml );
Expecting this: <div id="wrapper"><div id="full"></div></div>
But it returns "<div id="full"></div>" and not the whole variable.
Use .find("#full") to select the element then remove attribute. The original object retains the value.
var myhtml = $('<div id="wrapper"><div id="full" width="800px"></div></div>');
var newhtml = myhtml.find("#full").removeAttr("width");
console.log($(myhtml)[0].outerHTML);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
I am trying to target an id element using a variable in jquery, like so:
var liked_artist = $('#js-helper-liked-artist').val();
var artist_id = $('#js-helper-artist-id').val();
var target = '#individual' + artist_id + '';
$(target).addClass('individual-heart-hover');
However, this is not targeting the id it should correctly. Any ideas? I've tried it without the empty string at the end as well.
EDIT:
HTML:
<i class="fa fa-heart fa-stack-1x individual-heart" id="individual-{{$artist->id}}"></i>
individual-{{$artist->id}} renders as individual-8
and artist_id is 8 (console.log shows this).
Shouldn't it be var target = '#individual-' + artist_id + '';? Unless it's a typo in your post, I think you are missing the dash.
did you enclose your code in the document ready function?
$(document).ready(function() {
// ....
});
I am trying to get the value of span from jquery but it shows an errir like this
TypeError: document.getElementById(...) is null
http://localhost:10489/YellowPages/YellowPageHome.aspx?Menu=menu_cat_3594
Line 328
I have a span like this
<div class="RatingAggregate" style="height: 25px; width: 25px; margin: 5px;">
<span id="AvgRt_1<%#DataBinder.Eval(Container, "DataItem.BusinessID")%>">
<%#DataBinder.Eval(Container, "DataItem.Rating")%></span>
</div>
I want to get the value of span like this
var averageRatingValue = document.getElementById('AvgRt_1').innerHTML;
But shows the null error. hOw can i do this as i am trying to learn the jquery.
Firstly, your span has an id which concatenates the dataitem's businessID:
<span id="AvgRt_1<%#DataBinder.Eval(Container, "DataItem.BusinessID")%>">
So the Id would look like: AvgRt_1x where x is your BusinessID
Secondly: you are not using jQuery as you mentioned. Just pure Javascript.
var averageRatingValue = document.getElementById('AvgRt_1').innerHTML;
Thirdly, you will have to specify the correct id either by way of hardcoded value if you know the exact id beforehand, or by way of a variable:
$('#AvgRt_1' + variable).text();
Why don't you just put the <%#DataBinder.Eval(Container, "DataItem.BusinessID")%> in a class?
Then you can do:
var businessId = '<%#DataBinder.Eval(Container, "DataItem.BusinessID")%>';
$('#AvgRt_1.' + businessId).text();
You are doing wrong exactly
var averageRatingValue = document.getElementById('AvgRt_1').innerHTML;
Because you have not the id AvgRt_1 but it is AvgRt_1<%#DataBinder.Eval(Container, "DataItem.BusinessID")%>
So, try this jquery:
var averageRatingValue = $('span [id^=AvgRt_1]').html();
with javascript:
//define var for that
var spanId = '<%#DataBinder.Eval(Container, "DataItem.BusinessID")%>';
var averageRatingValue = document.getElementById('AvgRt_1' + spanId).innerHTML;
You can simply get it like, you can also use Attribute Starts With Selector [name^="value"]
$('span[id^="AvgRt_1"]').text() or or $('span').html()
For Particulr span
$('span #SPANID').text()
I know serialize works with <FORM> but can it work for DIVs as well?
<div class="row" shortname="1"></div>
<div class="row" shortname="2"></div>
<div class="row" shortname="3"></div>
<div class="row" shortname="4"></div>
How can I grab all the DIV and its shortname attribute and pass everything to an AJAX post?
Like shortname=1&shortname=2&shortname=3
Thanks!
you can create an array and pass it as a JSON,
var data=new Array();
$('div.row').each(function(){
data.push($(this).attr('shortname'))
})
var jsonString=JSON.stringify(data);
No, it cannot work with divs so you'll have to create a solution. If I can assume that these divs are wrapped in a parent div, then this code will work
var queryString = '';
var x = 0;
$('#parentdiv div').each(function(){
if(x) queryString += '&';
else x = 1;
queryString += 'shortname[]=' + $(this).attr("shortname");
});
If they are not wrapped in a div, and you want to find all the divs that have the shortname attribute, change the loop to this.
$('div').find('[shortname]').each(function(){
// same stuff
});
note: I'm thinking you want the shortname to be an array. If you constuct without brackets, you may be overwriting the value of "shortname" over and over.
You can build an array with the values and pass that array as part of an object to the $.ajax data option.
var shortnames = $('[shortname]').map(function(){
return $(this).attr('shortname');
}).get();
ajax({
....
data:{shortname:shortnames},
....
});
You can do something like this...
FIDDLE
var serialized = '';
$('#serializeme div').each(function(){
serialized = serialized + 'shortname=' + $(this).attr('shortname') + '&';
});