Ipopts for asynchronous update on select.

whitbacon

I am trying to do a select with a sub select. What is the event after you update a select? Are there any examples?

allan

> What is the event after you update a select?

Just the standard `change` event. You can use Editor's `node()` method to get the select element:

[code]
$( 'select', editor.node( 'mySelectField' ) ).on( 'change', function () {
editor.field( 'mySubSelect' ).update( ... );
} );
[/code]

Regards,
Allan

whitbacon

I undertand the change and node piece, but am not entirely sure where to put it. I have my put my code below yet have the following two questions:

1. I do not know where to put the change function. I have placed it, but it is not working as is.


Where does the function my mysusbselectfunc(editor.node( 'activity' )) live. It needs to go to the server through php and return the array.

I am comfortable with php and have a little comfort with javascript. The problems is how to make things interface with editor?



[code]

var editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "php/table.caseactivity.php",
"domTable": "#caseactivity",
"events": {
$( 'select', editor.node( 'activity' ) ).on( 'change', function () {
alert editor.node( 'activity' )
} },
"fields": [
{
"label": "caseid",
"name": "caseid",
"type": "hidden"
},
{
"label": "Activity",
"name": "activity",
"type": "select",
"ipOpts": [
{
"label": "a",
"value": "a"
},
{
"label": "b",
"value": "b"
},
{
"label": "c",
"value": "c"
}
]
},
{
"label": "Activity Detail",
"name": "activitydetail",
"type": "select",
"ipOpts": [
mysusbselectfunc(editor.node( 'activity' ))
]
},

},
{
"label": "Date",
"name": "activitydate",
"type": "text"
},
{
"label": "Time",
"name": "activitytime",
"type": "text"
},
{
"label": "Duration",
"name": "activityduration",
"type": "text"
},
{
"label": "Activity By",
"name": "activityby",
"type": "text"
},
{
"label": "Location",
"name": "activitylocation",
"type": "text"
},
{
"label": "Description",
"name": "activityshortdescription",
"type": "text"
},
{
"label": "Future Goals",
"name": "goalsforfuture",
"type": "text"
},
{
"label": "Other",
"name": "other",
"type": "text"
},
{
"label": "activityid",
"name": "activityid",
"type": "text"
},
{
"label": "activitydetailid",
"name": "activitydetailid",
"type": "text"
}
]
} );


[/code]

allan

Put it just after your Editor initialisation. The nodes are available then, so you can use them there.

Allan

whitbacon

What about the function same place?

allan

I'm not sure I quite understand I'm afraid. The code you've pasted above is not valid Javascript. I'd expect that to be throwing an error in your browser. Is it not?

Allan

whitbacon

I cant even get this to work

event_editor.field('activitydetail').update({"label": "x","value": "x"});

or this

event_editor.field('activitydetail').update("ipOpts":{"label": "x","value": "x"});

whitbacon

Sorry I am breaking this down in pieces. Heres what I have so far:

[code]
(function($){

$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "php/table.caseactivity.php",
"domTable": "#caseactivity",
"fields": [
{
"label": "caseid",
"name": "caseid",
"type": "hidden"
},
{
"label": "Activity",
"name": "activity",
"type": "select",
"ipOpts": [
{
"label": "a",
"value": "a"
},
{
"label": "b",
"value": "b"
},
{
"label": "c",
"value": "c"
}
]
},
{
"label": "Activity Detail",
"name": "activitydetail",
"type": "select",
"ipOpts": [
{
"label": "1",
"value": "1"
},
{
"label": "2",
"value": "2"
},
{
"label": "3",
"value": "3"
}
]
},
{
"label": "Date",
"name": "activitydate",
"type": "text"
},
{
"label": "Time",
"name": "activitytime",
"type": "text"
},
{
"label": "Duration",
"name": "activityduration",
"type": "text"
},
{
"label": "Activity By",
"name": "activityby",
"type": "text"
},
{
"label": "Location",
"name": "activitylocation",
"type": "text"
},
{
"label": "Description",
"name": "activityshortdescription",
"type": "text"
},
{
"label": "Future Goals",
"name": "goalsforfuture",
"type": "text"
},
{
"label": "Other",
"name": "other",
"type": "text"
},
{
"label": "activityid",
"name": "activityid",
"type": "text"
},
{
"label": "activitydetailid",
"name": "activitydetailid",
"type": "text"
}
]
} );

$( 'select', editor.node( 'activity' ) ).on( 'change', function () {
window.alert("value:" );

event_editor.field('activitydetail').update([{"label": "x","value": "x"}]);

// editor.set( 'activitydetail', 'Test user' );
} );

[/code]

It is currently not adding anything to the arrray of answeres for activity detail.

whitbacon

Since update was not working I was thinking of using the add. Is there anyway to add this as the second field?
[code]
editor.add( {
"label": "Activity Detail",
"name": "activitydetail",
"type": "select",
"ipOpts": [
{
"label": "1",
"value": "1"
},
{
"label": "2",
"value": "2"
},
{
"label": "3",
"value": "3"
}
]
} );
[/code]

whitbacon

Sorry overtired trying to get this done.

[code]
event_editor.field('activitydetail').update([{"label": "x","value": "x"}]);
[/code]

should be

[code]
editor.field('activitydetail').update([{"label": "x","value": "x"}]);
[/code]

whitbacon

Almost there:

[code] var test= new Array({"label" : "a", "value" : "a"});


function loader(){
test.splice(0,1);
$.ajax({
url: 'php/get_activitydetail.php',
async: true,
dataType: 'json',
success: function (json) {
for(var a=0;a

whitbacon

The page is here

http://shaening.com/trackcase/caseactivity.php

whitbacon

ok made it one step closer. It is working, but only after the original is updated a second time.

allan

Thank you for the link - but it's password protected :-).

Looking at this code:

[code]
$( 'select', editor.node( 'activity' ) ).on( 'change', function () {
event_editor.field('activitydetail').update([{"label": "x","value": "x"}]);
} );
[/code]

I would suspect that isn't working because there doesn't appear to be a variable called `event_editor` . You initialise it at the start of your code above to be `editor` not `event_editor` .

Allan

whitbacon

I found that. Thanks for the help. I will post the code that worked in a little bit.

whitbacon

I got a poke to post the code.

here is the js saved as a php file

[code]
<?php
header('Content-type: text/javascript');


?>

var test= new Array({"label" : "", "value" : ""});
var obj = '';


function selectloader(activitystr){
test = [];
$.ajax({
type: "POST",
url: 'php/get_select.php',
data: "lookuplist=" + activitystr,
async: false,
dataType: 'json',
success: function (json) {
for(var a=0;a]
}
} );
} );

}(jQuery));

[/code]

Here is the php
from the get_activity_detail.php:

[code]
<?

require_once('connectpdo.php');

$ctype = $_POST['ctype'];

$par = $_POST['parent'];


$sth = $dbh->prepare("SELECT id, lookupname FROM lookuptable WHERE casetype = :casetype and parent = :parent ORDER BY lookupname");
$sth-> bindParam(':casetype', $ctype, PDO::PARAM_STR);
$sth-> bindParam(':parent', $par, PDO::PARAM_STR);
$sth->execute();




$stack=array();

while ($row = $sth->fetch(PDO::FETCH_ASSOC)) {

array_push($stack,array($row['lookupname'],$row['lookupname']));

}

echo json_encode($stack);



?>
[/code]

the activity select file looks the same!

cbp8092

This post was very helpful. Thank you for sharing.