Guriddo » Topic: Trigger ajax call from change in inline edit dropdown

Trigger ajax call from change in inline edit dropdown

Guriddo
inline edit dropdown
Trigger ajax call from change in inline edit dropdown

Tagged: inline edit dropdown

This topic has 12 replies, 2 voices, and was last updated 7 years ago by guriddo.support.

Creator

Topic
March 20, 2018 at 11:38 am #126781

sagana
Participant

From what I have read on this issue I believe it should be possible to trigger an action from a change on a dropdown in an inline edit by using editoptions -> dataEvents, however all the examples I see are javascript rather than the php type syntax. I have the following which does not work:-

$grid->setColProperty("TestType",array("label"=>"Type", "width"=>70, "editable"=>true, "edittype"=>"select","editoptions"=>array("value"=>"{$types}"), "search"=>false, "sortable"=>true,"dataEvents"=>array("type"=>"change","fn"=>"function(e){alert('change noted');}")));

Is this the correct syntax and if not what should it be please.
Creator

Topic

Viewing 12 replies - 1 through 12 (of 12 total)

Author

Replies

March 20, 2018 at 11:48 am #126783

guriddo.support

Participant

Hello,

In the syntax is missed “js:” prefix. We have described how to work with JavaScript in PHP here

In your case this work you can try with this:

$grid->setColProperty("TestType",array("label"=>"Type", "width"=>70, "editable"=>true, "edittype"=>"select","editoptions"=>array("value"=>"{$types}"), "search"=>false, "sortable"=>true,"dataEvents"=>array(
    "type"=>"change",
    "fn"=>"js:function(e){alert('change noted');}")));

$grid->setColProperty("TestType",array("label"=>"Type", "width"=>70, "editable"=>true, "edittype"=>"select","editoptions"=>array("value"=>"{$types}"), "search"=>false, "sortable"=>true,"dataEvents"=>array(

"type"=>"change",

"fn"=>"js:function(e){alert('change noted');}")));

Kind Regards,

Will

Guriddo Support Team

March 20, 2018 at 1:32 pm #126784

sagana

Participant

Hi will
Many thanks for your prompt reply. Unfortunately dropping your code in (or inserting the js:) does not seem to be firing in as much as no alert box pops up.
Any other ideas please.

March 20, 2018 at 5:27 pm #126787

guriddo.support

Participant

Hello,

Sorry, but I do not have mentioted that you put dataEvents in not correct place – the dataEvents is a part of editoptions. Try this:

$grid->setColProperty("TestType",
array(
   "label"=>"Type", 
   "width"=>70, 
   "editable"=>true, 
   "edittype"=>"select",
   "editoptions"=>array(
       "value"=>"{$types}",
       "dataEvents"=>array(
          "type"=>"change",
          "fn"=>"js:function(e){alert('change noted');}")
       )
   ),
   "search"=>false, 
   "sortable"=>true
));

$grid->setColProperty("TestType",

array(

"label"=>"Type",

"width"=>70,

"editable"=>true,

"edittype"=>"select",

"editoptions"=>array(

"value"=>"{$types}",

"dataEvents"=>array(

"type"=>"change",

"fn"=>"js:function(e){alert('change noted');}")

)

"search"=>false,

"sortable"=>true

));

Kind Regards,
Will

Guriddo Support Team

March 21, 2018 at 11:45 am #126789

sagana

Participant

Hi Will, thank you for looking at this but unfortunately I am still not getting the alert box I would expect. Code is as follows:-

// Change some property of the field(s) 
$grid->setColProperty("CYOQuestionID", array("label"=>"QID", "width"=>30, "sortable"=>true)); 
$grid->setColProperty("CYOTestQuestionID", array("label"=>"ID", "key"=>true, "width"=>30, "sortable"=>true));
$grid->setColProperty("Title", array("label"=>"Title", "width"=>150, "editable"=>false, "sortable"=>true));
$grid->setColProperty("CuratorReference", array("label"=>"Curator Reference", "width"=>120, "editable"=>true, "sortable"=>true));

$grid->setColProperty("TestType",
array(
   "label"=>"Type", 
   "width"=>70, 
   "editable"=>true, 
   "edittype"=>"select",
   "editoptions"=>array("value"=>"{$types}","dataEvents"=>array("type"=>"change","fn"=>"js:function(e){alert('change noted');}")),
   "search"=>false, 
   "sortable"=>true
));
    
$grid->setColProperty("SubTest1", array("label"=>"Subtest 1", "width"=>60, "editable"=>true, "edittype"=>"select", "editoptions"=>array("value"=>"{$subtest1}"), "search"=>false, "sortable"=>true)); 
$grid->setColProperty("SubTest2", array("label"=>"Subtest 2", "width"=>60, "editable"=>true, "edittype"=>"select", "editoptions"=>array("value"=>"{$subtest2}"), "search"=>false, "sortable"=>true));
$grid->setColProperty("TestTypeID", array("label"=>"Test Type", "hidden"=>true, "width"=>30, "stype"=>"select", "searchoptions"=>array("searchhidden"=>true, "sopt"=>array("eq"),"value"=>"{$types}")));
$grid->setColProperty("SubTestID", array("label"=>"SubTest 1", "hidden"=>true, "width"=>30, "stype"=>"select", "searchoptions"=>array("searchhidden"=>true, "sopt"=>array("eq"),"value"=>"{$subtest1}")));
$grid->setColProperty("SubTest2ID", array("label"=>"SubTest 2", "hidden"=>true, "width"=>30, "stype"=>"select", "searchoptions"=>array("searchhidden"=>true, "sopt"=>array("eq"),"value"=>"{$subtest2}")));
$grid->setColProperty("tact", array("label"=>"Actions", "width"=>50, "editable"=>false, "search"=>false));

// Change some property of the field(s)

$grid->setColProperty("CYOQuestionID", array("label"=>"QID", "width"=>30, "sortable"=>true));

$grid->setColProperty("CYOTestQuestionID", array("label"=>"ID", "key"=>true, "width"=>30, "sortable"=>true));

$grid->setColProperty("Title", array("label"=>"Title", "width"=>150, "editable"=>false, "sortable"=>true));

$grid->setColProperty("CuratorReference", array("label"=>"Curator Reference", "width"=>120, "editable"=>true, "sortable"=>true));

$grid->setColProperty("TestType",

array(

"label"=>"Type",

"width"=>70,

"editable"=>true,

"edittype"=>"select",

"editoptions"=>array("value"=>"{$types}","dataEvents"=>array("type"=>"change","fn"=>"js:function(e){alert('change noted');}")),

"search"=>false,

"sortable"=>true

));

$grid->setColProperty("SubTest1", array("label"=>"Subtest 1", "width"=>60, "editable"=>true, "edittype"=>"select", "editoptions"=>array("value"=>"{$subtest1}"), "search"=>false, "sortable"=>true));

$grid->setColProperty("SubTest2", array("label"=>"Subtest 2", "width"=>60, "editable"=>true, "edittype"=>"select", "editoptions"=>array("value"=>"{$subtest2}"), "search"=>false, "sortable"=>true));

$grid->setColProperty("TestTypeID", array("label"=>"Test Type", "hidden"=>true, "width"=>30, "stype"=>"select", "searchoptions"=>array("searchhidden"=>true, "sopt"=>array("eq"),"value"=>"{$types}")));

$grid->setColProperty("SubTestID", array("label"=>"SubTest 1", "hidden"=>true, "width"=>30, "stype"=>"select", "searchoptions"=>array("searchhidden"=>true, "sopt"=>array("eq"),"value"=>"{$subtest1}")));

$grid->setColProperty("SubTest2ID", array("label"=>"SubTest 2", "hidden"=>true, "width"=>30, "stype"=>"select", "searchoptions"=>array("searchhidden"=>true, "sopt"=>array("eq"),"value"=>"{$subtest2}")));

$grid->setColProperty("tact", array("label"=>"Actions", "width"=>50, "editable"=>false, "search"=>false));

March 21, 2018 at 1:59 pm #126790

guriddo.support

Participant

@sagana,

Kindly apologizes that I don’t have this tested.

The problem is that dataEvents is a array of objects – this another array is missed. dataEvents=>array(array(….),…,);

This is tested and work:

$grid->setColProperty("TestType",
array(
   "label"=>"Type", 
   "width"=>70, 
   "editable"=>true, 
   "edittype"=>"select",
   "editoptions"=>array(
       "value"=>"{$types}",
       "dataEvents"=>array(
          array(
             "type"=>"change",
              "fn"=>"js:function(e){alert('change noted');}")
          )
       )
   ),
   "search"=>false, 
   "sortable"=>true
));

$grid->setColProperty("TestType",

array(

"label"=>"Type",

"width"=>70,

"editable"=>true,

"edittype"=>"select",

"editoptions"=>array(

"value"=>"{$types}",

"dataEvents"=>array(

array(

"type"=>"change",

"fn"=>"js:function(e){alert('change noted');}")

)

"search"=>false,

"sortable"=>true

));

Sorry again for the inconvenience.

Kind Regards,
Will

Guriddo Support Team

March 21, 2018 at 3:10 pm #126791

sagana

Participant

Thank you very much Will, I now have the alert I was expecting.

March 29, 2018 at 6:11 pm #126797

sagana

Participant

Hi Will

Your code works brilliantly:-

$grid->setColProperty("TestType",
array("label"=>"Type", "width"=>70, "editable"=>true, "edittype"=>"select", "editoptions"=>array("value"=>"{$types}", "dataEvents"=>array(array("type"=>"change", "fn"=>"js:function(e){updateRandom();}"))), 
"search"=>false, "sortable"=>true));

$grid->setColProperty("TestType",

array("label"=>"Type", "width"=>70, "editable"=>true, "edittype"=>"select", "editoptions"=>array("value"=>"{$types}", "dataEvents"=>array(array("type"=>"change", "fn"=>"js:function(e){updateRandom();}"))),

"search"=>false, "sortable"=>true));

It correctly calls updateRandom() which looks like this

   function updateRandom(event)
    {   
        var grid = $('#randomorderlist');
        var rowKey = grid.jqGrid('getGridParam',"selrow");
        var rows = grid.jqGrid('getDataIDs');
        
        for (i = 0; i < rows.length; i++)
        {
            var rowData = grid.jqGrid('getRowData', rows<em class="d4pbbc-italic"></em>);
            var qid = rowData.CYOTestQuestionID;
            if (qid == rowKey)
            {
                var tqid = rowData.CYOQuestionID;
                var qid = rowData.CYOTestQuestionID;
                var TestType = rowData.TestType;
                var SubTest1 = rowData.SubTest1;
                var SubTest2 = rowData.SubTest2;
                var CuratorReference = rowData.CuratorReference;

function updateRandom(event)

{

var grid = $('#randomorderlist');

var rowKey = grid.jqGrid('getGridParam',"selrow");

var rows = grid.jqGrid('getDataIDs');

for (i = 0; i < rows.length; i++)

{

var rowData = grid.jqGrid('getRowData', rows<em class="d4pbbc-italic"></em>);

var qid = rowData.CYOTestQuestionID;

if (qid == rowKey)

{

var tqid = rowData.CYOQuestionID;

var qid = rowData.CYOTestQuestionID;

var TestType = rowData.TestType;

var SubTest1 = rowData.SubTest1;

var SubTest2 = rowData.SubTest2;

var CuratorReference = rowData.CuratorReference;

etc

The variables have the correct values except the drop down boxes eg. TestType contains the full html <select statement that makes up the dropdown without selected next to the selected item. How do I get the item that has been selected that has fired the Change event?

March 30, 2018 at 11:07 am #126798

guriddo.support

Participant

Hello,

Using getRowData when we are in edit mode will cause unexpected result and behaviour. This is well documented in the JavaScript documentation here

As far as understand from the code fragment, you try to post all the grid data when some value was changed. The question which I need to clarify is: if you try to post all the visible grid data is the all data in edit mode or only the current row is in edit mode – that is – you edit one row with inline edit and change some value of it and after this all the grid which is not in edit mode (except the current edited row) will be posted (or other)

Kind Rgards,

Will

Guriddo Support Team

April 3, 2018 at 3:01 pm #126799

sagana

Participant

Hi Will. while your solution works well wth triggering a javascript call when a selection is made from a dropdown using the dataEvents type=change; what would you use where the inline edit is a text box?

for drop down
$grid->setColProperty("TestType",array("label"=>"Type", "width"=>70, "editable"=>true, "edittype"=>"select", "editoptions"=>array("value"=>"{$types}", "dataEvents"=>array(array("type"=>"change", "fn"=>"js:function(e){updateFixed('test');}"))), "search"=>false, "sortable"=>true));

for text box
$grid->setColProperty("CuratorReference",array("label"=>"Curator Reference", "width"=>120, "sortable"=>true, "edittype"=>"text", "editable"=>true, "editoptions"=>array("dataEvents"=>array(array("type"=>"focusout", "fn"=>"js:function(e){updateFixed('curator');}")))));

in the latter case neither blur, nor focusout seem to work.

April 4, 2018 at 9:41 am #126800

sagana

Participant

In answer to your question of the 30th. I am only posting the changed cell data from the inline edit on a single row at any one time.

April 4, 2018 at 10:06 am #126801

guriddo.support

Participant

Hello,

The change event should work for the textbox field too. T

Guriddo Support Team

April 4, 2018 at 10:08 am #126802

guriddo.support

Participant

Hello,

In the updateEvent(event) you can use $(event.target).val() to get the the value of the current edited select.

Regards,

Will

Guriddo Support Team

Author

Replies

Viewing 12 replies - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

Registered Users: 12,254
Forums: 7
Topics: 10,950
Replies: 23,150
Topic Tags: 324
Empty Topic Tags: 9

13 Users Online

Users: 1 Guest, 12 Bots

Stay connected with us in your favorite flavor!

Trigger ajax call from change in inline edit dropdown

Search Forum

Recent Replies

Forum Statistics

UserOnline