Show Button based on checkbox selection from the jtable

I have search.cfm form (can see below) with loaded supervisor (master) and org (child) records. (
but
1) i want to display only one button based on following condition
 if user select one check box(child table) then it should show noopenorg button at the bottom
 if user did n't select any check boxes (child table), then it should show openorg button
2) when user clicks on noopenorg button, it should submit the form and creates json format data with supervisorid, orgid.

I really appreciate your great help.

Any ideas would be appreciated too.

Thanks in advance.
Nithik



//searchResultset.js
$(document).ready(function () {
$("img").each(function() { $(document.createTextNode($(this).attr("src"))).insertAfter(this); });
$('#SupervisorTableContainer').jtable({
	title: 'Supervisor Search results',
	selecting: true, //Enable selecting
	multiselect: false, //Allow multiple selecting
	selectingCheckboxes: true, //Show checkboxes on first column	
	actions: {listAction: '/SearchResults?mode=super&format=json'},
	fields: {
		ContactID: { key: true, list: false },
		 Orgs: { //CHILD TABLE DEFINITION FOR "Organizations"	
			title: '', width: '5%', sorting: false,	 edit: false, create: false,
			display: function (organizationData) {
				var $img = $('<img src="/orgicon.gif" with="35" height="28" />');//Open child table when user clicks the image
				$img.click(function () {
				$('#SupervisorTableContainer').jtable('openChildTable',
					$img.closest('tr'),
					{title:' - Participating Organizations',
					selecting: true, //Enable selecting
					multiselect: false, //Allow multiple selecting
					selectingCheckboxes: true, //Show checkboxes on first column
					actions:{listAction: '/SearchResults?mode=org&format=json&SupervisorID=' + organizationData.record.ContactID},
					fields: {
						ContactID: { type: 'hidden',defaultValue: organizationData.record.ContactID},
						SiteId: {key: true,create: false,edit: false, list: false	},
						OrgName: {title: 'Organization Name', width: '30%'  },
						AddressLine1: {title: 'Address',width: '20%'},
						City: {	title: 'City',width: '10%'	},	
					    CountryCode: {title: 'Country',width: '13%',options:'/SearchResults?mode=countryList&format=json'},	
						AddressStateID: {title: 'State',width: '13%',
						display: function (data) {return( data.record.StateName ); },
						dependsOn: 'CountryCode', //Cities depends on countries. Thus, jTable builds cascade dropdowns!
						options: function (data) 
						{if (data.source == 'list') {return '/SearchResults?mode=stateList&CountryCode=0&format=json';}
						 return '/SearchResults?mode=stateList&format=json&CountryCode=' + data.dependedValues.CountryCode; } },	
                       }}, 
					   function (data) {  data.childTable.jtable('load');}); //opened handler
                     });
                     return $img;
                    }
              },
			// end child table	
			FirstName: {title: 'First Name', width: '30%'},
			LastName: { title: 'Last Name', width: '30%'}, 
			PrimaryEmail: {title: 'Email Address', width: '40%' }
		   }
        });
		 $('#LoadRecordsButton').click(function (e) {
            e.preventDefault();
            $('#SupervisorTableContainer').jtable('load', {
                lastname: $('#lastname').val(),
                primaryEmail: $('#email').val()
            });
        });
     });

Open in new window

      
//Search.cfm
<cfoutput>
<form name="form1" method="post" >
<div id="SupervisorTableContainer">
<input id="openorg" value="Submit openorg " class="open-org" style="display:none" type="submit">
<input id="noopenorg" value="Submit noopenorg" style="display:none" type="submit">
</form> 
</cfoutput>

Open in new window

test.js
RNithikAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
How about something like this (see code below).

This picks up the click on a checkbox inside the child table (you need tochange the id to the correct id). It then checks to see if the number of checked items is 0 - if it is it shows the openorg button and hides the noopenorg - otherwise vice versa.

Your question was a bit ambiguous because both buttons are initially hidden - so what happens if the user doesn't click anything - no buttons to show.
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
    $('#childTableID :checkbox').click(function() {
        if ($('#childTableID :checked').length == 0) {
            $('#openorg').show();
            $('#noopenorg').hide();
        }
        else {
            $('#openorg').hide();
            $('#noopenorg').show();
        }
    });
});
</script>
<style type="text/css">
</style>
</head>
<body>
<input type="checkbox" id="fred1" > Yes1
Emulating childTable
<div id="childTableID">
    <input type="checkbox" id="fred2" > Yes2
    <input type="checkbox" id="fred3" > Yes3
    <input type="checkbox" id="fred4" > Yes4
</div>
    
<input id="openorg" value="Submit openorg " class="open-org" style="display:none" type="submit">
<input id="noopenorg" value="Submit noopenorg" style="display:none" type="submit">
    
</body>
</html>

Open in new window

0
RNithikAuthor Commented:
Hi,

Thanks for your suggestion. I wrote like that earlier..it works fine normal form with jquery.

But here It won't work since check boxes are associated with jtable.

so we need to use selectionChanged: function () with .jtable('selectedRows')

or we need to write some other way.. Could some body help me to write using jtable functions in .js file

http://www.jtable.org/Demo/SelectingRows

Thanks
Nithik
0
RobOwner (Aidellio)Commented:
But here It won't work since check boxes are associated with jtable.

It won't work or it doesn't work?  I don't see a problem with julian's code given the buttons are not part of the table.  jtable is a plugin for jQuery so there's no conflict just an extra click event being processed on the page.  

why would you not just use the above code from julian?
0
Julian HansenCommented:
If you change the JQuery to
$(function() {
	$('.jtable').on('click', ':checkbox', function() {
		if ($('.jtable :checked').length == 0) {
			$('#openorg').show();
			$('#noopenorg').hide();
		}
		else {
			$('#openorg').hide();
			$('#noopenorg').show();
		}
	});
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Scripting Languages

From novice to tech pro — start learning today.