Solved

jQuery - Leveraging dynamic (variable) element id's.

Posted on 2011-09-14
3
329 Views
Last Modified: 2012-05-12
The script below is for an approval checkbox which is used on several containers within a complex form.  It works, to an extent.  What doesn't work is this:
$(thisID).hide();
and
$(thisID).show();

Open in new window

The plan was to pass in the ID of the container to hide/show in the 'collapse' attribute of the check box container being clicked.  The alert shows the ID is being passed, and is accessible.  I thought that once it was in a variable form, that I could access it.  I also tried document.getElementById(thisID), but was equally unsuccessful in hiding/showing the container with the ID passed in the collapse attribute.

Any help would be greatly appreciated.

<script type="text/javascript">
	$(document).ready(function() {
		$('.checklist input:checked').parent().addClass('selected');
		$(".checklist .checkbox-select").click(
			function(event) {
				event.preventDefault();
				var thisID = $(this).parent().attr('collapse');
				alert('select: ' + thisID);
				$(thisID).hide();
				$(this).parent().addClass('selected');
				$(this).parent().find(':checkbox').attr('checked','checked');
			}
		);
		$('.checklist .checkbox-deselect').click(
			function(event) {
				event.preventDefault();
				var thisID = $(this).parent().attr('collapse');
				alert('deselect: ' + thisID);
				$(thisID).show();
				$(this).parent().removeClass('selected');
				$(this).parent().find(':checkbox').removeAttr('checked');
			}
		);
	});
</script>

Open in new window


Below is the code with the check boxes.  Please let me know if you need more information.
<div class="approvalToggleContainer">
	<ul class="checklist">
		<li collapse="subjectApproval">
			<input name="checkApprove" value="subjectChkBx" type="checkbox" />
			<label for="subjectChkBx">Email Subject</label>
			<a class="checkbox-select" href="">&nbsp;</a>
			<a class="checkbox-deselect" href="">&nbsp;</a>
		</li>
	</ul>
</div>

<fieldset class="previewContainer" id="subjectApproval">
	<legend>Email Subject</legend>
	<div id="subjectContainer">Subject Container</div>
</fieldset>

<br class="clear" />

<div class="approvalToggleContainer" id="bodyApproval">
	<ul class="checklist">
		<li collapse="bodyApproval">
			<input name="checkApprove" value="bodyChkBx" type="checkbox" />
			<label for="bodyChkBx">Email Body</label>
			<a class="checkbox-select" href="">&nbsp;</a>
			<a class="checkbox-deselect" href="">&nbsp;</a>
		</li>
	</ul>
</div>

<fieldset class="previewContainer" id="bodyApproval">
	<legend>Email Body</legend>
	<div id="emailPreviewDIV"></div>
	<div>&nbsp;</div>
</fieldset>

<br class="clear" />

<div class="approvalToggleContainer" id="recipientsApproval">
	<ul class="checklist">
		<li collapse="recipientsApproval">
			<input name="checkApprove" value="recipientsChkBx" type="checkbox" />
			<label for="recipientsChkBx">Email Recipients</label>
			<a class="checkbox-select" href="">&nbsp;</a>
			<a class="checkbox-deselect" href="">&nbsp;</a>
		</li>
	</ul>
</div>

<fieldset class="previewContainer" id="recipientsApproval">
	<legend>Email Recipient Detail</legend>
	<div id="recipientsContainer">Recipients Container</div>
</fieldset>

<br class="clear" />

Open in new window

0
Comment
Question by:brianmfalls
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36536666
use :


$("#" + thisID).hide();
and
$("#" + thisID).show();
0
 
LVL 1

Author Closing Comment

by:brianmfalls
ID: 36536812
Of course....  (Insert Homer Simpson "D'Oh" Here)  Thanks leakim.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36536818
;-)) you're welcome!
0

Featured Post

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

732 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question