RNithik
asked on
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
------------------------
========== ========== ========== ========== =====
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()
});
});
});
==========================<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>
ASKER
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
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
Are you wanting to get the selected rows or all the contactID and siteIDs?
ASKER
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
Thanks
Nithik
ASKER
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=sup er&format= json',
--
--
thanks
nithik
thanks in advance..
ex :
--
--
actions: {
updateaction: '/updateresults?update=sup
--
--
thanks
nithik
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
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>
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;
}
ASKER
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..
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>
What's the requirement you speak of? You've got a submit button in a form...
You've said here https://www.experts-exchange.com/questions/28228019/create-json-format-data-for-selected-records-from-jtable-and-child-jtable.html?anchorAnswerId=39460096#a39460096 that you are sending the data to the uodateform
You've said here https://www.experts-exchange.com/questions/28228019/create-json-format-data-for-selected-records-from-jtable-and-child-jtable.html?anchorAnswerId=39460096#a39460096 that you are sending the data to the uodateform
ASKER
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
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
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));
});
ASKER
When i click the button,
i am executing following code
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
i am executing following code
<form id="myform">
--
--
<input type="button" name="button1" id="button1" value="json Data" onclick="return CheckForm()" />
</form>
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;
}
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
This code allows you to select a row (taken from the demo site):
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?
$('#StudentTableContainer').jtable('selectRows',$("tr[data-record-key='39'"));
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?
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
You have a lot of questions open on this topic. I would suggest focusing on one at a time
ASKER
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
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
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)
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;
}
ASKER
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
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
that's ok... lets work through this step by step:
What's the id of the parent table? PersonTableContainer??
What's the id of the parent table? PersonTableContainer??
ASKER
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
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>
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
This gets only the parent rows that are selected
This gets all the child data rows that are selected
Find the parent by using the following selector:
So putting this together:
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');
This gets only the parent rows that are selected
$('#PersonTableContainer>.jtable-main-container>.jtable>tbody>.jtable-row-selected');
This gets all the child data rows that are selected
$('#StudentTableContainer>.jtable-main-container>.jtable>tbody>.jtable-child-row .jtable-row-selected');
Find the parent by using the following selector:
$(this).closest('.jtable-data-row');
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;
}
ASKER
Sorry no luck..
here I am giving .html doc which you are expecting..
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>
ASKER
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>
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.
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;
}
ASKER
getting following output after i select parent record and child record
Object[tr.jtable-data-row]
[Object { rcid=undefined, rdsid=undefined}]
[{}]
Object[tr.jtable-data-row]
[Object { rcid=undefined, rdsid=undefined}]
[{}]
ASKER
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
Thanks for all your great help.
Now we are progressing..
I am able to display these two ids in different format.[{"rcid":1},{"RDSID
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;
}
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:
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:
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;
}
ASKER
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
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
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?
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?
try changing:
var child_record = $(Element).find('.jtable-r ow-selecte d').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');
var child_record = $(Element).find('.jtable-r
to
// change "Element" to "this" and also add the [0] to get the first matched
var child_record = $(this).find('.jtable-row-
ASKER
getting following error..
TypeError: $(...).find(...)[0] is undefined
var child_record = $(this).find('.jtable-row- selected') [0].data(' record');
TypeError: $(...).find(...)[0] is undefined
var child_record = $(this).find('.jtable-row-
Do you have a link to the page?
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-ro w-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
console.log($(this).find('
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
ASKER
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
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},{
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.cf m/app.Prac ticums/Sel ectedSuper visor?form at=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
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.cf
(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
ASKER
Thanks for all your help.
It has been resolved now..
Thanks
Rnithik
It has been resolved now..
Thanks
Rnithik
ASKER
$('#StudentTableContainer> .jtable-ma in-contain er>.jtable >tbody>.jt able-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
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
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
How are you submitting the data now?