How? jquery? Add extra (2nd) SAVE CHANGES button

If you're a new user of AppGini, feel free to ask general usage questions, or look for answers here.
Post Reply
User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

How? jquery? Add extra (2nd) SAVE CHANGES button

Post by onoehring » 2019-09-29 05:29

Hi,

as my application is being displayed on small screens, it happens, that the user, even though changes are made in the top fields only (example:Container Code), has to scroll all the way down to save those changes.
I want to place a second save changes button at the top of the page (duplicate the original one, or "press" that by JS).

Can someone help me please? I do not see any ID which I would use for a jquery insert :-(

That button should be places at this position:
ec_extraButton.png
ec_extraButton.png (103.15 KiB) Viewed 31899 times
Thank you already
Olaf

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: How? jquery? Add extra (2nd) SAVE CHANGES button

Post by onoehring » 2019-09-29 05:44

Hi,

quick answer from myself: I have used this browser extension (Selectify: chrome.google.com/webstore/detail/selectify/lpnjpfcjoodgemnipmlaobngfndgojki ) to get the corresponding ID (with a single click). Yes, I know, Jan said it can be found using F12 in your browser, but if you are like me and not so firm using jquery, the extension might be handy.
So I am working on the code already.
I will post my solution and will also post if I have any problems which I would need your help with ;-)

Olaf

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: How? jquery? Add extra (2nd) SAVE CHANGES button

Post by onoehring » 2019-09-29 07:55

Hi,

I said, I will report back, so I do.
This is the result right now, and I am pretty happy with it: When making the screensize smaller, an extra save button (green) appears in the header which, in a very small screen is placed directly above the actual record. Please keep in mind: this is a 2nd save button which simply "clicks" the original using JS.
2ndSaveButton_v2.gif
2ndSaveButton_v2.gif (220.05 KiB) Viewed 31894 times
The code I used in tablename-dv.js:

Code: Select all

$j('#ecomo_container_dv_container').find('.col-xs-12 div.clearfix').append('<a class="hidden-xl hidden-lg hidden-md hidden-xs btn btn-success btn-lg pull-right hspacer-sm" href="#" id="update_2nd" onclick="document.getElementById(\'update\').click()"><i class="glyphicon glyphicon-ok"></i> Änderungen speichern</a><a class="visible-xs btn btn-success btn-lg btn-block vspacer-sm" href="#" id="xs_update_2nd" onclick="document.getElementById(\'update\').click()"><i class="glyphicon glyphicon-ok"></i> Änderungen speichern</a>');
This should be easy to adopt for anyone, simply exchanging the #ecomo_container_dv_container to #tablename_dv_container!


The resulting HTML part:
ec2nd2.png
ec2nd2.png (24.71 KiB) Viewed 31894 times
Request for help:
I would like to request your help again to "clean up" the created HTML result.
The button code should appear above the clearfix - not in the clearfix. What do I need to change in my jquery?

Thanks already
Olaf

Post Reply