10 Replies - 487 Views - Last Post: 13 May 2017 - 07:46 PM

#1 dak45309  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 155
  • Joined: 22-April 13

jQuery.toggle() not toggling

Posted 06 May 2017 - 04:00 PM

I'm trying to have 2 divs hide on load of the page. Then when a link is clicked, it will show those 2 associated divs. A post/comments type thing like Facebook. Well...the hide of the two divs work but when I click the link, it stays hidden even though it should be viewable now.

$(document).ready(function(){
		$('.comments').hide();
		$('.comments-shouts').hide();
		$('a[href^="#"').on('click', function(){
			$('.comments').hide();
			$('.comments-shouts').hide();
			var target = $(this).attr('href');
			$('.comments-shouts' + target).toggle();
			$('.comments' + target).toggle();
		});
	  });


I have found out that is I comment out one or the other (.comments or .comments-shouts), it ends up toggling correctly. I want this to happen on the same click event for both. Any ideas of what might be making it not toggle correctly?

Is This A Good Question/Topic? 0
  • +

Replies To: jQuery.toggle() not toggling

#2 andrewsw  Icon User is online

  • say what now
  • member icon

Reputation: 6408
  • View blog
  • Posts: 25,889
  • Joined: 12-December 12

Re: jQuery.toggle() not toggling

Posted 06 May 2017 - 11:12 PM

Question moved to jQuery subforum.
Was This Post Helpful? 0
  • +
  • -

#3 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4138
  • View blog
  • Posts: 13,073
  • Joined: 08-June 10

Re: jQuery.toggle() not toggling

Posted 07 May 2017 - 03:58 PM

Without the accompanying HTML this is guesswork at most. but your last two lines do not make any sense, whatsoever.
Was This Post Helpful? 0
  • +
  • -

#4 dak45309  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 155
  • Joined: 22-April 13

Re: jQuery.toggle() not toggling

Posted 07 May 2017 - 10:09 PM

<?php
	    foreach(get_single_param_results(getCon(user, pass), "CALL GET_SHOUTS(:countryID)", ":countryID", $_SESSION["CountryID"]) as $row)
		{
		  $shoutID = $row["ShoutID"];
		  echo "<div id='individual-shouts'>";
		  echo "<p>" . $row["ShoutText"] . "</p>";
		  echo "<p id='date'>Created at: " . $row["CreateDT"] . " by <a href=/player_lookup.php?id=" . urlencode($row["UserID"]) . ">" . $row["Username"] . "</a></p>";
		  echo "<a id='comments' href='#" . $shoutID . "'>View Comments</a>";
		  echo "</div>";
		  foreach(get_single_param_results(getCon(user, pass), "CALL GET_SHOUT_COMMENTS(:shoutID)", ":shoutID", $shoutID) as $comments)
		  {
			echo "<div class='shouts-comments' id='#" . $row["ShoutID"] . "'>";
			echo "<p>" . $comments["CommentText"] . "</p>";
			echo "<p id='comment-date'>Created at: " . $comments["CreateDT"] . " by <a href=/player_lookup.php?id=" . urlencode($comments["UserID"]) . ">" . $comments["Username"] . "</a></p>";
			echo "</div>";
		  }
		  echo "<div class='comments-shouts' id='" . $shoutID. "'>";
		  echo "<form method='post' action='/index.php'>";
		  echo "<table>";
		  echo "<tr>";
		  echo "<td><label for='textarea'>Comment:</label><textarea height=400 width=500 name='commented'></textarea><input type='hidden' name='shout-id' value=" . $row["ShoutID"] . "</td>";
		  echo "</tr>";
		  echo "<tr>";
		  echo "<td id='btnSubmit'><input type='submit' value='Submit'/></td>";
		  echo "</tr>";
		  echo "</table>";
		  echo "</form>";
		  echo "</div>";
		}
	  ?>


I forgot I changed the code a lot so this is the updated PHP code. As for the first two lines, I want to hide the comments AND the comment form when the document has loaded (rather than hiding it with CSS which is why it's not in the anchor click event). Then when one is clicked, I want them to hide any other comment thread and comment form and then open the thread the user clicked the link for. But the code below works just fine:

jQuery
$(document).ready(function(){
  $('.comments-shouts').hide();
  $('a[href^="#"]').on('click', function(){
    $('.comments-shouts').hide();
    var target = $(this).attr('href');
    $('.comments-shouts' + target).toggle();
  });
});


But doing:

$(document).ready(function(){
  $('.comments-shouts').hide();
  $('.shouts-comments').hide();
  $('a[href^="#"]').on('click', function(){
    $('.comments-shouts').hide();
    $('.shouts-comments').hide();
    var target = $(this).attr('href');
    $('.comments-shouts' + target).toggle();
    $('.shouts-comments' + target).toggle();
  });
});

Was This Post Helpful? 0
  • +
  • -

#5 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4138
  • View blog
  • Posts: 13,073
  • Joined: 08-June 10

Re: jQuery.toggle() not toggling

Posted 08 May 2017 - 12:37 AM

Quote

I forgot I changed the code a lot so this is the updated PHP code.

when debugging client side code, we need to know what HTML is in the browser.
Was This Post Helpful? 1
  • +
  • -

#6 dak45309  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 155
  • Joined: 22-April 13

Re: jQuery.toggle() not toggling

Posted 09 May 2017 - 02:45 PM

Sorry. I wasn't looking directly at it when I was writing the post. I was at work when I wrote it and then rechecked it when I got home to see what the code was. The first one was the last one I remembered writing and forgot I had changed it to the updated PHP code.
Was This Post Helpful? 0
  • +
  • -

#7 dak45309  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 155
  • Joined: 22-April 13

Re: jQuery.toggle() not toggling

Posted 09 May 2017 - 09:43 PM

Found out that the .on('click') event wasn't firing but I got that to work now. Only problem is that it doesn't toggle the div back on when it's supposed to in the click section. Updated PHP code:

<?php
	    foreach(get_single_param_results(getCon("root", "Linkinpark1!"), "CALL GET_SHOUTS(:countryID)", ":countryID", $_SESSION["CountryID"]) as $row)
		{
		  echo "<div id='individual-shouts'>";
		  echo "<p>" . $row["ShoutText"] . "</p>";
		  echo "<p id='date'>Created at: " . $row["CreateDT"] . " by <a href=/player_lookup.php?id=" . urlencode($row["UserID"]) . ">" . $row["Username"] . "</a></p>";
		  echo "<a id='comments' href='#" . $row["ShoutID"] . "'>View Comments</a>";
		  echo "</div>";
		  echo "<div class='comments' id='#" . $row["ShoutID"] . "'>";
		  foreach (get_single_param_results(getCon("root", "Linkinpark1!"), "CALL GET_SHOUT_COMMENTS(:shoutID)", ":shoutID", $row["ShoutID"]) as $comments)
		  {
			echo "<div class='shout-comments'>";
			echo "<p>" . $comments["CommentText"] . "</p>";
			echo "<p id='date'>Created at: " . $comments["CreateDT"] . " by <a href=/player_lookup.php?id=" . urlencode($row["UserID"]) . ">" . $row["Username"] . "</a></p>";
			echo "</div>";
		  }
		  echo "</div>";
		}
	  ?>


Took out the input for comments until this was able to get resolved. Also, I changed the jQuery as well. jQuery code:

$(document).ready(function(){
	  $('.comments').toggle(); //hide comment thread visibility until link is clicked
	  $('#comments').on('click', function(){
                $('.comment').hide(); //hide any comment threads
		var target = $(this).attr('href'); //Get link clicked
		$('.comments ' + target).toggle(); //Make comment thread visible --not toggling back
	  });
	});

Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is online

  • say what now
  • member icon

Reputation: 6408
  • View blog
  • Posts: 25,889
  • Joined: 12-December 12

Re: jQuery.toggle() not toggling

Posted 09 May 2017 - 10:32 PM

As requested, post the HTML that appears in the browser, not the PHP that generates it.

This $('.comments ' + target) won't form a valid selector, especially with the space. Posting the resulting HTML should hopefully show us what you are trying to select.
Was This Post Helpful? 0
  • +
  • -

#9 dak45309  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 155
  • Joined: 22-April 13

Re: jQuery.toggle() not toggling

Posted 11 May 2017 - 02:11 PM

I changed the space but here's what the browser debug console generated for the HTML:

<div id='individual-shouts'>
    <p>Testing for NOW() to work</p>
    <p id='date'>Created at: 2017-05-06 16:12:08 by <a href=/player_lookup.php?id=1>dak45309</a></p>
    <a id='comments' href='#5'>View Comments</a>
</div>
<div class='comments' id='#5'>
    <div class='shout-comments'>
        <p>Test Comments</p>
        <p id='date'>Created at: 2017-05-06 16:56:47 by <a href=/player_lookup.php?id=1>dak45309</a></p>
    </div>
</div>


Here's the jQuery:

$(document).ready(function(){
	  $('.comments').hide();
	  $('#comments').on('click', function(){
		$('.comments').hide();
		var target = $(this).attr('href');
		$('.comments' + target).toggle();
	  });
	});

Was This Post Helpful? 0
  • +
  • -

#10 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4138
  • View blog
  • Posts: 13,073
  • Joined: 08-June 10

Re: jQuery.toggle() not toggling

Posted 12 May 2017 - 01:26 AM

href is not what you expect it to be! it's an URL, not a CSS selector. (=> console.log(this.href))
Was This Post Helpful? 0
  • +
  • -

#11 dak45309  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 155
  • Joined: 22-April 13

Re: jQuery.toggle() not toggling

Posted 13 May 2017 - 07:46 PM

even though I put the a href value to '#5'? I printed it to the console and that's what it gave me was #5
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1