Databases
StackOverflow2013
Postsdbo
POtrying to get my jquery code to understand my unique ids
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POtrying to get my jquery code to understand my unique ids
    primarykey
    data
    text
    <p>I have a character countdown script in each of my 'reviews'. When the user clicks 'Edit'- the number decreases as the person types. Most they can put in is 200 characters.</p> <p>Each 'review' has an id of <code>@review.id</code></p> <p>My reviews look like this:</p> <p><img src="https://i.stack.imgur.com/Wkus3.png" alt="enter image description here"></p> <p>The problem arises when I click 'Edit' in the 'review' below it, Review_2, or any other review (there can be many):</p> <p><img src="https://i.stack.imgur.com/g3tYT.png" alt="enter image description here"></p> <p>So, I'm having a problem separating/ giving a unique id in my code. My countdown script is (the div where the number appears is char_count_label):</p> <pre><code>&lt;script&gt; $(document).ready(function() { var characters = 200 - $('textarea').val().length; $(".char_count_label").append(characters); $('textarea').keyup(function(){ if($(this).val().length &gt; 200){ $(this).val($(this).val().substr(0, 200)); } var remaining = 200 - $(this).val().length; $(".char_count_label").html(remaining); }); }); &lt;/script&gt; </code></pre> <p>And in my html/erb I have:</p> <pre><code> &lt;div class = "char_count_label"&gt;"&lt;/div&gt; </code></pre> <p>I thought giving the specific review id in my code would do the trick like <code>&lt;div class = "char_count_label" id="&lt;%= @review.id %&gt;"&lt;/div&gt;</code>but it wasn't successful. Any ideas? Thanks!</p> <p>I was asked to share my html with the textarea and the char_count_label so here it is!:</p> <pre><code>&lt;div class="reviews"&gt; &lt;div class="breadcrumb" id="review_51" style="height: 250px;"&gt; &lt;!-- Edit mode. Show this form, when user clicks the 'Edit' link&gt; --&gt; &lt;div class="edit_review_form"&gt; &lt;div class="cancel-edit" id="51"&gt; &lt;a href="/reviews/51" data-remote="true"&gt;Cancel&lt;/a&gt; &lt;/div&gt; &lt;form accept-charset="UTF-8" action="/reviews/51" class="simple_form edit_review" data-remote="true" id="edit_review_51" method="post" novalidate="novalidate"&gt;&lt;div style="margin:0;padding:0;display:inline"&gt;&lt;input name="utf8" type="hidden" value="✓"&gt;&lt;input name="_method" type="hidden" value="put"&gt;&lt;input name="authenticity_token" type="hidden" value="vzOYVqk9aSb7tOCUkhd8XbDRtwzRB4PLZ/L0xzsNPcE="&gt;&lt;/div&gt; &lt;div class="inputs"&gt; &lt;div id="except_comment"&gt; &lt;div class="control-group string required"&gt;&lt;label class="string required control-label edit_form_titles" for="review_name"&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt; Name&lt;/label&gt;&lt;div class="label-error"&gt;&lt;/div&gt;&lt;div class="controls"&gt;&lt;input class="string required" id="review_name" name="review[name]" size="50" type="text" value="11"&gt;&lt;/div&gt;&lt;/div&gt; &lt;div class="control-group string optional"&gt;&lt;label class="string optional control-label edit_form_titles" for="review_address"&gt;Address&lt;/label&gt;&lt;div class="label-error"&gt;&lt;/div&gt;&lt;div class="controls"&gt;&lt;input class="string optional" id="review_address" name="review[address]" onkeydown="if(event.keyCode==13){return false;}" placeholder="Enter address, town or village where you live." size="50" type="text" value="Baldoyle"&gt;&lt;/div&gt;&lt;/div&gt; &lt;span id="address_validation"&gt;&lt;/span&gt; &lt;div class="control-group tel optional"&gt;&lt;label class="tel optional control-label" for="review_phone"&gt;Phone&lt;/label&gt;&lt;div class="label-error"&gt;&lt;/div&gt;&lt;div class="controls"&gt;&lt;input class="string tel optional" id="review_phone" name="review[phone]" size="50" type="tel" value=""&gt;&lt;/div&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="control-group text optional"&gt;&lt;label class="text optional control-label comments" for="review_comment"&gt;Comments:&lt;/label&gt;&lt;div class="label-error"&gt;&lt;/div&gt;&lt;div class="controls"&gt;&lt;textarea class="text optional" cols="40" id="review_comment" maxlength="300" name="review[comment]" rows="2" wrap="soft"&gt;public&lt;/textarea&gt;&lt;/div&gt;&lt;/div&gt; &lt;div class="char_count_label"&gt;194&lt;/div&gt; &lt;!-- buttons: save, delete, share, keep private --&gt; &lt;div class="edit_button_group"&gt; etc... </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCHarris
    1. USCHarris
    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
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POtrying to get my jquery code to understand my unique ids
      1. This table or related slice is empty.
      1. VTUpMod
    1. COcan you share the html portion with both the textarea and `char_count_label`
      singulars
      1. POtrying to get my jquery code to understand my unique ids
      1. USArun P Johny
    2. COthe problem is instead of using `$(".char_count_label")`, you need to find out the `char_count_label` which is next to the textarea
      singulars
      1. POtrying to get my jquery code to understand my unique ids
      1. USArun P Johny
    3. COhi there, I added my html.erb. Hm, I'll investigate how to make it recognise the exact char_count_label. thanks.
      singulars
      1. POtrying to get my jquery code to understand my unique ids
      1. USCHarris
 

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