Preempt editable sending value to the server if value is the same as the current value

[kkaiser1952]

I have a fairly complex C.R.U.D. application that uses editable extensively. A typical definition would look like this;

<td $modCols $brbCols class=\"editable editable_selectMode cent c2 \" 
            id=\"Mode:$row[recordID]\"> 
            $row[Mode]
        </td>

filled it looks like this;

<td class="editable editable_selectMode cent c2 " id="Mode:46740" data-mode="Voice" title="Mode dropdown"> 
            Voice
        </td>

$(".editable_selectMode").editable("save.php", {
data    : '{"":"","Voice":"Voice","CW":"CW","Mob":"Mob","HT":"HT","Dig":"Dig","FSQ":"FSQ","D*":"D*","Echo":"Echo","DMR":"DMR","Fusion":"Fusion","V&D":"V&D","Online":"Online","Relay":"Relay"}',
         type    : "select",
         placeholder: "",
          onblur: "submit",
         callback: function() {refresh();},   //changes color of row immeditly
         tooltip : "Mode dropdown",
         style   : "inherit"
        });

All 27 definitions work wonderfully to record the changed values in all the table columns. But if a value is selected and not changed it gets recorded as a change anyway.

How can I test the current value and compare it to the new value and only then pass it to save.php to be updated?

[NicolasCARPi]

You can use the onedit option. If it returns false, it won't send data.

https://jeditable.elabftw.net/api/#jquery-jeditable

onsubmit might work too for you.

[kkaiser1952]

Appreciate the response but I'll be honest I don' t understand how this works with the "$(".editable_selectMode").editable("save.php" I'm using. is there an example I can look at please?

[kkaiser1952]

I've changed the definition to this:

<td $modCols $brbCols class=\"editable editable_selectMode cent c2 \" 
 id=\"Mode:$row[recordID]\" data-mode=\"$row[Mode]\"> $row[Mode] </td>

And added this to the .editable definition: onedit : { var oldmode = $(("#Mode:46740").val()).data("mode"); var newmode = $(".c2").val(); if (oldmode == newmode; }

All I get from devtools in syntax error. I've tried all kinds of ways to get that data-mode value with no luck.

[NicolasCARPi]

Look at the complete example from https://jeditable.elabftw.net/.

[kkaiser1952]

I'm struggling to understand how to set up the onedit function, here is what i have:

onedit: function() {
    var oldmode = $(".Mode46924").data("mode");     console.log('om '+oldmode);
    var newmode = $(".Mode46924").text();           console.log('nm '+newmode);
    if ( oldmode === newmode ) { return false; }
 },

This literally locks up Chrome but no error is thown. If I comment the if statement it frees up the browser. The goal here is to NOT post the change if the values are equal.

[NicolasCARPi]

try this:

onsubmit: function(settings, original) {
   const oldmode = original.innerText
   const newmode = $(".Mode46924").text(); 
   return newmode !== oldmode;
},

[kkaiser1952]

The entire definition for this edit is:

$(".editable_selectMode").editable("save.php", {    // Mode 
data    : '{"":"","Voice":"Voice","CW":"CW","Mob":"Mob","HT":"HT","Dig":"Dig","FSQ":"FSQ","D*":"D*","Echo":"Echo","DMR":"DMR","Fusion":"Fusion","V&D":"V&D","Online":"Online","Relay":"Relay"}',
         type: "select",
         onsubmit: function(settings, original) {
           const oldmode = original.innerText; console.log('om '+ oldmode );
           const newmode = $(".Mode46924").text();   console.log('nm '+ newmode );
           return newmode !== oldmode;
         },

         placeholder: "",
         onblur: "submit",
         callback: function() {refresh();},   //changes color of row immeditly
         tooltip : "Mode dropdown",
         style   : "inherit"
        });

NOTICE: I added console.log to better see what was happening. The save.php still executes with your example. Because its a drop down it appears the oldmode value is all of the values. It looks like the same happens to the newmode values.

[NicolasCARPi]

for a select don't use ".text()" but .val().

[kkaiser1952]

Using val() was how I originally tried it with onedit, changing it here didn't work either.

[kkaiser1952]

Another issue is the class .Mode46924 which i had to hard code into the function. Because Idon't know what row is in play. I was going to solve that after getting the basic code working. Can i pick up the newmode value from a editable value, something passed to it? For example you use "original.innerText" to get the oldmode, is there something similar for the newmode value?

[NicolasCARPi]

There might be a better way, but you can get the input value with $(this)[0][0].value.

Note that you could also do this check in the backend, you don't say why you want to prevent submission if it's the same value.

[kkaiser1952]

Using $(this)[0][0].value worked... I'm still getting a list of all the possible values as you can see below;

onsubmit: function(settings, original) {
           const oldmode = original.innerText;       console.log('om '+ oldmode );
           const newmode = $(".Mode46924").text();   console.log('nm '+ newmode );
           const newmode2 = $(this)[0][0].value;     console.log('nm2 '+ newmode2 );
           return newmode2 !== oldmode; },

om Voice CW Mob HT Dig FSQ D Echo DMR Fusion V&D Online Relay nm VoiceCWMobHTDigFSQDEchoDMRFusionV&DOnlineRelay nm2 Dig The reason for doing it before the it submitted is because I was taught that if something can be done on the local machine instead of of the server it should be. When any value in any of the 29 cells in any given row is written or changed or deleted it is logged to a table and written to a report that most users need to send to their respective Emergency Managers. Right now if a user clicks into any cell, editable takes the entry and writes it to the table. The table in turn is used to create the form/report and it often has a lot of duplicate entries. I'd like to prevent those duplicates. And it seems to me the best place to edit, when possible, is to do it on the local machine. My next big upgrade to the application will be to give it the ability to be taken off-line using serviceworkers. Again it just seemed to me the edit should be local not on the server.
I hope that explains my thinking, if its your opinion I should do the edit on the server I'll have to reevaluate how to take it offline.

[kkaiser1952]

I tinkered with this for a while, this seems to work but with an issue of its own (maybe).

onsubmit: function(settings, original) {
          // const oldmode = original.innerText;            console.log('om  '+ oldmode );
           const oldmode2 = $(".Mode46924").data("mode"); console.log('om2 '+ oldmode2 );
          // const newmode = $(".Mode46924").text();        console.log('nm  '+ newmode );
           const newmode2 = $(this)[0][0].value;          console.log('nm2 '+ newmode2 );

           return newmode2 !== oldmode2;
         },

notice that the compare uses a combination of methods to get the data to concert. But I still don't know how to get the actual cell (column/row) of oldmod2, as Mode46924 is hard coded. One additional and perhaps the only way it can work, is that when you try to edit the cell without making a change, it hangs up, remains open, you MUST make a different selection to un-lock it. Now this might be how it has to be, but a better solution would be to just basically ignore the request and leave things alone.

[kkaiser1952]

@NicolasCARPi you gave me a great way to get the input value with $(this)[0][0].value, is there a similar way to get the current value inside of onedit or onsubmit?

[NicolasCARPi]

Hello, did you manage to address this issue?

I'm sorry I can't provide free support for this library.

[kkaiser1952]

Thanks for your help on this Nicolas. I finally gave up on this method but I did find a work around.

On Feb 22, 2021, at 9:22 AM, Nicolas CARPi notifications@github.com wrote:

Hello, did you manage to address this issue?

I'm sorry I can't provide free support for this library.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/NicolasCARPi/jquery_jeditable/issues/224#issuecomment-783451183, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA2FIHE2MFX7GS46EZO3IUTTAJZFDANCNFSM4SE7YWQQ.