create json format data for selected records from jtable and child jtable

We have following two tables one master jtable SupervisorTableContainer) and another one is child jtable (organizationData). and also i put form (searchsupervisor.cfm) file in below

when we submit (noopenorg) the button in the form, we need to create json data with following fields.

1) contactid, siteid

How to get this data in json format ?

Thanks for all your help.

Thanks
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

=======================================================================
<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

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.

RobOwner (Aidellio)Commented:
When submitting the form, use the jQuery function .serializeArray() to create a JSON string.  Then you could update a hidden field in the form with this string or use ajax to submit it directly.
How are you submitting the data now?
0
RNithikAuthor Commented:
Thanks for your email.

My coldfusion component function expects json format data with contactID, siteID. if I provide this information that would be enough.

can you pls help me to show the code how to write to get these columns using above code.

Thanks for your help in advance.

Thanks
Nithik
0
RobOwner (Aidellio)Commented:
Are you wanting to get the selected rows or all the contactID and siteIDs?
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

RNithikAuthor Commented:
I want code to get json format of contactID and siteID for user selected rows only when he/she click on submit button..

Thanks
Nithik
0
RNithikAuthor Commented:
we need to create site id, and contact id as request/session variables as a json format.  once we get this data in json format, we are calling one action page (updateresults) which expect this json.

thanks in advance..


ex :

--
--
actions: {
                updateaction: '/updateresults?update=super&format=json',      
--
--



thanks
nithik
0
RobOwner (Aidellio)Commented:
So when the user clicks the submit button you can capture this in the form's onsubmit event:
Also using the selectedRows method of your jTable to get the elements
http://www.jtable.org/ApiReference#met-selectedRows

<form method=".." action="whatever.cf" onsubmit="return CheckForm()">
....
<input type='hidden' value='' name='jsondata' id='jsondata' />
</form>

Open in new window


function CheckForm() {
    var $selectedRows = $('#SupervisorTableContainer').jtable('selectedRows');
    var myjson = [];
    $selectedRows.each(function () {
        var record = $(this).data('record');
        myjson.push({ contactID: record.contactID, siteID: record.siteID});
    });
    $('jsondata').val(JSON.stringify(myjson)); // this will encode in a json string
    // the form is submitted and the hidden field has your json string
    return true;
}

Open in new window

0
RobOwner (Aidellio)Commented:
see here for a simple example:

http://jsbin.com/UBUFOLe/1/edit
0
RNithikAuthor Commented:
Hi,
Thanks for your help. currently we are using onsubmit event as a return false.. according to requirement..

can we use your code in other way other than onsubmit function? if yes, then how ?

right now my code looks like below..

<form action="action.cfm" method="post" onsubmit="return false" studentkey="978">			 
		<fieldset>
	        <legend><h3>Search Results</h3></legend>			 
			  	<div id="SupervisorTableContainer">
			  	 				</div>
		     </fieldset>		<input id="SelSupCheck" type="submit" value="Submit openorg " class="open-org"   />
        <input id="SelSupCheck1" type="submit" value="Submit noopenorg" class="open-org1" style="display:none" /> 
     		
	</form>	 

Open in new window

0
RobOwner (Aidellio)Commented:
What's the requirement you speak of?   You've got a submit button in a form...

You've said here http://www.experts-exchange.com/Programming/Languages/Scripting/Q_28228019.html#a39460096 that you are sending the data to the uodateform
0
RNithikAuthor Commented:
i am not able to getting json data after using your code.. can you check the code once again please

and can you put alert message to display json data ?

can you show this code on button click.. (instead of onsubmit function on form tag)

on button click event,  we will display this json data and then we submit the form..





thanks
nithik
0
RobOwner (Aidellio)Commented:
Here you go:  http://jsbin.com/UBUFOLe/2/edit

$(document).ready(function() {
  var myarray = [
    {contactid: "william", siteid: "4"},
    {contactid: "robert", siteid: "2"}
  ];
  
  $('#myfield').val(JSON.stringify(myarray));
  
  console.log($('#myform').serializeArray());
  
  alert(JSON.stringify(myarray));
  
});

Open in new window

0
RNithikAuthor Commented:
When  i click the button,
i am executing following code

<form id="myform">
       --
         --
         <input type="button" name="button1" id="button1" value="json Data" onclick="return CheckForm()" />
    </form>

Open in new window





function CheckForm() {
    var $selectedRows = $('#PersonTableContainer').jtable('selectedRows');
    var myjson = [];
    $selectedRows.each(function () {
        var record = $(this).data('record');
 myjson.push({ contactID: record.contactID, siteID: record.siteID});
    });
    $('jsondata').val(JSON.stringify(myjson)); // this will encode in a json string
    // the form is submitted and the hidden field has your json string
	  alert(JSON.stringify(myjson));
    return false;
}

Open in new window



I am getting alert message like this    [{"contactID":1}]

But i need selected child table record id also

like  [{"contactID":1, "siteID":10}]  //because i checked contact id = 1 and site ID = 10

(contactid is master table and site id is child table )

thanks
Nithik
0
RobOwner (Aidellio)Commented:
This code allows you to select a row (taken from the demo site):

$('#StudentTableContainer').jtable('selectRows',$("tr[data-record-key='39'"));

Open in new window


What I need from you is the full HTML of your page (load your page, right click, view source, copy and paste here).  I'll set up a test on jsbin or jsfiddle to show you how it works.

I would approach it capturing the onSelectionChanged event of the child rows and check that the parent is selected.  One caveat though is once you uncheck the last row in a child table then the parent would need to be deselected too right?
0
RobOwner (Aidellio)Commented:
Once you are able to access the child row then you can get the corresponding attribute.

You have a lot of questions open on this topic.  I would suggest focusing on one at a time
0
RNithikAuthor Commented:
Ok sure thanks for your suggestion and sorry for confusion. I will focus on this question only.

Here is the html file.

what all I need is when I click jsondata button, I have to display alert message like
 [{"contactID":1, "siteID":10}]

OR

When I submit the button, I need to provide this json data to action page.

Thanks again for your time and help.

Regards
Nithik
jsondata.html
0
RobOwner (Aidellio)Commented:
I just need to know a little more because are you wanting this information for all child tables that are open that have rows selected or something else?

For the sake of simplicity this is the code for if one child table is open and you want the parent records:

(untested but will search up until it finds the first data record that should be the parent)
function CheckForm() {
    var selectedRows = $('#PersonTableContainer').jtable('selectedRows');
    var parent_row = $('#PersonTableContainer').closest('.jtable-data-row').data('record');
    var myjson = [];
    selectedRows.each(function () {
        var record = $(this).data('record');
 myjson.push({ contactID: record.contactID, siteID: parent_row.siteID});
    });
    $('jsondata').val(JSON.stringify(myjson)); // this will encode in a json string
    // the form is submitted and the hidden field has your json string
	  alert(JSON.stringify(myjson));
    return false;
}

Open in new window

0
RNithikAuthor Commented:
Thanks for your help.

Here In this case, assume that you have one parent table and one child table, (actually originally I have 2 childs in my code. )But however in first step we will consider one parent and child table case..

when user selects one parent record, and click on img icon to open child table and there also he will select corresponding child record. After that user will submit the button. So we need to pass these values parent form in jsonformat (which opened this dialog) and close the dialog.

hope you understand now.

I am sorry to say that above code Is not working for me.

Thanks
Nithik
0
RobOwner (Aidellio)Commented:
that's ok... lets work through this step by step:

What's the id of the parent table?  PersonTableContainer??
0
RNithikAuthor Commented:
you can see at 22nd line. I put childtable name as 'mgr'.
and also I put parent table name at 8th line as 'person'
see the code once again.

Thank for your follow up.. hope this code helps you to find the solution..

Thanks
Nithik

	<script type="text/javascript">
    $(document).ready(function () {
        $('#PersonTableContainer').jtable({
            title: 'Table of people',
			selecting: true, //Enable selecting
			multiselect: false, //Allow multiple selecting
			selectingCheckboxes: true, //Show checkboxes on first column
			tableID : 'person'
			//selectOnRowClick: false,	
            actions: {
                listAction: '../main/home?mode=person&format=json',	
				createAction: '../main/home?mode=createperson&format=json',			  
          },
		fields: {
                rcid: {key: true, create: false, edit: false, list: false  },
   		   //CHILD TABLE DEFINITION FOR "managers"		
			 Mgrs: {
						title: '',	
						width: '5%',
						sorting: false,
						edit: false,
						create: true,
						tableID : 'mgr',
						display: function (personData) {
						var $img = $('<img src="http://127.0.0.1:8500/MaxTest/images/organization-icon.gif" with="35" height="28"/>');
						$img.click(function () {
						  $('#PersonTableContainer').jtable('openChildTable',
							$img.closest('tr'),
							{
								title: personData.record.rcname +  ' mgrs',
								selecting: true, //Enable selecting
								multiselect: false, //Allow multiple selecting
								selectingCheckboxes: true, //Show checkboxes on first column
								actions: 
								{listAction: '../main/home?mode=mgr&format=json&PersonID=' + personData.record.rcid,
								createAction: '../main/home?mode=person&format=json',
								},
								
								fields: {
										rcid: {  type: 'hidden', defaultValue: personData.record.rcid },
										RDSID: { key: true, create: false,edit: false,list: false},   
										RDSName: {title: 'rds Name',width: '30%' }
										},
							}, 
							function (data) { //opened handler
								data.childTable.jtable('load');
							});
						});
						//Return image to show on the person row
						return $img;
						}
				    },
			
  			 fields: {		RCEmail: { title: 'RCEmail', width: '30%' },   
							RCName: {title: ' RCName',width: '30%' }
					 },
		}
      });
  	  $('#LoadRecordsButton').click(function (e) {
            e.preventDefault();
            $('#PersonTableContainer').jtable('load', {
                rcname: $('#rcname').val(),
                rcemail: $('#rcemail').val()
            });
        });

    });
	</script>

Open in new window

0
RobOwner (Aidellio)Commented:
What i'm interested in is the html and the IDs such as #PersonTableContainer.  That i'm assuming is the parent table.

It is important for the below code to work that you let me know what happens when only a parent row is selected.

This gets all the visible data rows, including children table rows
$('#PersonTableContainer .jtable-data-row');

Open in new window



This gets only the parent rows that are selected
$('#PersonTableContainer>.jtable-main-container>.jtable>tbody>.jtable-row-selected');

Open in new window


This gets all the child data rows that are selected
$('#StudentTableContainer>.jtable-main-container>.jtable>tbody>.jtable-child-row .jtable-row-selected');

Open in new window


Find the parent by using the following selector:

$(this).closest('.jtable-data-row');

Open in new window


So putting this together:

function CheckForm() {

    var myjson = [];

	var selectedChildren = $('#StudentTableContainer>.jtable-main-container>.jtable>tbody>.jtable-child-row .jtable-row-selected');
	
	selectedChildren.each( function(index, Element) {
		var parent_record = $(Element).closest('.jtable-data-row').data('record');
		var child_record = $(this).data('record');
		myjson.push({ contactID: parent_record.contactID, siteID: child_record.siteID });
	});

    $('jsondata').val(JSON.stringify(myjson)); // this will encode in a json string
    
    // the form is submitted and the hidden field has your json string
	alert(JSON.stringify(myjson));

	return false;
}

Open in new window

0
RNithikAuthor Commented:
Sorry no luck..

here I am giving .html doc which you are expecting..

<html>
	<head>
	<script src="/MaxTest/javascripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="/MaxTest/javascripts/jquery-ui-1.9.2.custom.js" type="text/javascript"></script>
<script src="/MaxTest/javascripts/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
<script src="/MaxTest/javascripts/jtable/jquery.jtable.min.js" type="text/javascript"></script>
<link href="/MaxTest/stylesheets/jtable/themes/metro/blue/jtable.min.css" media="all" rel="stylesheet" type="text/css" />
<link href="/MaxTest/stylesheets/ui-lightness/jquery-ui-1.9.2.custom.css" media="all" rel="stylesheet" type="text/css" />
<link href="/MaxTest/stylesheets/ui-lightness/jquery-ui-1.9.2.custom.min.css" media="all" rel="stylesheet" type="text/css" />

	
	<script type="text/javascript">
    $(document).ready(function () {
        $('#PersonTableContainer').jtable({
            title: 'Table of people',
			selecting: true, //Enable selecting
			multiselect: false, //Allow multiple selecting
			tableID : 'person',
			selectingCheckboxes: true, //Show checkboxes on first column
			//selectOnRowClick: false,	
            actions: {
                listAction: '../main/home?mode=person&format=json',	
				createAction: '../main/home?mode=createperson&format=json',			  
          },
			 fields: {
                rcid: {key: true, create: false, edit: false, list: false  },
				rcname: {title: 'Name',width: '30%' },
   		   //CHILD TABLE DEFINITION FOR "managers"		
			 Mgrs: {
                    title: '',	
					width: '5%',
                    sorting: false,
                    edit: false,
                    create: true,
					tableID : 'mgr',
                    display: function (personData) {
					var $img = $('<img src="http://127.0.0.1:8500/MaxTest/images/organization-icon.gif" with="35" height="28"/>');
                    $img.click(function () {
			          $('#PersonTableContainer').jtable('openChildTable',
						$img.closest('tr'),
						{
							title: personData.record.rcname +  ' mgrs',
							selecting: true, //Enable selecting
							multiselect: false, //Allow multiple selecting
							selectingCheckboxes: true, //Show checkboxes on first column
							actions: 
							{listAction: '../main/home?mode=mgr&format=json&PersonID=' + personData.record.rcid,
							createAction: '../main/home?mode=person&format=json',
							},
							
							fields: {
									rcid: {  type: 'hidden', defaultValue: personData.record.rcid },
									RDSID: { key: true, create: false,edit: false,list: false},   
									RDSName: {title: 'rds Name',width: '30%' }
						     },
						}, 
						function (data) { //opened handler
							data.childTable.jtable('load');
						});
					});
		//Return image to show on the person row
					return $img;
					}
				},
			
  			 fields: {		RCEmail: { title: 'RCEmail', width: '30%' }   
						
					 },
		}
      });
  	  $('#LoadRecordsButton').click(function (e) {
            e.preventDefault();
            $('#PersonTableContainer').jtable('load', {
                rcname: $('#rcname').val(),
                rcemail: $('#rcemail').val()
            });
        });

    });
	</script>


</head>
<body>
		

<div class="filtering">
    <form id="myform" method="post" action="home?results"> 
        RC name: <input type="text" name="rcname" id="rcname" />
        RC email: <input type="text" name="rcemail" id="rcemail" />

                 <button type="submit" id="LoadRecordsButton">Load records </button>
         <input type='hidden' value='' name='jsondata' id='jsondata' />
         <button type="submit" id="submgh" onclick="return CheckForm()">submit button</button>
         
         <input type="button" name="button1" id="button1" value="json Data" onclick="return CheckForm1()" />
    </form>
</div>
 

<div id="PersonTableContainer"></div> <br />


<script>
function CheckForm() {
var $selectedRows = $('#PersonTableContainer.jtable-main-container.jtable.tbody.jtable-child-row.jtable-row-selected');
//var $selectedRows1 = $('#PersonTableContainer').closest('.jtable-data-row').data('record');
//var $selectedRows = $('.jtable-child-table-container').jtable('selectedRows');
//var $selectedRows = $('#MyChildTableID').jtable('selectedRows'); 
    //var selectedRows = $closest('tr').find('.jtable-child-table-container').jtable('selectedRows');
    var myjson = [];
	$selectedRows.each(function () {
       var record = $(this).data('record');
		myjson.push({ rcid: record.rcid});
   	});
	
	//$selectedChildRows.each(function () {
//        var record = $(this).data('record');
//		myjson.push({ rcid: record.rcid, rdsid: record.rdsid});
//    });
	
    $('jsondata').val(JSON.stringify(myjson)); // this will encode in a json string
    // the form is submitted and the hidden field has your json string
	  alert(JSON.stringify(myjson));
    return false;
}


function CheckForm1() {
alert("ra");
    var myjson = [];

	var $selectedChildren = $('#PersonTableContainer.jtable-main-container.jtable.tbody.jtable-child-row.jtable-row-selected');
	
	$selectedChildren.each( function(index, Element) {
		var parent_record = $(Element).closest('.jtable-data-row').data('record');
		var child_record = $(this).data('record');
		myjson.push({ rcid: parent_record.rcid, rdsid: child_record.rdsid });
	});

    $('jsondata').val(JSON.stringify(myjson)); // this will encode in a json string
    
    // the form is submitted and the hidden field has your json string
	alert(JSON.stringify(myjson));

	return false;
} 
</script>

</body>
</html> 

Open in new window

0
RNithikAuthor Commented:
this is PersonTableContainer division..

<div id="PersonTableContainer"><div class="jtable-main-container"><div style="display: none; width: 1333px; height: 88px;" class="jtable-busy-panel-background jtable-busy-panel-background-invisible"></div><div style="display: none;" class="jtable-busy-message"></div><div class="jtable-title"><div class="jtable-title-text">Table of people</div><div class="jtable-toolbar"><span class="jtable-toolbar-item jtable-toolbar-item-add-record"><span class="jtable-toolbar-item-icon"></span><span class="jtable-toolbar-item-text">Add new record</span></span></div></div><table class="jtable"><thead><tr><th style="width: 1%;" class="jtable-command-column-header"></th><th style="width: 65.9747%;" class="jtable-column-header"><div class="jtable-column-header-container"><span class="jtable-column-header-text">Name</span><div class="jtable-column-resize-handler"></div></div></th><th style="width: 11.0084%;" class="jtable-column-header"><div class="jtable-column-header-container"><span class="jtable-column-header-text"></span><div class="jtable-column-resize-handler"></div></div></th><th style="width: 22.0169%;" class="jtable-column-header"><div class="jtable-column-header-container"><span class="jtable-column-header-text"></span></div></th></tr></thead><tbody><tr data-record-key="1" class="jtable-data-row jtable-row-even jtable-row-selected"><td class="jtable-selecting-column"><input type="checkbox"></td><td>raj</td><td><img src="http://127.0.0.1:8500/MaxTest/images/organization-icon.gif" with="35" height="28"></td><td></td></tr><tr style="display: table-row;" class="jtable-child-row"><td colspan="4"><div style="display: block;" class="jtable-child-table-container"><div class="jtable-main-container"><div style="display: none; width: 1327px; height: 88px;" class="jtable-busy-panel-background jtable-busy-panel-background-invisible"></div><div style="display: none;" class="jtable-busy-message"></div><div class="jtable-title"><div class="jtable-title-text">raj mgrs</div><button title="Close" class="jtable-command-button jtable-close-button"><span>Close</span></button><div class="jtable-toolbar"><span class="jtable-toolbar-item jtable-toolbar-item-add-record"><span class="jtable-toolbar-item-icon"></span><span class="jtable-toolbar-item-text">Add new record</span></span></div></div><table class="jtable"><thead><tr><th style="width: 1%;" class="jtable-command-column-header"></th><th style="width: 30%;" class="jtable-column-header"><div class="jtable-column-header-container"><span class="jtable-column-header-text">rds Name</span></div></th></tr></thead><tbody><tr data-record-key="10" class="jtable-data-row jtable-row-even"><td class="jtable-selecting-column"><input type="checkbox"></td><td>mgr1</td></tr><tr data-record-key="20" class="jtable-data-row jtable-row-selected"><td class="jtable-selecting-column"><input type="checkbox"></td><td>mgr2</td></tr><tr data-record-key="30" class="jtable-data-row jtable-row-even"><td class="jtable-selecting-column"><input type="checkbox"></td><td>mgr3</td></tr></tbody></table><div style="display: none;" class="jtable-column-resize-bar"></div><div class="jtable-column-selection-container"></div></div></div></td></tr><tr data-record-key="7" class="jtable-data-row"><td class="jtable-selecting-column"><input type="checkbox"></td><td>ramana</td><td><img src="http://127.0.0.1:8500/MaxTest/images/organization-icon.gif" with="35" height="28"></td><td></td></tr></tbody></table><div style="display: none;" class="jtable-column-resize-bar"></div><div class="jtable-column-selection-container"></div></div></div> <br>

Open in new window

0
RobOwner (Aidellio)Commented:
ok it's hard from my end as the data is loaded dynamically and I'm working off the demo from the jtable website.

You'll need to do some debugging to get the right selector for selected rows.  I've put 3 console.log() calls in the function below so please let me know the responses you get.  I've also changed the ID of the form to match what you've posted.

function CheckForm() {

    var myjson = [];

	var selectedChildren = $('#PersonTableContainer>.jtable-main-container>.jtable>tbody>.jtable-child-row .jtable-row-selected');
	
console.log(selectedChildren);  // you should see the checked rows dumped to the console
	
selectedChildren.each( function(index, Element) {
		var parent_record = $(Element).closest('.jtable-data-row').data('record');
		var child_record = $(this).data('record');
		myjson.push({ contactID: parent_record.contactID, siteID: child_record.siteID });
	});
    console.log(myjson);
    $('jsondata').val(JSON.stringify(myjson)); // this will encode in a json string
    
    // the form is submitted and the hidden field has your json string
	console.log(JSON.stringify(myjson));

	return false;
}

Open in new window

0
RNithikAuthor Commented:
getting following output after i select parent record and child record

Object[tr.jtable-data-row]

[Object { rcid=undefined, rdsid=undefined}]

[{}]
0
RNithikAuthor Commented:
Hey,
Thanks for all your great help.
Now we are progressing..
I am able to display these two ids in different format.[{"rcid":1},{"RDSID":10}] with following code.

but i need in json format

like

 [{"rcid":1,"RDSID":10}]

Is there anyway i can format little bit more json format here ?

Thanks
Nithik

function CheckForm() {
var $selectedRows = $('#PersonTableContainer').jtable('selectedRows');
var $childrec =  $('#PersonTableContainer>.jtable-main-container>.jtable>tbody>.jtable-child-row .jtable-row-selected');
var myjson1 = [];
$selectedRows.each(function () {
	var record = $(this).data('record');
	myjson1.push({ rcid: record.rcid });
   console.log(myjson1);
});
$childrec.each(function () {
	var record = $(this).data('record');
	myjson1.push({ RDSID: record.RDSID });
   console.log(myjson1);
});
 $('jsondata').val(JSON.stringify(myjson1)); // this will encode in a json string
 // the form is submitted and the hidden field has your json string
alert(JSON.stringify(myjson1)); 
return false;
}

Open in new window

0
RobOwner (Aidellio)Commented:
Glad we're making progress! :)

You've separated the children from the parents in your code so you're not able to link them the way you want.

You need to either:
get all the selected child rows and as you loop through them get the corresponding parent row
get all the selected parent rows and as you loop through see if there are any selected child rows

I would probably go with the second option off the top of my head as the code for doing this would be more intuitive.
Try this:

function CheckForm() {

    var myjson = [];

	var selectedParents = $('#PersonTableContainer').jtable('selectedRows');
		
	selectedParents.each( function(index, Element) {
		var child_record = $(Element).find('.jtable-row-selected').data('record');
		var parent_record = $(this).data('record');
		myjson.push({ rcid: record.rcid }, { RDSID: record.RDSID });
	});

    $('jsondata').val(JSON.stringify(myjson)); // this will encode in a json string
    
    // the form is submitted and the hidden field has your json string
	console.log(JSON.stringify(myjson));

	return false;
}

Open in new window

0
RNithikAuthor Commented:
Wow so quick.. :)

now Child record is showing as null.

However i wanted to inform you that, user can't select multiple child records. we have restricted them to select only one thru code. so assume that they will select one parent record and one child record only.. so we no need to loop here to find what child records they selected.

thanks
Nithik
0
RobOwner (Aidellio)Commented:
hey I was awake...:)

btw - If there's any way you can set up a link to your site or even a demo site with this functionality i'll be able to sort this out a lot faster

Does the child record show null in every instance?  Is it possible that the user only selects the parent row in which case there is no child row?
0
RobOwner (Aidellio)Commented:
try changing:
var child_record = $(Element).find('.jtable-row-selected').data('record');
            
to

// change "Element" to "this" and also add the [0] to get the first matched
var child_record = $(this).find('.jtable-row-selected')[0].data('record');
0
RNithikAuthor Commented:
getting following error..

TypeError: $(...).find(...)[0] is undefined
      

var child_record = $(this).find('.jtable-row-selected')[0].data('record');
0
RobOwner (Aidellio)Commented:
Do you have a link to the page?
0
RobOwner (Aidellio)Commented:
Without a link to the page, you're going to have to get your hands dirty and do some debugging.  Open the console via the dev tools (press F12).  From here you can execute jquery commands as if they were in script ie

console.log($(this).find('.jtable-row-selected')) // replacing "this" with the html id

this will either give you "nothing" or a html element(s).   You then work down from there

You can also set a breakpoint in your script so that you can see what each local variable is holding including the "this" variable
0
RNithikAuthor Commented:
no luck.


Here I have created one dummy site for you to look at the screen and code thru FTP..

main files are  :

views\main\home.cfm
views\layout.cfm
controllers\main.cfc


ftp.nithikdeva.com

userid : appuser
pwd : Monster1

url : http://nithikdeva.com/ramtest/rewrite.cfm/main/home?reload=true

type 'ra' on RC name textbox and click on Load record button.

it displays 2 records

select first record by clicking organization icon (besides you can see that). it displays child table and select one record from child table

and click on submit button, then we need to get the data in json format like

[{"rcid":1},{"RDSID":10},{"locid":51}] and need to pass to action page..

When you click on json Data1 button, we can see alert message individually. but we need to combine and display in above format as we discussed earlier.


Thanks  for your great help. hope this helps you to understand and resolve..

-RNithik
0
RobOwner (Aidellio)Commented:
thanks, that's made it so much easier for me:

so here goes:
you'll see that i've added the .next() to the child_record as the child row is the next sibling to the parent row.  It's not a descendant of the row of that of the parent.

I will log in and test but just getting access to the page has allowed me to debug it and I'm reasonably confident it will work.

function CheckForm() {

    var myjson = [];

	var selectedParents = $('#PersonTableContainer').jtable('selectedRows');
		
	selectedParents.each( function(index, Element) {
		var child_record = $(this).next().find('.jtable-row-selected').data('record');
		var parent_record = $(this).data('record');
		myjson.push({ rcid: parent_record.rcid }, { RDSID: child_record.RDSID }, {locid: child_record.locid});
	});

    $('jsondata').val(JSON.stringify(myjson)); // this will encode in a json string
    
    // the form is submitted and the hidden field has your json string
	console.log(JSON.stringify(myjson));

	return false;
}

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
RNithikAuthor Commented:
glad that your code is working fine in my dummy example. but sad to say that it is not working in real code.. :(

search-modal-window.js
 
    please see 143 line open.org1.click function which is calling from _supervisorSearch.cfm (at 26th line )

but for some reason, it is showing as a child record undefined. (eventhough our dummy example is working fine.)
same code we put it in real code.

but shwoing like this..

[{"ContactID":984},{}]   // this should have two parameter.. selected contact id and siteid

basically i need to pass jsondata to url : "/practicumBeta/rewrite.cfm/app.Practicums/SelectedSupervisor?format=json",
(practicum.cfc)

and close the dialog.

I put following 4 files in our server for your review.

_supervisorSearch.cfm (views\app\practicums folder)
search-modal-window.js (javascript\supervisor folder)
Practicums.cfc (controllers\app folder
search-result-table.js (javascript\supervisor  folder)

Prabably if you see the code, you will get an idea where we are doing mistake.

See this guy used same our logic in php..
and written selected records for parent and child in the code itself (like search-result-table.js) if you see view source of this file..

http://web3.swayam-hosted.co.uk:81/jTable/

may i know your email id ? thought to talk with you for few mins.. :)

thanks
Rnithik
0
RNithikAuthor Commented:
Thanks for all your help.

It has been resolved now..

Thanks
Rnithik
0
RNithikAuthor Commented:
$('#StudentTableContainer>.jtable-main-container>.jtable>tbody>.jtable-child-row .jtable-row-selected');

how can i see the selectors they way you see above


Becos right now i am trying to select the records which are in 3rd child which i posted recently.. i need your help.

thanks
rnithik
0
RobOwner (Aidellio)Commented:
I'm using Google chrome. I right click the cell or row in your table and select "inspect element". It will then show you what classes have been applied to the HTML
0
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.