My app uses a Parse backend to keep a running list of all the concerts in my area that my friends and I are interested in.
On the main page I use a parse query display a module for each show stored in the database. As each module is created, I use this code to add a data attribute to the show's outermost div, corresponding to the show's object ID in parse:
var showId = object.id;
$("div.show_module:last").data("showId", showId);
I'm successfully able to retrieve the showId of a specific show when the user clicks on the show's module:
$("#showsList").delegate(".showModuleBody", "click", function() {
var storeObjectId = $(this).closest("div.show_module").data("showId");
});
That all works great, proving that assigning the data-attribute is working.
Where I'm running into trouble is trying to find an element with a specific data attribute or a specific value for that attribute on a given page. The end goal is to get the y-offset of that div so I can scroll the page to the appropriate spot. I assumed I could use the following code to find the element, but it isn't working -
// find all elements with class .show_module
var allShows = document.querySelectorAll('.show_module');
// find all elements with showId data attribute
var showsWithShowId = document.querySelectorAll('[data-showId]');
// find all elements with a specific showId data attribute
var showToFind = document.querySelectorAll("[data-showId='2']");
The first of those 3 works, proving that all the elements I'm interested in are loaded into the page by the time I'm calling this function, but the 2nd and 3rd queries return nothing.
Any idea what I'm doing wrong here? Is it something with syntax? Is querySelectorAll just incompatible with how I'm setting the data attribute?
I tried to include only what I figured are the salient bits of code, but if more is necessary please let me know.
Try This
$('*[data-customerID="22"]');
For more info, look here:
Selecting element by data attribute
jQuery's .data method does not create a HTML attribute, but associates a value in its internal data store with the element.
If you want to set a data attribute with jQuery, then you need to use:
$("div.show_module:last").attr("data-showId", showId);
To get the value, you can use .data('showId') or .attr('data-showId').
(note that HTML attributes are case-insensitive, so you can also write "data-showid" instead.)
Related
i have the following html object : element
I just want to save the value in a variable. I tried using
var result = window.content.document.getElementsByClassName("glyphicon-ok")[0].getAttribute('value');
alert(result);
But return me null object. How can i save the element of this list in my var using javascript. The element is.
glyphicon.glyphicon-ok.positive-color
Important, check this image to check the html collection i'm trying save using javascript:
image
You can use querySelector to pass CSS selector inside and get the first element of the page selected by the CSS selector (if you want to get all the array, you can use querySelectorAll instead) like that:
let result = document.querySelector('glyphicon.glyphicon-ok.positive-color').value;
alert(result);
Edit: if it returns a null value, it's because your element doesn't have the attribute "value" set...
This works:
var editor = $("#htmlEditor").data('ejRTE');
The question is what does .data('ejRTE') do?
It retrieves the widget which is part of this html:
<textarea id="htmlEditor" value.bind="entity.content"
ej-rte="e-width:100%"
ref="textArea"
style="height: 220px"></textarea>
How do I retrieve it without jQuery.
jQuery.data() Store arbitrary data associated with the specified element and/or
return the value that was set.
So basically the widget stores some data in the element htmlEditor indexed ejRTE, I bet it is a custom object used by this tool.
var editor = $("#htmlEditor").data('ejRTE');
then editor will hold the object stored by the widget for this element
If you set data like this $(#myWidget).data('foo', 'myFoo') then jQuery will create an object called 'jQuery224059863907884721222' on myWidget which it uses to store the value.
I am guessing that the number is an arbitrary datetime value.
I stepped through the jQuery code, and it's not practical to replace it. I thought it might be just a line or two of code.
I have the following page http://example.com (Yes, I know it's slow right now), but I need to rearrange the "dealers" under the correct states. Some of them are in the wrong location, using jquery I need to remove them and place them under the correct headers (There are no wrapping containers for each state).
I'm having a hard time doing this, how would I remove each Dealer (they have their own containers) with a data variable with the State value under the h4 with the matching state value? The data variable is data-state for each location and h4..
This will detach all of those dealerContainers, then append them back in their correct locations.
$('.dealerContainer[data-state]')
.detach()
.each(function(i,e) {
var state = $(e).data('state');
var stateh5 = $('h5[data-state='+state+']');
$(e).insertAfter(stateh5);
})
I'm trying to take the hashed value from an object. What I'm basically doing is this:
target = $('a[href^="#products"]');
targetHashed = target.hash;
$targetHashed = $(targetHashed);
console.log(targetHashed);
I'm putting the reference in "target", then getting the hashing and everything following it with ".hash" then converting the variable that contains the hashed value "targetHashed" to an object so I can do things like getting the offset, etc. Problem is that "targetHashed" is outputting undefined whenever I try to append .hash to it. Anyone know where I'm going wrong?
If you want to get the value of the href attribute of the selected elements you need to use attr so your second line would look something like.
targetHashed = target.attr('href');
But that only selects the first element, if you want to use all of them then you'll need to loop through that array.
I have a code like this:
<s:select id="s" list="list" listKey="id" listValue="displayValue">
When I get the value from the object I'll always get the id.
How can I change the "listKey" value dinamically so I could get for example, the name of the object (supposing other of my attributes besides id is name ) instead always de id?
I was trying some code in jQuery like this:
function changeListKey(){
var id = $("#s").val();
$('#s').attr('listKey','name');
var name = $("#s").val();
document.write(name); // Only to test if I could get the value
}
When I execute it it doesn't seem to change the "lisKey" value so I could get another one, what would be the solution?
Thanks a lot in advance.
John Smith.
Why would you want to mix up what's used as the key value? That would make a mess on the server side.
In any case, listKey isn't an HTML attribute, it's a custom tag attribute, and is meaningless after the HTML has been rendered and sent to the client. You would need to iterate over the HTML select element's options collection and change the values on the options.
All this said, you'd be much better off doing any bizarre manipulations like this in the action itself, and exposing only the desired key/value pairs to the JSP, either in a list, or more easily, in a map. Using a map eliminates the need to provide listKey/listValue attributes--just use the map's key as the option text, and the value as the option's value.