asked on

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

Julian Hansen

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

RNithik

ASKER

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

Rob

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?

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial