search

NicolasCARPi / jquery_jeditable

jQuery edit in place plugin. Extendable via plugin architecture. Plugins for plugin. Really.
https://jeditable.elabftw.net
MIT License
1.74k stars 458 forks source link

How to turn off all Jeditable fields #223

Closed kkaiser1952 closed 3 years ago

kkaiser1952 commented 4 years ago

I’ve been asked to give my users the option to display older versions of my tables. I figured out how to do that without rewriting long parts of my code. But I don’t want them to be able to accidentally or on purpose edit any of the older, closed tables. Is there a simple jQuery way for me to disable all my jeditable editing if needed? There are 30 columns in my table all editable, how can I turn that off programmatically?

NicolasCARPi commented 4 years ago

Hello,

You can use jQuery's off function. To disable all fields with the class editable:

$('.editable').off();
kkaiser1952 commented 4 years ago

Are you suggesting I set up an array of all the editable fields (editable_selectNC, editable_selectMode, editable_selectACT, etc.) and run them all through a loop? I’ll give it a try. Thanks for the help.

On Sep 2, 2020, at 2:13 AM, Nicolas CARPi notifications@github.com wrote:

Hello,

You can use jQuery's off https://api.jquery.com/off/ function. To disable all fields with the class editable:

$('.editable').off(); — 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/223#issuecomment-685401792, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA2FIHAPZE63U5AHIQR4GWDSDXWB3ANCNFSM4QSN3WDA.

NicolasCARPi commented 4 years ago

Don't need a loop, you can use $('.editable_selectNC, .editable_selectMode, .editable_selectACT'). But it makes sense to have only one class for editable elements.

kkaiser1952 commented 4 years ago

I wish I could have just one class for all the columns, the problem is each column requires a different kind of edit. Some are dropdowns, some are simple enough because its just a name change or similar. Others yet require ajax with specialized php routines. If all the columns could be done with one save.php that would be great but unless I have greatly misunderstood both jQuery and jEditable ( a very real possibility ) I don’t see how to do it.

But knowing (now) that I can put them all in the same statement does make the job a bit easier.

Thank you again….. your knowledge is the difference between a professional and me…. a novice.

On Sep 2, 2020, at 8:37 AM, Nicolas CARPi notifications@github.com wrote:

Don't need a loop, you can use $('.editable_selectNC, .editable_selectMode, .editable_selectACT'). But it makes sense to have only one class for editable elements.

— 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/223#issuecomment-685742585, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA2FIHB5XU5FULU6MB6GGTLSDZDCPANCNFSM4QSN3WDA.

NicolasCARPi commented 4 years ago

Your element could have two classes: editable and selectNC instead of editable_selectNC ;)

kkaiser1952 commented 4 years ago

That I think I can do. I’ll let you know if it works.

Again… Pro v Novice.

Thanks.

On Sep 2, 2020, at 9:09 AM, Nicolas CARPi notifications@github.com wrote:

Your element could have two classes: editable and selectNC instead of editable_selectNC ;)

— 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/223#issuecomment-685761704, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA2FIHEBYFV2B25ZRRQ36SDSDZGYNANCNFSM4QSN3WDA.

kkaiser1952 commented 4 years ago

As suggested I added “editable” to the class of each column, and I verified that it was put there by the PHP building each row from MySQL. But attempting to edit the table I was successful, no issues. But that got me wondering is the issue a timing thing, when does the javascript function execute the .off()? My script looks like this.

function net_by_number() { var s = prompt("net ID?"); showActivities(s);

            $(".editable").off();
}

Which is located just above the tag at the bottom of my page. Is the off() getting set too early, too late, not at all? Because all the cells are still able to be edited as before.

On Sep 2, 2020, at 9:09 AM, Nicolas CARPi notifications@github.com wrote:

Your element could have two classes: editable and selectNC instead of editable_selectNC ;)

— 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/223#issuecomment-685761704, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA2FIHEBYFV2B25ZRRQ36SDSDZGYNANCNFSM4QSN3WDA.

NicolasCARPi commented 4 years ago

Hard to say because a lot of information is missing. Try it directly in the console (F12). Does it work there? Also, if the elements don't exist or don't have the editable class when the page is loaded, it might be the issue. What is showActivities doing?

kkaiser1952 commented 4 years ago

The getactivities.php uses PHP to pull the data from MySQL. It also has a 'include "rowDefinitions.php”;’ which is how each row is formatted as in this partial example.

echo (" <td $brbCols class=\"editable editable_selectNC cent c1 \" id=\"netcontrol:$row[recordID]\"> $row[netcontrol] 

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

    <td $brbCols class=\"editable editable_selectACT  cent c3 \" 
        id=\"active:$row[recordID]\"> 
        $row[active]
    </td>  

<td $brbCols oncontextmenu=\"MapCounty('$row[county]:$row[state]');return false;\" class=\"editable editcnty c17 cent \” 
    id=\"county:$row[recordID]\”>
    $row[county]
 </td>

… and many more ... “);

Notice that I included ‘editable’ into each class statement.

I displayed the console, but I don’t understand what I’m supposed to do there to try it.

On Sep 2, 2020, at 10:18 AM, Nicolas CARPi notifications@github.com wrote:

Hard to say because a lot of information is missing. Try it directly in the console (F12). Does it work there? Also, if the elements don't exist or don't have the editable class when the page is loaded, it might be the issue. What is showActivities doing?

— 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/223#issuecomment-685805599, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA2FIHCYBVVQNEBWTUFEBM3SDZO3ZANCNFSM4QSN3WDA.

NicolasCARPi commented 4 years ago

What I'm missing here is the code that adds the listener to make them editable, and when is it triggered. Also, I suggested to use the .off() but you can also go the other way and don't add the .editable() listener on the elements in the first place! For instance, in your functions that make elements of a certain class editable by adding .editable(), you can add a check to decide if you really want them to be editable or not. Or in PHP don't add the class that makes them editable in the first place.

Again, hard to reason when I only have a very vague idea of the user workflow and the javascript workflow.

Also, it's best if you use the github interface for your replies so your code snippets can be formatted and styled correctly (by using ~~~javascript or ~~~php and close with ~~~). Email responses do not support markdown.

As for the console, after pressing F12, there is a "Console" tab, click on it, and at the bottom you can directly type javascript code and it will execute on the page. So try the off here.

kkaiser1952 commented 4 years ago

I brought up 'Console' and typed $(".editable").off(); then went back to the already displayed page and attempted to edit one of the fields. I was unable to do so. In other words that worked. When I used Console like this the response it gave me after making the jQuery entry was; k.fn.init(96) [td#netcontrol:29963.editable.editable_selectNC.cent.c1., td#Mode:29963.editable.editable_selectMode.cent.c2., td#active:29963.editable.editable_selectACT.cent.c3., td#traffic:29963.editable.editable_selectTFC.c4., td#tt:29963.editable.editTT.cent.c5.TT, td#band:29963.editable.editBand.c23, td#callsign:29963.editable.cs1.c6., td#cat:29963.editable.editCat.cent.c50., td#Fname:29963.editable.editFnm.c7., td#Lname:29963.editable.editLnm.c8., td#tactical:29963.editable.editTAC.cent.c9., td#phone:29963.editable.editPhone.c10.cent, td#email:29963.editable.editEMAIL.c11., td#grid:29963.editable.editGRID.c20., td#latitude:29963.editable.editLAT.c21., td#longitude:29963.editable.editLON.c22., td#logdate:29963.editable.editTimeIn.cent.c12., td#timeout:29963.editable.editTimeOut.cent.c13., td#comments:29963.editable.editC.c14., td#creds:29963.editable.editCREDS.c15., td#timeonduty:29963.editable.c16.cent., td#county:29963.editable.editcnty.c17.cent., td#state:29963.editable.editstate.c18.cent, td#district:29963.editable.editdist.c19.cent, td#w3w:29963.editable.W3W.c24.cent, td#state:29963.editable.c25.cent, td#state:0000.editable.c26.cent, td#state:1.editable.c27.cent, td#state:.editable.c28.cent, td#state:107.77.249.47.editable.c29.cent, td#delete:29963.editable.dltRow, a.editable.delete.cent, td#netcontrol:29964.editable.editable_selectNC.cent.c1., td#Mode:29964.editable.editable_selectMode.cent.c2., td#active:29964.editable.editable_selectACT.cent.c3., td#traffic:29964.editable.editable_selectTFC.c4., td#tt:29964.editable.editTT.cent.c5.TT, td#band:29964.editable.editBand.c23, td#callsign:29964.editable.cs1.c6., td#cat:29964.editable.editCat.cent.c50., td#Fname:29964.editable.editFnm.c7., td#Lname:29964.editable.editLnm.c8., td#tactical:29964.editable.editTAC.cent.c9., td#phone:29964.editable.editPhone.c10.cent, td#email:29964.editable.editEMAIL.c11., td#grid:29964.editable.editGRID.c20., td#latitude:29964.editable.editLAT.c21., td#longitude:29964.editable.editLON.c22., td#logdate:29964.editable.editTimeIn.cent.c12., td#timeout:29964.editable.editTimeOut.cent.c13., td#comments:29964.editable.editC.c14., td#creds:29964.editable.editCREDS.c15., td#timeonduty:29964.editable.c16.cent., td#county:29964.editable.editcnty.c17.cent., td#state:29964.editable.editstate.c18.cent, td#district:29964.editable.editdist.c19.cent, td#w3w:29964.editable.W3W.c24.cent, td#state:29964.editable.c25.cent, td#state:1235.editable.c26.cent, td#state:1.editable.c27.cent, td#state:36.8350372,-86.0338165,EM66XU,Barren ,KY.editable.c28.cent, td#state:107.77.249.47.editable.c29.cent, td#delete:29964.editable.dltRow, a.editable.delete.cent, td#netcontrol:29965.editable.editable_selectNC.cent.c1., td#Mode:29965.editable.editable_selectMode.cent.c2., td#active:29965.editable.editable_selectACT.cent.c3., td#traffic:29965.editable.editable_selectTFC.c4., td#tt:29965.editable.editTT.cent.c5.TT, td#band:29965.editable.editBand.c23, td#callsign:29965.editable.cs1.c6., td#cat:29965.editable.editCat.cent.c50., td#Fname:29965.editable.editFnm.c7., td#Lname:29965.editable.editLnm.c8., td#tactical:29965.editable.editTAC.cent.c9., td#phone:29965.editable.editPhone.c10.cent, td#email:29965.editable.editEMAIL.c11., td#grid:29965.editable.editGRID.c20., td#latitude:29965.editable.editLAT.c21., td#longitude:29965.editable.editLON.c22., td#logdate:29965.editable.editTimeIn.cent.c12., td#timeout:29965.editable.editTimeOut.cent.c13., td#comments:29965.editable.editC.c14., td#creds:29965.editable.editCREDS.c15., td#timeonduty:29965.editable.c16.cent., td#county:29965.editable.editcnty.c17.cent., td#state:29965.editable.editstate.c18.cent, td#district:29965.editable.editdist.c19.cent, td#w3w:29965.editable.W3W.c24.cent, td#state:29965.editable.c25.cent, td#state:1236.editable.c26.cent, td#state:0.editable.c27.cent, td#state:36.8350372,-86.0338165,EM66XU,Barren ,KY.editable.c28.cent, td#state:107.77.249.47.editable.c29.cent, td#delete:29965.editable.dltRow, a.editable.delete.cent, prevObject: k.fn.init(1)]

Based on it working this way I'm guessing that means it is a timing thing, why when the javascript function is at the bottom of the body tag its not waiting to run I don't know but I tried adding $(document).ready(function() { around the function but it just stops working. DevTools shows no error, it just stops.

I don't want to write the exception code needed to not enter the editable class into the 's if at all possible not too.

NicolasCARPi commented 4 years ago

Yes, it's always best to wrap your code in the $(document).ready(function() {});. If it stops working when you do that (what does?), it might be another issue. Try moving the off call around and see where it works. You can also go with the traditional console.log('here'); to check when your code is triggered. Don't mind the response from the off command in console.