Ipopts for asynchronous update on select.

Ipopts for asynchronous update on select.

whitbaconwhitbacon Posts: 40Questions: 2Answers: 0
edited May 2013 in Editor
I am trying to do a select with a sub select. What is the event after you update a select? Are there any examples?

Replies

  • allanallan Posts: 63,383Questions: 1Answers: 10,449 Site admin
    > 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
  • whitbaconwhitbacon Posts: 40Questions: 2Answers: 0
    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]
  • allanallan Posts: 63,383Questions: 1Answers: 10,449 Site admin
    Put it just after your Editor initialisation. The nodes are available then, so you can use them there.

    Allan
  • whitbaconwhitbacon Posts: 40Questions: 2Answers: 0
    What about the function same place?
  • allanallan Posts: 63,383Questions: 1Answers: 10,449 Site admin
    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
  • whitbaconwhitbacon Posts: 40Questions: 2Answers: 0
    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"});
  • whitbaconwhitbacon Posts: 40Questions: 2Answers: 0
    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.
  • whitbaconwhitbacon Posts: 40Questions: 2Answers: 0
    edited May 2013
    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]
  • whitbaconwhitbacon Posts: 40Questions: 2Answers: 0
    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]
  • whitbaconwhitbacon Posts: 40Questions: 2Answers: 0
    edited May 2013
    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
  • whitbaconwhitbacon Posts: 40Questions: 2Answers: 0
    The page is here

    http://shaening.com/trackcase/caseactivity.php
  • whitbaconwhitbacon Posts: 40Questions: 2Answers: 0
    edited May 2013
    ok made it one step closer. It is working, but only after the original is updated a second time.
  • allanallan Posts: 63,383Questions: 1Answers: 10,449 Site admin
    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
  • whitbaconwhitbacon Posts: 40Questions: 2Answers: 0
    I found that. Thanks for the help. I will post the code that worked in a little bit.
  • whitbaconwhitbacon Posts: 40Questions: 2Answers: 0
    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!
  • cbp8092cbp8092 Posts: 14Questions: 1Answers: 0
    This post was very helpful. Thank you for sharing.
This discussion has been closed.