SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    show/hide with dynamic ids

    hi i am trying to set up my page so that people can add comments to comments..

    see here for an example

    http://www.cfanswers.org/questions/61141/

    if you click on add comments, a form will appear so you post a comment there

    i have set up a page similar

    http://www.musicexplained.co.uk/dele...r=johannesburg

    if you click on add comments underneath the first message it will show the add comments form, but if you click on add comments underneath the second message if will just show the form underneath the first message again...

    this is because i am using the same id to show the form for each message..
    for example

    <cfoutput query>
    this is the message

    blah blah blah

    this is the link which will show or hide the form

    <a id="comments" href="##"> add comment

    this is the form

    <cfform id=commentsform>

    </cfoutput>



    im an unsure of how to make the id to show the form dynamic, and then reference this through the javascript..

    i can post the html and javascript i am currently using at the moment, but i dont think the javscript is the most appropriate, as i just adapted a javascript
    dynamic tree example i got from a book.....

    any help would be appreciated
    discover song meanings and more http://www.music-explained.com

  2. #2
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    firstly, on <a id="comments" href="##"> the id has to be unique, all ids have to be unique, you can easily append the parent comment's database id to it for example to make it unique, like "comments_257" or something, and once you have that unique identifier, it'll be easy.

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi abb cheers for your response...

    the only issue is that im having, is that the javascript im using to control whether the form is shown or not refers to a hardcoded id.....

    this is the script

    function Toggle(e) {
    //Don't try this in old browsers
    if (!document.getElementById) return;
    // Get the event object
    if (!e) var e = window.event;
    // Which link was clicked?
    whichlink = (e.target) ? e.target.id : e.srcElement.id;
    // get the menu object
    obj=document.getElementById(whichlink+"menu");
    // Is the menu visible?
    visible=(obj.style.display=="block")
    // Get the key object (the link itself)
    key=document.getElementById(whichlink);
    // Get the name (Products, Contact, etc)
    keyname = key.firstChild.nodeValue.substring(3);
    if (visible) {
    // hide the menu
    obj.style.display="none";
    key.firstChild.nodeValue = "[+]" + keyname;
    } else {
    // show the menu
    obj.style.display="block";
    key.firstChild.nodeValue = "[-]" + keyname;
    }
    }
    document.getElementById("comments").onclick=Toggle;

    so in this javascript it is toggling the visibility of the element with id comments...as soon as i append like "comments_257" the system no longer works
    discover song meanings and more http://www.music-explained.com

  4. #4
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can change your last line into querying collections, and use your anchor with specific class name e.g.

    Code:
    <a id="comments_234" href="##" class="toggle">comment please</a>
    
    <script>
     // .... toggle function
    As =  document.getElementsByTagName('A');
    for (i = 0; i < As.length; i++) {
    a = As[i];
    if (a.className=='toggle') {
      a.onclick = Toggle;
    }
    }
    </script>

  5. #5
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi simplyfu.....
    im quite new to javascript, so youll have to bear with me

    i have changed my javascript to

    function Toggle(e) {
    //Don't try this in old browsers
    if (!document.getElementById) return;
    // Get the event object
    if (!e) var e = window.event;
    // Which link was clicked?
    whichlink = (e.target) ? e.target.id : e.srcElement.id;
    // get the menu object
    obj=document.getElementById(whichlink+"menu");
    // Is the menu visible?
    visible=(obj.style.display=="block")
    // Get the key object (the link itself)
    key=document.getElementById(whichlink);
    // Get the name (Products, Contact, etc)
    keyname = key.firstChild.nodeValue.substring(3);
    if (visible) {
    // hide the menu
    obj.style.display="none";
    key.firstChild.nodeValue = "[+]" + keyname;
    } else {
    // show the menu
    obj.style.display="block";
    key.firstChild.nodeValue = "[-]" + keyname;
    }
    }

    As = document.getElementsByTagName('A');
    for (i = 0; i < As.length; i++) {
    a = As[i];
    if (a.className=='toggle') {
    a.onclick = Toggle;
    }
    }

    and changed the HTML to

    <a id="comments_234" href="##" class="toggle">[+] add comment</a>


    the form im trying to hide and show
    <cfform action="comments_action.cfm"
    name="add"
    height="500"
    class="cfform"
    id="commentsform">

    thanks
    discover song meanings and more http://www.music-explained.com

  6. #6
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry,

    these changes didnt work
    discover song meanings and more http://www.music-explained.com

  7. #7
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Turns out the <a> tag needs both a name and an Id, the name is for knowing if it was clicked on, the id is for passing along the unique id.

    HTML for comments area
    HTML Code:
    <!-- Wrap the whole comments area in "comment_block" block, or give existing holder an id -->
    <div id="comment_block">
    
    		<!-- A comment -->
    	<p>Some comment 1</p>
    	<p><a name="pick_this" id="c234" href="#" class="toggle">[+] add comment</a></p>
    		<!-- using inline style for convenience in this example -->
    	<div id="comments_234" class="comments" style="display: none;">
    		&bull; hidden form 1
    	</div>
    	
    		<!-- Another comment -->
    	<p>Some comment 2</p>
    	<p><a name="pick_this" id="c235" href="#" class="toggle">[+] add comment</a></p>
    	<div id="comments_235" style="display: none;">
    		&bull; hidden form 2
    	</div>
    
    </div>
    The javascript
    Code:
    <script>
    
    window.onload = function () {
    	
    	document.getElementById('comment_block').onclick = function (e) {
    			
    		e = e || event;
    		var target = e.target || e.srcElement;
    			
    			// Only if the "add comment" links were clicked on
    		if ( target.name != 'pick_this' )
    			return false;
    			// get the <a> tag id and change it to match Id format "c123" to "comments_123"
    		var get_id = target.id.replace('c','comments_');
    			
    		var this_comment = document.getElementById(get_id);
    			// If the form is shown or not undefined, hide it
    		if ( this_comment.style.display == 'block' ) {
    				
    			this_comment.style.display = 'none';
    		}
    		else {
    				
    			this_comment.style.display = 'block';
    		}
    	}
    }
    </script>

  8. #8
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thats working to make the form show/hide however, its not allowing me to submit the form in the show/hide div...
    I also put a link into the show/hide div to test whether that would work and its not working either..

    any ideas??
    thanks
    Last edited by namtax; May 6, 2007 at 12:06.
    discover song meanings and more http://www.music-explained.com

  9. #9
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All the problem is coming from this one line
    Code:
    if ( target.name != 'pick_this' )
    	return false;
    Just change that "return false" to "return true" instead.


    sorry for not continuing what you did earlier, did not understand it in the beginning enough to test it, so just did it another way. Anyway I grafted on your key.firstChild.nodeValue = "[+]" + keyname; part to the code
    Code:
    window.onload = function () {
    	
    	document.getElementById('comment_block').onclick = function (e) {
    			
    		e = e || event;
    		var target = e.target || e.srcElement;
    
    		if ( target.name != 'pick_this' )
    			return true;
    			
    		var get_id = target.id.replace('c','comments_');
    		var atag = document.getElementById(target.id);
    				
    		var this_comment = document.getElementById(get_id);
    			
    		var keyname = atag.firstChild.nodeValue.substring(3);
    			
    		if ( this_comment.style.display == 'block' ) {
    				
    			this_comment.style.display = 'none';
    			atag.firstChild.nodeValue = "[+]" + keyname;
    		}
    		else {
    			
    			this_comment.style.display = 'block';
    			atag.firstChild.nodeValue = "[-]" + keyname;
    		}
    	}
    }

  10. #10
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thats brilliant..so helpful, massively appreciate that
    discover song meanings and more http://www.music-explained.com


Bookmarks

Posting Permissions

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