Databases
StackOverflow2013
Postsdbo
POPerforming actions on element with non-unique class name
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPerforming actions on element with non-unique class name
    primarykey
    data
    text
    <p>--Before I begin, I should say I'm trying to accomplish this with no libraries. Sorry jQuery--</p> <p>In a general sense, I'm wondering the best way to use event listeners on a list when no item in the list has a unique classname or id. More specifically, I have this:</p> <p>Currently, I have a WinJS listView that is data-bound like in <a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh465496.aspx" rel="nofollow">this</a> guide. As you can see, no item in the list has a unique element id or classname. This is causing me an issue because I want to add a click listener to each one, so that when you click a certain item in the list, <a href="http://msdn.microsoft.com/en-us/library/windows/apps/br212658.aspx" rel="nofollow">this</a> behavior happens (as shown in the gif). I need a sub menu to appear underneath the item in the list that corresponds to the appropriate item in the list.</p> <p>This would be easy enough if they all had unique ids and/or classnames. But since they don't, I was thinking when somebody clicks on an item, you have to get which one it is and then add a classname to all the items in the list beneath the one you clicked so that you can move them down using the WinJS .createExpandAnimation function. Then once the submenu has been closed, strip off all of the added classnames. Is that really the best way to do it?</p> <p>I'm open to completely removing the listView, but I'd like a way to data-bind in a similar fashion. Is there a way to do this not using the listView (or another library) that would make life easier? </p> <p>Edit: My code is in an identical format to this that Microsoft provides in their walkthrough.</p> <pre><code>&lt;div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template"&gt; &lt;div style="width: 150px; height: 100px;"&gt; &lt;!-- Displays the "picture" field. --&gt; &lt;img src="#" style="width: 60px; height: 60px;" data-win-bind="alt: title; src: picture" /&gt; &lt;div&gt; &lt;!-- Displays the "title" field. --&gt; &lt;h4 data-win-bind="innerText: title"&gt;&lt;/h4&gt; &lt;!-- Displays the "text" field. --&gt; &lt;h6 data-win-bind="innerText: text"&gt;&lt;/h6&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="basicListView" data-win-control="WinJS.UI.ListView" data-win-options="{itemDataSource : DataExample.itemList.dataSource, itemTemplate: select('#mediumListIconTextTemplate')}"&gt; &lt;/div&gt; </code></pre> <p>where dataSource is defined like this:</p> <pre><code> (function () { "use strict"; var dataArray = [ { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" }, { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" } ]; var dataList = new WinJS.Binding.List(dataArray); // Create a namespace to make the data publicly // accessible. var publicMembers = { itemList: dataList }; WinJS.Namespace.define("DataExample", publicMembers); </code></pre> <p>Honestly, I'm not even sure this will work with a WinJS listView, so I may have to change this entirely to use an html list or something like that. </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJordan Plahn
    1. USJordan Plahn
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POPerforming actions on element with non-unique class name
      1. This table or related slice is empty.
      1. VTUpMod
    1. COAdd an event listener to the wrapper which takes parameter `e`, the event. When invoked, look at `e.target` (from which the event bubbled up). Loop over your list and hide the extra bits for everything that isn't your target then show your target's extra bit if it's hidden. I would write a pure JavaScript example if there was generated HTML pasted in your question.
      singulars
      1. POPerforming actions on element with non-unique class name
      1. USPaul S.
    2. COThis is probably stupid, but e.target will get the element that was clicked? Like shown here: https://developer.mozilla.org/en-US/docs/Web/API/event.target ?
      singulars
      1. POPerforming actions on element with non-unique class name
      1. USJordan Plahn
    3. COUpdated the question to use some example html, though like I mentioned at the bottom, I have a feeling this behavior may not be possible with a WinJS listView. But that remains to be seen.
      singulars
      1. POPerforming actions on element with non-unique class name
      1. USJordan Plahn
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload