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

[onoehring]

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 (103.15 KiB) Viewed 32310 times

Thank you already
Olaf

[onoehring]

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

[onoehring]

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 (220.05 KiB) Viewed 32305 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 (24.71 KiB) Viewed 32305 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