My application uses the Parse backend to keep a list of all the concerts in my area in which my friends are interested.
On the main page, I use parsing that displays a module for each show stored in the database. Since each module is created, I use this code to add the data attribute to the show outermost div corresponding to the show object identifier in the parsing:
var showId = object.id;
$("div.show_module:last").data("showId", showId);
I can successfully get the showId of a particular show when the user clicks on the show module:
$("#showsList").delegate(".showModuleBody", "click", function() {
var storeObjectId = $(this).closest("div.show_module").data("showId");
});
Everything works fine, proving that the assignment of the data attribute works.
In cases where I encountered a problem, you are trying to find an element with a specific data attribute or a specific value for this attribute on this page. The ultimate goal is to get the y offset of this div so that I can scroll to the right place. I assumed that I can use the following code to search for an element, but it does not work -
// 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 these three works, proving that all the elements that interest me are loaded on the page by the time I call this function, but the 2nd and 3rd requests do not return anything.
Any idea what I'm doing wrong here? Is this something with syntax? Is querySelectorAll just incompatible with the way I set the data attribute?
I tried to include only what I understood to be significant bits of code, but if more is required, please let me know.