Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>OK, my best guess to fill in the blanks in your question is that you're generating that html in such a way that you've re-used the same id for every input and re-used the same id for every div. This results in invalid html because id must be unique on the page, and attempts to select elements by id JS/jQuery will only find the first.</p> <p>What you need to do instead is give each input the same <em>class</em> attribute instead of id, and similar for the divs. It would make sense if each group of items was in its own <code>&lt;li&gt;</code> within a <code>&lt;ul&gt;</code>, or within its own <code>&lt;tr&gt;</code> within a <code>&lt;table&gt;</code>, so I suggest you do something like this:</p> <pre><code>&lt;ul&gt; &lt;li&gt; &lt;input type="image" class="hideshow" src="/Images/aud_down-arrow.gif" /&gt; &lt;div class="content"&gt; &lt;textarea data-bind="text:valueoftext" rows='5' cols='60'&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;input type="image" class="hideshow" src="/Images/aud_down-arrow.gif" /&gt; &lt;div class="content"&gt; &lt;textarea data-bind="text:valueoftext" rows='5' cols='60'&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;/li&gt; &lt;!-- etc. --&gt; &lt;/ul&gt; </code></pre> <p>Then you can use jQuery's DOM navigation methods to find the div associated with each image:</p> <pre><code>jQuery(document).ready(function () { jQuery('.hideshow').live('click', function (event) { jQuery(this).closest("li").find("div.content").toggle('show'); }); }); </code></pre> <p>That is, when an image is clicked, navigate up the tree to the nearest containing <code>&lt;li&gt;</code> (or <code>&lt;tr&gt;</code> or whatever you are using) and then from there navigate back down within that container to the appropriate content.</p> <p>Note that <code>.live()</code> is <em>way</em> out of date and should be replaced with <code>.on()</code> - give the containing element (the <code>&lt;ul&gt;</code> or <code>&lt;table&gt;</code> or whatever you're using) an id, say <code>"mylist"</code> and then do this:</p> <pre><code>jQuery('#mylist').on('click', '.hideshow', function() { ... </code></pre> <p>If for some reason you don't have each group of elements in a container and you really don't want to add containing elements, then you still need to change the ids to classes but can then do this:</p> <pre><code> jQuery('.hideshow').live('click', function (event) { jQuery(this).next().toggle('show'); }); </code></pre> <p>I.e., select whichever element comes immediately after the clicked item and toggle it. The reason I recommend this only as a last resort is that it ties your JS closely to the structure of the html. Using the <code>$(this).closest("someParentElement").find("associatedElement")</code> type method is much more flexible and may not need to change if the html structure needs to change.</p>
    singulars
    1. This table or related slice is empty.
    1. POjquery hide / show for knockout foreach loop
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USnnnnnn
    1. USnnnnnn
    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. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COHi, thank you very much for your feedback. my div is inside a forloop <div id="foreach: data"> <input type="image" class="hideshow" src="/Images/aud_down-arrow.gif" /> <div id="content"> <textarea data-bind="text:valueoftext" rows='5' cols='60'></textarea> </div> I cannot have any unique Id. Please provide your feedback
      singulars
      1. PO
      1. USakki
    2. CO_If_ you use (client-side) `id` attributes they need to be unique. If you can't make them unique for any reason then there is no point including them at all. From the html in your comment it sounds like each group of items is inside a containing `<div>`, as compared to the containing `<li>` I gave as an example in my answer. Just change my code to `...closest("div")...` instead of `...closest("li")...`. Or use the three lines of code at the end of my answer...
      singulars
      1. PO
      1. USnnnnnn
 

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