Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Sep 2010
    Posts
    331
    Thanks
    9
    Thanked 6 Times in 6 Posts

    Best way to target user’s post?

    I need to target specify id's which could range from any number. All posts are retrieved from a database and accompanying the post nested in an <article> tag is the id of the post (i.e <article id= ($databaseId) class=posts>). Whenever a user clicks on the "comment" button placed within each article, I need to target the id of the post within the article tag and using the InnerHTML (+=) property create a form for a user to reply.

    I just can't wrap my head around how to do this. I was thinking about using a for loop but then every element with that id would be targeted. But then again it would only be 1 element with a number id...
    Coding is a challenge, get used to it
    Always remember to debug
    Try the guess & check method
    Break it down into simple steps

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Quote Originally Posted by elitis View Post
    I just can't wrap my head around how to do this. I was thinking about using a for loop but then every element with that id would be targeted. But then again it would only be 1 element with a number id...
    If you know the id then use document.getElementById to get the tag that has the id directly (ids MUST be unique within a page). From there you can apply whatever navigation you need to get to where you want.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,277
    Thanks
    10
    Thanked 581 Times in 562 Posts
    you might want to unit test and form code that is injected via innerHTML; i know IE before version 9 had a lot of trouble on some form attribs, name most notably.
    since you will only have one form per page, you can use IDs on the form instead of name.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #4
    Regular Coder
    Join Date
    Sep 2010
    Posts
    331
    Thanks
    9
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by felgall View Post
    If you know the id then use document.getElementById to get the tag that has the id directly (ids MUST be unique within a page). From there you can apply whatever navigation you need to get to where you want.
    I know this, I was saying that using a for loop for this would get every element on the page with that id. But, as you said, since id's must be unique on the page, the for loop would only get the one element. Which I guess could be the solution to this.

    My problem is each <article> has an id (<article id='.$noid['id'].' class="post">). Not the same id, but each has a corresponding id with the post id retrieved from the database. Within each <article> is also a set of links, at this point the only relevant one is the comment link (<a id="coment" href="#" class="postnav">Comment</a>). I need to get the article's id when the comment link is clicked in order to accomplish the rest.

    The id could range from 1-infinity. So how could I get the corresponding article's id from the comment link nested within that <article>?
    Coding is a challenge, get used to it
    Always remember to debug
    Try the guess & check method
    Break it down into simple steps

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Again, you are misusing HTML.

    This would be *ILLEGAL* HTML:
    Within each <article> is ...the comment link <a id="coment" href="#" class="postnav">Comment</a>
    Once again: IDS MUST BE UNIQUE ON A PAGE. So using id="coment" (I assume that should really be "comment"?) is illegal.

    EASY ANSWER:
    Code:
    <a id="comment<?php echo $noid['id']; ?> href="#" class="postnav">
    Then, in your JS code that process a click on such a link, simply pick up the ID of the <a> tag, strip off the first 6 characters, and there is your ID!

    I don't know how you are attaching the onclick events to those <a> tags, but I would assume something along these lines:
    Code:
    <script type="text/javascript">
    (
      function( )
      {
          var postlinks = document.getElementsByClassName("postnav");
          for ( var p = 0; p < postlinks.length; ++p ) 
          {
              postlinks[p].onclick = fillinCommentForm;
          }
          
          function createCommentForm( )
          {
              var form = document.getElementById("commentForm");
              form.articleid.value = this.id.substring(6);
              ... whatever else is needed ...
    
              // see below
              var div = document.getElementById("hideForm");
              div.style.left = ...;
              div.style.top = ...; // possibly position it above the comment??
              div.style.display = "block";
          }
      }
    )();
    </script>
    And I *certainly* would NOT create the form or its contents using innerHTML. There is no reason for that.

    If you don't want the form to show up until the user clicks on a comment link, then just hide it until then. Perhaps something like this:
    Code:
    <div id="hideForm" style="display: none; position: absolute; ...">
        <form id="commentForm" ...>
            <input type="hidden" name="articleid" />
            ...
        </form>
    </div>
    Last edited by Old Pedant; 02-17-2013 at 03:06 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •