Change AJAX url

rpmccormick · August 2015

I have a bunch of tables that are not loaded until after a drop-down is selected...

    function refTable(name)
     {$('#spin'+name).show();
      $('#tbl'+name).DataTable().ajax.url('/api/tables/get'+name+'.php?region='+userRegion+'&zone='+$('#selZone').val())
                                .load(function() {
                                                  $('#spin'+name).hide();
                                                  $('#tbl'+name).DataTable().columns.adjust().responsive.recalc()
                                                 });
     }

This has been working fine for me, but now I am adding an editor to one of the tables.

    var editZoneAirports = new $.fn.dataTable.Editor(
     {"ajax": "/api/tables/getZoneAirports.php?region="+userRegion+"&zone=00001",
      "table": "#tblZoneAirports",

As you can see above, I have hard-coded zone=00001 so that I can test, but really I need to handle it just like my DataTables... no ajax: on initialization, but set a custom ajax each time the zone drop-down is changed.

I have tried editZoneAirports.ajax and editZoneAirports.Editor().ajax with no luck.

Is this possible?

rpmccormick · August 2015

Here is detail of what I am currently stuck on. Thanks for any suggestions you can provide.

Global variable Region
At top of page, Select Zone

Table of Region, Zone, Airport, PriceID1, PriceID2 that refreshes when zone is changed.
Table allows in-line editing of PriceID1 and PriceID2 which are selects.
Table allows "New" and asks for Airport, PriceID1, and PriceID2 which are selects.

ISSUE #1 described in first post above...
How do I update and refresh editors ajax when a new Zone is selected?

ISSUE #2 cross-table lookup can't JOIN
I don't want to display PriceID1 and PriceID2 in the table... I want to display the name from a different table. I load the selects from the other table, so everything is fine when editing, but when nor editing how can I have both PriceID1 and PriceID2 instead display PriceName FROM Prices WHERE ID=...? I know I could do ajax in the renderer, but that would be very slow. I could also make a VIEW and link the table to that, but DT can't create a new row on a VIEW. DT php JOIN examples don't seem to work for my case.

ISSUE #3 in-line editing is erasing the Airport field
When you in-line edit PriceID1/2, and it saves the change, the Airport is always set to empty-string. I believe this is because even though I am only in-line editing a single field, DT is updating the entire row... and the Airport fields is a type=select... and the select does not include that row's Airport. That is by design, since you only see the Airport select when you are creating a New row, and the user should not be able to add an Airport that is already added.

ISSUE #4 added fields
I had to add RegionID and ZoneID to the editor fields in order for New and in-line edits to handle the data properly. Is there anyway I can have hidden fields? ...the user doesn't need to see those IDs when they press New.

ISSUE #5 make in-line always visible?
It is ok the way it works where you click a single field to in-line edit, but I think it would be better if I could just have a table of always visible selects, always in edit-mode (or maybe just both selects visible for selected row). I could do this with the render function, then attach my own ajax callbacks to select changes... I'd just prefer to use the power of Editor and it's php-libs rather than have to do everything from scratch. Is this possible?

ISSUE #6 selectize add-option
All of these selects are using the selectize plugin. With normal selectize instances, I can attach an onCreate method and enable users to type new values into the select box. I can't seem to figure out how to do that for an Editor type=selectize component. Because of this I am considering using normal selectize instances in the render and doing all my own ajax like I mentioned in #5 above. I sure hope there is an easy way to #5 and #6 using the Editor libraries though.

rpmccormick · August 2015

I feel like I got close to getting your JOIN syntax working... here is my failed attempt:

       {Editor::inst($db, 'Pricing_Airports', 'ID')
          ->fields(
                    Field::inst('ID'),
                    Field::inst('FAA'),
                    Field::inst('Air2Zone'),
                    Field::inst('Zone2Air')
                  )
          ->join(    Join::inst('Pricing_Rules', 'array')
                    ->join('Air2Zone', 'ID' )
                    ->fields(
                    Field::inst('name')
                            )
                )*/
          ->join(    Join::inst('Pricing_Rules', 'array')
                    ->join('Zone2Air', 'ID' )
                    ->fields(
                    Field::inst('name')
                            )
                )
          ->where( 'RegionID' , $region, '=')   //ignored if '' - not no result as expected
          ->where( 'ZoneID'   , $zone   , '=')   //ignored if '' - not no result as expected
          ->process( $_POST )
          ->json();
       }

Here is the Result:

{"data":[
{"DT_RowId":"row_00001","ID":"00001","FAA":"JFK","Air2Zone":"00002","Zone2Air":"00001","Pricing_Rules":[{"name":"Default Rate"},{"name":"Default Rate"},{"name":"Default Rate"},{"name":"Default Rate"}]},
{"DT_RowId":"row_00002","ID":"00002","FAA":"EWR","Air2Zone":"00002","Zone2Air":"00001","Pricing_Rules":[{"name":"Default Rate"},{"name":"Default Rate"},{"name":"Default Rate"},{"name":"Default Rate"}]}
]}

I don't know why Pricing_Rules is an array of 5 things, all "Default Rate" (the name for 00001). What I need is to display "Default Rate" instead of "00001" or "Other Rate" instead of "00002" in the table under the Air2Zone and Zone2Air columns.

rpmccormick · August 2015

Well, I figured out how to enable adding to selects:

'options': getSelect('Rules.php?region='+userRegion+'&label=1'), 'opts': {create: function(input, callback) {selRuleCreate(input, callback)}}},

But I ran into a new issue... I cannot open a DT Editor to add the new option while in-line edit is active.

    function selRuleCreate(input, callback)
     {if (input.length > 0)
       {addPricingRule.create({title: 'Create New Pricing Rule', buttons: 'Save'});
        addPricingRule.field('Name').set(input);
        addPricingRule.field('Region').set(userRegion);
        addPricingRule.field('PricePerMile').set('0.00');
        addPricingRule.field('BaseMiles').set('100');

        //later call back with correct ID...  after successful DT add
        callback({value: '00009', text: input});

I get the error "Uncaught TypeError: Cannot read property 'blurOnBackground' of undefined" when I try to run addPricingRule.create().

If I blur the in-line editing, then use the console to run addPricingRule.create() it works fine, but I get the same error from console if I run it when an in-line select is visible.

NOTE: "addPricingRule" is a second editor that is not linked to a table. I want to invoke it when someone adds to a selectize drop-down from within editing "editZoneAirports"

rpmccormick · August 2015

When I run "addPricingRule.create()" from within editZoneAirports.create() (actually from within the window after clicking the "New" tabletools button) I do not get the 'blurOnBackground' error that I get when in-line editing... I don't get any error but I don't see the addPricingRule editor popup on top of the editZoneAirports editor either... nothing happens.

rpmccormick · August 2015

I got a little closer to what I need for the Name display...

       {Editor::inst($db, 'Pricing_Airports', 'ID')
          ->fields(
                    Field::inst('Pricing_Airports.ID'),
                    Field::inst('Pricing_Airports.FAA'),
                    Field::inst('Pricing_Airports.Air2Zone')
                         ->options( 'Pricing_Rules', 'ID', 'Name' ),
                    Field::inst('Pricing_Airports.Zone2Air')
                  )
          ->leftJoin( 'Pricing_Rules', 'Pricing_Airports.Air2Zone', '=', 'Pricing_Rules.ID' )

The above seems to have all the correct info in the JSON (though I still don't quite get how to render the Name in place of the Air2Zone in the table)

{"data":[{"DT_RowId":"row_00001","Pricing_Airports":{"ID":"00001","FAA":"JFK","Air2Zone":"00001","Zone2Air":"00000"}},{"DT_RowId":"row_00002","Pricing_Airports":{"ID":"00002","FAA":"EWR","Air2Zone":"00001","Zone2Air":"00002"}}],"options":{"Pricing_Airports.Air2Zone":[{"value":"00001","label":"Default Rate"},{"value":"00002","label":"EWR to NYC Sout"}]}}

The real issue is that I need to pull Zone2Air from the same Pricing_Rules database, but when I try anything like that I get this error:

{"error":"SQLSTATE[42000]: Syntax error or access violation: 1066 Not unique table\/alias: 'Pricing_Rules'","data":[]}

How can I use a table Alias? ("Pricing_Rules pr1" and "Pricing_Rules pr2")

rpmccormick · August 2015

JSON:

{"data":

[{"DT_RowId":"row_00001","Pricing_Airports":
{"ID":"00001","FAA":"JFK","Air2Zone":"00001","Zone2Air":"00000"}},

{"DT_RowId":"row_00002","Pricing_Airports":
{"ID":"00002","FAA":"EWR","Air2Zone":"00001","Zone2Air":"00002"}}],

"options":{"Pricing_Airports.Air2Zone":
                      [{"value":"00001","label":"Default Rate"},
                       {"value":"00002","label":"EWR to NYC Sout"}]
               }
}

How do I access it in my table? I have tried:

{'data': 'Pricing_Airports.Zone2Air'}  //the number, not name
{'data': 'Pricing_Airports.Zone2Air.label'}
{'data': 'Pricing_Airports.Zone2Air.Name'}
{'data': 'Pricing_Airports.Zone2Air.Pricing_Rules.Name'}
{'data': 'Pricing_Rules.Name'}
{'data': 'Pricing_Rules.label'}

In your example you use sites.id, so my Pricing_Rules.Name should work, but I don't understand how it would looking at the JSON.

allan · August 2015

Hi,

Stepping back to your original post, what I would suggest is using ajax.data as a function. The function will modify the request Editor makes to the server, thus giving it the ability to add the zone data you need. This could simply come from a variable that was set when the dropdown was changed.

Unfortunately there is no API to change the Ajax request URL in Editor at the moment, but using ajax.data I think will mitigate that need for your use case.

The above seems to have all the correct info in the JSON (though I still don't quite get how to render the Name in place of the Air2Zone in the table)

It looks like you need to add:

Field::inst('Pricing_Rules.Name'),

and then in the DataTables configuration you would use Pricing_Rules.Name as you have done. The issue at the moment is that that field isn't being included in the output JSON (it is in the options, but that is only for the options list).

Allan

rpmccormick · August 2015

Thanks Allan.

1) I will look in to ajax.data for adding hidden variables and for having the editor ajax use a less filtered result than the tables ajax (although I am not sure it will work... even without ajax.data and without the &zone=00001 at the end of the AJAX it seems to be editing properly... the issue is that all rows disappear from the table after editing unless I ad &zone=00001 to the editors ajax and only use it to edit zone 1).

2) Ok thanks, so I have Pricing_Rules.Name working for the Zone2Air field. Awesome! The remaining question is how do I do the same thing for the Air2Zone field (which uses the same Pricing_Rules.Name... see 4th post for details)? In SQL you would just alias (Pricing_Rules P1 and later Pricing_Rules P2, then use P1.Name and P2.Name). If you don't allow that, the only thing I can think of to do is make a VIEW that is the same as the Pricing_Rules TABLE with a different name. Any better solution?

3) What about having an Editor window (or an in-line edit table) open a different Editor window on top (see 3rd post for details about the 'blurOnBackground' error).

rpmccormick · August 2015

I attempted the following workaround but am still stuck...

A) Made a VIEW that holds the names:

VIEW RuleDB AS

 SELECT A.ID AS ID,
  A.RegionID AS RegionID,
       A.FAA AS FAA,
    A.ZoneID AS ZoneID,
  A.Air2Zone AS Air2Zone,
    A2Z.Name AS A2ZName,
  A.Zone2Air AS Zone2Air,
    Z2A.Name AS Z2AName

 FROM Pricing_Airports A
 LEFT JOIN Pricing_Rules A2Z
        ON A.Air2Zone = A2Z.ID
 LEFT JOIN Pricing_Rules Z2A
        ON A.Zone2Air = Z2A.ID

B) Pointed the AJAX table to the view filtered by Zone:

Editor::inst($db, 'RuleDB', 'ID')
          ->field(
                    Field::inst('ID'),
                    Field::inst('FAA'),
                    Field::inst('Air2Zone'),
                    Field::inst('A2ZName'),
                    Field::inst('Zone2Air'),
                    Field::inst('Z2AName')
                  )
          ->where( 'RegionID' , $region, '=')   //ignored if '' - not no result as expected
          ->where( 'ZoneID'   , $zone  , '=')   //ignored if '' - not no result as expected
          ->process( $_POST )
          ->json();

If I point the editor to a copy of the same thing without the ZoneID filter, then in-line editing works perfect, however, I cannot use the New button as DT cannot add to a VIEW.

C) Pointed the AJAX editor to the root table:

Editor::inst($db, 'Pricing_Airports', 'ID')
          ->field(
                    Field::inst('ID'),
                    Field::inst('RegionID'),
                    Field::inst('ZoneID'),
                    Field::inst('FAA'),
                    Field::inst('Air2Zone'),
                    Field::inst('Zone2Air')
                 )
          ->process( $_POST )
          ->json();

After doing the above, both in-line-editing and the New button are able to modify/add the data perfectly, but I get an error and have to reload the page to see the modified/added data...

The error says "DataTables warning: table id=tblZoneAirports - Requested unknown parameter 'Z2AName' for row 2."

Well, the editor doesn't have that fields, but the table does. I need to change the tables AJAX, you said I can't change the editors AJAX, I don't understand how I can get an editor and a table with different AJAX to place nice with each other.

rpmccormick · August 2015

UPDATE

Although I am disappointed I could not get Editor to work properly, I have implemented a work-around I am satisfied with...

I use Editor only for in-line-editing, and implemented my own New / Delete that refresh the entire table when they are done.

The DataTable is pointed to my VIEW filtered by zone (since I cannot get your join-syntax to do what I want). I also added a bunch of fields to it that are unused but needed to make Editor work.

The Editor is pointed to my VIEW with no filter, and needed all the DB fields (RegionID, ZoneID) so that they would not be erased when it updated a Zone2Air or Air2Zone field. (it also needed the Zone2Air and Air2Zone fields, so it had to be the VIEW)

Editors New and Delete functions do not work on VIEWs. I made my own AJAX that connects directly to the database to add/delete a row and then reload the DataTable.

This is my 3rd project using DataTables/Editor, and I find I keep running into these huge headaches that stem from Editor and its PHP libs. I wish I could figure out how to use your tools correctly instead of side-stepping them with my own php/sql functions.

My last issue with this page is the part where I use Selectize's add-option feature to show a separate table Editor and get the 'blurOnBackground' error. I am going to try to switch that Editor to a BootStrap modal, but I expect I might get the same error since the in-line-edit-Selectize-drop-down will still get 'blur' from the popup. I need it to wait until after the popup is closed, then the selectize will be re-focused with the new value in it and selected, and then after a blur it can update the DB to point to the newly created option.

I fear I am going to have to trash Editor all together and just use the DataTable 'render' to show my own drop-downs with my own onChange code. If it does come to that, then basically Editor is completly useless for my use-case and I have to create my all own ajax php libs and event-linking from scratch. :(

rpmccormick · August 2015

Here is an image of the page in question with the table in question showing and at the very bottom of the image you can see the Selectize Add... feature.

http://f06i.imgup.net/AddRate7d60.png

After clicking "Add New Rate..." I need to show a popup (or your Editor) and when that is complete I return to Selectize the new ID (or return cancel). I can't do that though due to the 'blurOnBackground' error that in-line-Editor gives.

allan · August 2015

So there are multiple questions here - apologies if I miss any:

1) Dynamic URL / adding GET parameters:

Probably the easiest way of handling this is the ajax.data option as I mentioned - adding the parameter to the POST request, which you can then access at the server. You could also have DataTables make the initial request with POST and the same parameter (using DataTables own ajax.data) - presumably at the moment using using $_GET for the parameter - so you would just use $_POST.

The alternative is to use ajax as a function and make the $.ajax call yourself. You can then have it add any parameters you want in the query string.

2) ->where( 'RegionID' , $region, '=') //ignored if '' - not no result as expected

Are you saying that is $region is '' then the condition is ignored? That seems very odd. I've just tried that locally and it seems to work as expected.

3) The selectize issue / blurOnBackground

But I ran into a new issue... I cannot open a DT Editor to add the new option while in-line edit is active.

Are you able to link me to the page showing this issue so I can debug it. Using two Editor instances in different editing modes is not something I've tried before I must confess.

Allan

rpmccormick · August 2015

1) I still need to look into that. Overwriting ajax is interesting.

2) I thought I saw it work that way when I added that comment, not sure now though. It is irrelevant anyway. The real issue here is that Editor PHP's don't support Alias, so it is impossible to have Air2Zone lookup a name from ID, and have Zone2Air lookup a name from ID in the same lookup table.

3) I can't easily link you. Just go to any page that has in-line editing, plus a second editor defined. Click an in-line field so it is in edit mode. Then from console run Editor2.create(); and you should see the blur error I am talking about (not 100% though, it make only happen with an in-line-select open, or it may only happen with an in-line-Selectize). I tried it on your in-line editing page with a single editor, but to my surprise the editor.Create(); worked fine even when in-line editing was active.

If you like I could PM/GMail/Hangout you access to my backend, but I can't post login info publicly.

PS: Just confirmed... when inline-editing using "editZoneAirports" is active, if I run from console editZoneAiroports.create(); then inline-editing is cancelled and the popup is shown. However, if I run addPricingRule.create(); I get one of 2 errors...

dataTables.editor.min.js:54 Uncaught TypeError: Cannot read property 'blurOnBackground' of undefined

jQuery-2.1.4.min.js:3 Uncaught RangeError: Maximum call stack size exceeded

What I want to happen is that the addPricingRule popup is shown, and the inline-editing is not cancelled... I want the inline-editing to wait until after the popup is closed, and then still be active until I click somewhere else (and then it updates the DB).

rpmccormick · August 2015

I found that I can indeed use a bootstrap-popup with a custom AJAX to add a Rule to the inline drop-down and get it assigned to the inline-editor... yay!

Last question: How do I refresh the Editors selects?

After I have added a new row to the inline select, the base DataTable works perfectly displaying the newly added value. However, if you then go back into inline-editing the same select... it will contain "undefined" as the name instead of the newly added name (the newly added ID seems to work, but the Label is "undefined"). Additionally, if you inline-edit any of the other select boxes, the newly added item is not in them at all (in this use case, all selectize boxes in both the Zone2Air column and the Air2Zone column should all contain the same choices, even after a new choice is added on-the-fly to any of them). If I reload the page all is good (until I add another rule).

rpmccormick · August 2015

To clarify... this is the editor definition:

    editZoneAirports = new $.fn.dataTable.Editor(
     {'ajax': '/api/tables/setZoneAirports.php?region='+userRegion,
      'table': '#tblZoneAirports',
      'fields': [
                  {'label': ''                     , 'name': 'FAA'     , 'type': 'text'},
                  {'label': 'from Zone to Airport:', 'name': 'Zone2Air', 'type': 'selectize', 'options': getSelect('Rules.php?region='+userRegion+'&label=1'), 'opts': {create: function(input, callback) {selRuleCreate(input, callback)}}},
                  {'label': 'to Zone from Airport:', 'name': 'Air2Zone', 'type': 'selectize', 'options': getSelect('Rules.php?region='+userRegion+'&label=1'), 'opts': {create: function(input, callback) {selRuleCreate(input, callback)}}},
                  {'label': 'Region ID'            , 'name': 'RegionID', 'type': 'display'},
                  {'label': 'Zone ID'              , 'name': 'ZoneID'  , 'type': 'display'},
                ]
     }                                          );

This is GetSelect():

        //--- Helper Functions -------------------------------------------------------\\
        function getSelect(Name)
         {var selectjson = $.ajax({"url": '/api/selects/get' + Name + '.php',
                                 "async": false,
                              "dataType": null}).responseText;
          return $.parseJSON(selectjson);
         }

        function popSelect(Control, data, Default)
         {$.each(data, function(index, item)
           {$('#'+Control).append($('<option>', { 'value' : item['value'] })
                          .text(item['text']));
           }    )
          $('#'+Control).val(Default);
         }
        //--- END Helper Functions ---------------------------------------------------//

Editor seems to call getSelect('Rules...') on creation (page-load)... and it does it twice on page load (once for Air2Zone and again for Zone2Air). Side note: I also get a warning about using "async: false".

I would prefer to initialize Editor with no select options, and then later... I can load/re-load the options at will (in a callback after an ajax to api/selects/getRules.php). Is that possible?

rpmccormick · August 2015

NEVERMIND... SOLVED IT.

Thanks for adding that feature in v1.1

$.getJSON('/api/selects/getRules.php?region='+userRegion+'&label=1', function(data) 
     {editZoneAirports.field('Air2Zone').update(data);
      editZoneAirports.field('Zone2Air').update(data);
     }       );

No more async error, quicker page load, and I can fire it after adding a new Rule through my bootstrap popup. I am all good now.

Parting Thought #1: I still wish I could use Editor instead of a custom bootstrap popup... please look into that blur issue.

Parting Thought #2: I still wish I could use Editor instead of a custom New / Delete... please look into making the php-libs more flexible with aliases so that I can do 2 different ID->Name lookups from the same table. Then I could use your join syntax instead of having it pull from a db VIEW that properly joins both ID fields to their proper Names.

You built an awesome product and give awesome support! Thanks for everything.
-Ryan

allan · August 2015

Could you drop me a PM with the link? Click on my name above and then "Send Message".

Regarding the aliases - agreed! Thanks for the feedback. It won't be in 1.5, but it something I will look at for future.

Allan

rpmccormick · August 2015

Ok, I'll create you a user and send you a PM later this afternoon... I will have to re-create the problem, as right now it is configured for the bootstrap-popup workaround. I would love to have you check out my system.

ISSUE with workaround...

I swear at one time it happened like this:
Click field for in-line-editing
Shows selectize box
Type in new name
Click add new... in selectize
Show a test popup.

The inline select box remained open once, and after the popup is closed then the inline completed. It worked once honestly (but I cannot reproduce with the same test popup now).

Now what it does is as soon as the bootstrap popup is shown, you can see DataTables in the background removing the in-line-edit.

Can you tell me how to prevent the in-line-edit from blur-ing until after I am ready (after the popup is submitted, a new rule is added, and I return the new rules ID and Name to selectize)?

allan · August 2015

I suspect that this is an issue with using two different Editors in an editing mode at the same time - it isn't something I had expected or tested for.

I'll try to set up a local example of that, but I'm wrapping up over due releases at the moment, so it might be a few days before I can do so.

Allan

rpmccormick · August 2015

I am still working on setting up examples for you, but I will PM you soon with instructions for seeing both issues on my site.

Issue #1) The multiple Editors issue.
Just FYI, I have worked around it already by using a bootstrap-popup instead of Editor for the 2nd instance.

Issue #2) Keeping in-line-edit open even after it loses focus.
This is what I still need help with. I need the inline-editor to stay in edit-mode until after the bootstrap-popup has been closed. Is this possible?

rpmccormick · August 2015

PM sent. Please post instructions for Issue #2 publicly here...

I just need instructions for how to keep an inline-edit open when blur'ed due to a popup being shown. After the popup is closed (and the Selectize is updated), then I need Editor to process the blur and close the inline-edit as normal.

rpmccormick · August 2015

Please let me know if it is possible to intercept and delay the blur action for inline editing.

If not, I need to get to work on removing editor, using my own column selectize boxes via render:, and writing my own function to update the DB when any selectize changes. I would much rather just use Editor, but I need it to support the Selectize-Add function, so I need to intercept its reaction to blur.

I guess I could just remove its onBlur setting, and then trigger it manually? I will look in to that now.

rpmccormick · August 2015

Nope. I just added a submit button instead of updating onBlur.

I have the exact same issue: When the bootstrap-popup appears due to someone adding a new name to the Selectize box, the inline-Edit is cancelled.

Please let me know if there is a way to prevent the inline-Edit from closing when a modal appears on top of it.

rpmccormick · August 2015

FYI: I gave up on Editor and just coded my own DB updates for Selectize boxes done in the render.

Functions:

//----------------------------------------------------------------------------*/
    function refRules()
     {$('#spinAirportZones').show();
      $('#tblAirportZones').DataTable().ajax.url('/api/tables/getAirportZones.php?region='+userRegion+'&faa='+$('#selAirport').val())
                                       .load(function()
                                              {$('#spinAirportZones').hide();
                                               $('#tblAirportZones').DataTable().columns.adjust().responsive.recalc();
                                               $.getJSON('/api/selects/getRules.php?region='+userRegion, function(data)
                                                {$('.selZ2A').selectize({options: data,
                                                                          create: function(input, callback) {selRuleCreate(input, callback)},
                                                                        onChange: function(value) 
                                                                                   {if ((value != '') || (value == null))
                                                                                     {var rowData = $('#tblAirportZones').DataTable().row( $(this)[0].$control.parents('tr') ).data();
                                                                                      if (rowData == null) {rowData = $('#tblAirportZones').DataTable().row( $(this).parents('tr').prev() ).data()} //details button
                                                                                      setAirZoneRule(rowData['RegionID'], rowData['ZoneID'], rowData['FAA'], '', value);
                                                                                     }
                                                                                   }
                                                                          });
                                                 $('.selA2Z').selectize({options: data,
                                                                          create: function(input, callback) {selRuleCreate(input, callback)},
                                                                        onChange: function(value) 
                                                                                   {if ((value != '') || (value == null))
                                                                                     {var rowData = $('#tblAirportZones').DataTable().row( $(this)[0].$control.parents('tr') ).data();
                                                                                      if (rowData == null) {rowData = $('#tblAirportZones').DataTable().row( $(this).parents('tr').prev() ).data()} //details button
                                                                                      setAirZoneRule(rowData['RegionID'], rowData['ZoneID'], rowData['FAA'], value, '');
                                                                                     }
                                                                                   }
                                                                          });
                                                 $('.selA2Z').css('margin-top', '-12px');
                                                 $('.selZ2A').css('margin-top', '-12px');
                                                 $('.selA2Z').css('margin-bottom', '-12px');
                                                 $('.selZ2A').css('margin-bottom', '-12px');
                                                }       );
                                              }
                                            );
     }

DT:

    $('#tblAirportZones').dataTable(
     {'dom': 'i<"pull-right"T>rt',
      'columns': [ {'data': 'ZoneName', 'render': function (data, type, row) {return '<strong>' + data + '</strong>'}},
                   {'data': 'Zone2Air' , 'render': function (data, type, row) {return '<select class="input-sm selZ2A"><option value="' + data + '">ID: ' + data + ' (loading data...)</option></select>'}},
                   {'data': 'Air2Zone' , 'render': function (data, type, row) {return '<select class="input-sm selA2Z"><option value="' + data + '">ID: ' + data + ' (loading data...)</option></select>'}},
                 ],

allan · August 2015

Hi,

Thanks for the reply. Really sorry for the delay in getting back to you - its been a busy time!

Please let me know if there is a way to prevent the inline-Edit from closing when a modal appears on top of it.

I will look into this and post back, but I suspect probably not at the moment as it isn't something I had designed for or tested for as I noted above. Having said that, there should be separation between the Editor instances, so it should be possible (even if only after a bug or two has been fixed if that is needed!).

Allan

rpmccormick · August 2015

Thanks. The issue doesn't have anything to do with multiple editors though... that is a separate issue. The issue is just with inline-editing in general (single-instance). I wanted to keep the inline-edit open even when a bootstrap-modal steals focus from it.

Anyway, I worked around it by not using Editor at all, and just rendered my own always-visible inline selects with their own DB-update ajax process.

On a different page, I was hoping to use Editor but am again running in to issues with the way the php-libs work. I will open a separate question for that now.

allan · August 2015

Ah I see. Thanks for setting me straight on that.

If you click outside an Editor form, the inline editing will always blur which results in a close. There is currently no way to stop that.

For the main and bubble editing forms there is onBackground in the form-options which can be used to stop that, but for inline editing that is currently always true.

I'll take a look at enabling that option for inline(), but what might be more useful is for the preBlur event to be cancellable...

Allan

allan · August 2015

Actually, preBlur is cancellable already, it just isn't documented (which I will correct shortly).

So while the modal is open you could do:

editor.on( 'preBlur.modal', function () {
  return false;
} );

Then when the modal is close and you want to reactivate that behaviour (assuming you want it at all):

editor.off( 'preBlur.modal' );

I've used a modal namespace just to ensure that only that event is removed.

Allan

rpmccormick · August 2015

Very good. That is the exact feature I was looking for... preBlur, return false.

The purpose of this is for the Selectize Add feature... you want to be able to add a new typed value to the select drop-down before it blurs, but to add a new value you have to set other parameters ina popup first.

So after the modal is closed, the Selectize drop-down should be re-focused, and you are saying that if I run editor.off( 'preBlur.modal' ); then when it gets blur it will update. Sounds just what I was looking for.

If you run editor.off( 'preBlur.modal' ); when the Selectize drop-down is not focused, would it immediately blur, or would you have to refocus and then blur to get Editor to do its update and kill the Selectize object?

allan · August 2015

I would say that refocusing on the Editor field is probably a good thing to do, but what will trigger a blur is the end user clicking on the page. So if they click somewhere without that code, it will blur the field.

Allan

Change AJAX url

Change AJAX url

Answers

Howdy, Stranger!

Categories

DataTables

Change AJAX url

Change AJAX url

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables