From 2a4e76876bffbeac5d147255c70d698c539d98ee Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 14 Nov 2017 16:13:56 +0000
Subject: [PATCH] Bug 19608: Move admin templates JavaScript to the footer: The
 rest

This patch modifies the staff client administration templates so that
JavaScript is included in the footer instead of the header.

To test, apply the patch and test the JavaScript-driven features of the
modified templates: All button controls, DataTables functionality, tabs,
etc.

To test the changes to localization.tt you must have more than one
translation installed. Go to admin/itemtypes.pl, edit an itemtype, and
click the 'Translate into other languages' link.

To test the changes to sur_modmapping.tt, go to admin/z3950servers.pl
and create a new SRU server. Click the 'Modify' button next to 'SRU
Search fields mapping'

Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>

Signed-off-by: Josef Moravec <josef.moravec@gmail.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
---
 .../prog/en/includes/popup-bottom.inc         |   4 +
 .../prog/en/modules/admin/clone-rules.tt      |   2 +
 .../prog/en/modules/admin/currency.tt         |  81 ++--
 .../prog/en/modules/admin/edi_accounts.tt     |   5 +
 .../prog/en/modules/admin/edi_ean_accounts.tt |   5 +
 .../prog/en/modules/admin/itemtypes.tt        |   1 +
 .../prog/en/modules/admin/localization.tt     | 375 +++++++++---------
 .../prog/en/modules/admin/sru_modmapping.tt   |  56 +--
 8 files changed, 276 insertions(+), 253 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/popup-bottom.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/popup-bottom.inc
index 308b1d01b6..37e9c91914 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/popup-bottom.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/popup-bottom.inc
@@ -1,2 +1,6 @@
+    [% IF ( footerjs ) %]
+        [% INCLUDE js_includes.inc %]
+        [% jsinclude # Parse the page template's JavaScript block if necessary %]
+    [% END %]
 </body>
 </html>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/clone-rules.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/clone-rules.tt
index c42e256a16..394ee80972 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/clone-rules.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/clone-rules.tt
@@ -1,4 +1,5 @@
 [% USE Branches %]
+[% SET footerjs = 1 %]
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Administration &rsaquo; Circulation and fine rules &rsaquo; Clone circulation and fine rules</title>
 [% INCLUDE 'doc-head-close.inc' %]
@@ -64,4 +65,5 @@
 [% INCLUDE 'admin-menu.inc' %]
 </div>
 </div>
+
 [% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/currency.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/currency.tt
index d7285b8cf1..9d73653df7 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/currency.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/currency.tt
@@ -1,6 +1,7 @@
 [% USE KohaDates %]
 [% USE ColumnsSettings %]
 [% USE HtmlTags %]
+[% SET footerjs = 1 %]
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Administration &rsaquo; Currencies &amp; Exchange rates &rsaquo;
 [% IF op == 'add_form' %][% IF currency %]Modify currency '[% currency.currency %]'[% ELSE %]New currency[% END %][% END %]
@@ -8,50 +9,12 @@
 [% IF op == 'list' %]Currencies[% END %]</title>
 [% INCLUDE 'doc-head-close.inc' %]
 <link rel="stylesheet" type="text/css" href="[% interface %]/[% theme %]/css/datatables.css" />
-[% INCLUDE 'datatables.inc' %]
-[% INCLUDE 'columns_settings.inc' %]
-<script type="text/javascript">
-//<![CDATA[
-
-    function check_currency(val) {
-        if ( val == 1.0 ) {
-            $("#active").prop('disabled', false);
-            $("#hint").html("");
-        } else {
-            $("#active").prop('checked', false);
-            $("#active").prop('disabled', true);
-            $("#hint").html(_("The active currency must have a rate of 1.0"));
-        }
-    }
-
-    $(document).ready(function() {
-        columns_settings = [% ColumnsSettings.GetColumns( 'admin', 'currency', 'currencies-table', 'json' ) %]
-        var issuest = KohaTable("#currencies-table", {
-            dom: 'B<"clearfix">t',
-            "columnDefs": [
-                { "aTargets": [ -1 ], "bSortable": false, "bSearchable": false },
-                { "sType": "title-string", "aTargets" : [ "title-string" ] }
-                ],
-        }, columns_settings );
-
-        // prevents users to check active with a currency != 1
-        $("#rate").keyup(function() {
-            check_currency( $(this).val() );
-        });
-        check_currency( $("#rate").val() );
-        $("#currency_code").on("blur",function(){
-            toUC(this);
-        });
-    });
-//]]>
-</script>
 </head>
+
 <body id="admin_currency" class="admin">
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'currencies-admin-search.inc' %]
 
-
-
 <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/admin/admin-home.pl">Administration</a> &rsaquo;  <a href="/cgi-bin/koha/admin/currency.pl">Currencies &amp; Exchange rates</a> &rsaquo; [% IF op == 'add_form' %][% IF currency %]Modify currency '[% currency.currency %]'[% ELSE %]New currency[% END %][% END %]
 [% IF op == 'delete_confirm' %]Confirm deletion of currency [% currency.currency | $HtmlTags tag='span' attributes=>'class="ex"' %]
 [% ELSIF op == 'list' %]Currencies
@@ -252,4 +215,44 @@
 [% INCLUDE 'admin-menu.inc' %]
 </div>
 </div>
+
+[% MACRO jsinclude BLOCK %]
+    <script type="text/javascript" src="[% interface %]/[% theme %]/js/admin-menu.js"></script>
+    [% INCLUDE 'datatables.inc' %]
+    [% INCLUDE 'columns_settings.inc' %]
+    <script type="text/javascript">
+
+        function check_currency(val) {
+            if ( val == 1.0 ) {
+                $("#active").prop('disabled', false);
+                $("#hint").html("");
+            } else {
+                $("#active").prop('checked', false);
+                $("#active").prop('disabled', true);
+                $("#hint").html(_("The active currency must have a rate of 1.0"));
+            }
+        }
+
+        $(document).ready(function() {
+            columns_settings = [% ColumnsSettings.GetColumns( 'admin', 'currency', 'currencies-table', 'json' ) %]
+            var issuest = KohaTable("#currencies-table", {
+                dom: 'B<"clearfix">t',
+                "columnDefs": [
+                    { "aTargets": [ -1 ], "bSortable": false, "bSearchable": false },
+                    { "sType": "title-string", "aTargets" : [ "title-string" ] }
+                    ],
+            }, columns_settings );
+
+            // prevents users to check active with a currency != 1
+            $("#rate").keyup(function() {
+                check_currency( $(this).val() );
+            });
+            check_currency( $("#rate").val() );
+            $("#currency_code").on("blur",function(){
+                toUC(this);
+            });
+        });
+
+    </script>
+[% END %]
 [% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/edi_accounts.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/edi_accounts.tt
index 1b9882f214..c00f1e201b 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/edi_accounts.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/edi_accounts.tt
@@ -1,3 +1,4 @@
+[% SET footerjs = 1 %]
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Administration &rsaquo; EDI accounts
 [% IF acct_form %]
@@ -322,4 +323,8 @@
     [% INCLUDE 'admin-menu.inc' %]
 </div>
 </div>
+
+[% MACRO jsinclude BLOCK %]
+    <script type="text/javascript" src="[% interface %]/[% theme %]/js/admin-menu.js"></script>
+[% END %]
 [% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/edi_ean_accounts.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/edi_ean_accounts.tt
index 2620bf0ed0..ee52187451 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/edi_ean_accounts.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/edi_ean_accounts.tt
@@ -1,3 +1,4 @@
+[% SET footerjs = 1 %]
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Administration &rsaquo; Library EANs
 [% IF ean_form %]
@@ -168,4 +169,8 @@
     [% INCLUDE 'admin-menu.inc' %]
 </div>
 </div>
+
+[% MACRO jsinclude BLOCK %]
+    <script type="text/javascript" src="[% interface %]/[% theme %]/js/admin-menu.js"></script>
+[% END %]
 [% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/itemtypes.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/itemtypes.tt
index 4062312ecd..17ddd0bf85 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/itemtypes.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/itemtypes.tt
@@ -422,4 +422,5 @@ Item types administration
          });
     </script>
 [% END %]
+
 [% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/localization.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/localization.tt
index 9d53e5ce07..345b42cdb0 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/localization.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/localization.tt
@@ -1,193 +1,10 @@
+[% SET footerjs = 1 %]
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Localization</title>
 [% INCLUDE 'doc-head-close.inc' popup => 1 %]
 <link rel="stylesheet" type="text/css" href="[% interface %]/[% theme %]/css/datatables.css" />
-[% INCLUDE 'greybox.inc' %]
-[% INCLUDE 'datatables.inc' %]
-<script type="text/javascript">
-//<![CDATA[
-
-    function show_message( params ) {
-        var type = params.type;
-        var data = params.data;
-        var messages = $("#messages");
-        var message;
-        if ( type == 'success_on_update' ) {
-            message = $('<div class="dialog message"></div>');
-            message.text("Entity %s (code %s) for lang %s has correctly been updated with '%s'".format(data.entity, data.code, data.lang, data.translation));
-        } else if ( type == 'error_on_update' ) {
-            message = $('<div class="dialog alert"></div>');
-            if ( data.error_code == 'already_exists' ) {
-                message.text("A translation already exists for this language.");
-            } else {
-                message.text("An error occurred when updating this translation.");
-            }
-        } else if ( type == 'success_on_delete' ) {
-            message = $('<div class="dialog message"></div>');
-            message.text("The translation (id %s) has been removed successfully".format(data.id));
-        } else if ( type == 'error_on_delete' ) {
-            message = $('<div class="dialog alert"></div>');
-            message.text("An error occurred when deleting this translation");
-        } else if ( type == 'success_on_insert' ) {
-            message = $('<div class="dialog message"></div>');
-            message.text("Translation (id %s) has been added successfully".format(data.id));
-        } else if ( type == 'error_on_insert' ) {
-            message = $('<div class="dialog alert"></div>');
-            if ( data.error_code == 'already_exists' ) {
-                message.text("A translation already exists for this language.");
-            } else {
-                message.text("An error occurred when adding this translation");
-            }
-        }
-
-        $(messages).append(message);
-
-        setTimeout(function(){
-            message.hide()
-        }, 3000);
-    }
-
-    function send_update_request( data, cell ) {
-        $.ajax({
-            data: data,
-            type: 'PUT',
-            url: '/cgi-bin/koha/svc/localization',
-            success: function (data) {
-                if ( data.error ) {
-                    $(cell).css('background-color', '#FF0000');
-                    show_message({ type: 'error_on_update', data: data });
-                } else if ( data.is_changed == 1 ) {
-                    $(cell).css('background-color', '#00FF00');
-                    show_message({ type: 'success_on_update', data: data });
-                }
-
-                if ( $(cell).hasClass('lang') ) {
-                    $(cell).text(data.lang)
-                } else if ( $(cell).hasClass('translation') ) {
-                    $(cell).text(data.translation)
-                }
-            },
-            error: function (data) {
-                $(cell).css('background-color', '#FF0000');
-                if ( $(cell).hasClass('lang') ) {
-                    $(cell).text(data.lang)
-                } else if ( $(cell).hasClass('translation') ) {
-                    $(cell).text(data.translation)
-                }
-                show_message({ type: 'error_on_update', data: data });
-            },
-        });
-    }
-
-    function send_delete_request( id, cell ) {
-        $.ajax({
-            type: 'DELETE',
-            url: '/cgi-bin/koha/svc/localization/?id='+id,
-            success: function (data) {
-                $("#localization").DataTable().row( '#row_id_' + id ).remove().draw();
-                show_message({ type: 'success_on_delete', data: data });
-            },
-            error: function (data) {
-                $(cell).css('background-color', '#FF0000');
-                show_message({ type: 'error_on_delete', data: data });
-            },
-        });
-    }
-
-    $(document).ready(function() {
-        $(".dialog").hide();
-
-        var table = $("#localization").DataTable($.extend(true, {}, dataTablesDefaults, {
-            'bPaginate': false,
-        }));
-
-        var languages_select = $('<select name="lang"></select>');
-        [% FOR language IN languages %]
-            [% FOR sublanguage IN language.sublanguages_loop %]
-                var option;
-                [% IF language.plural %]
-                    option = $('<option value="[% sublanguage.rfc4646_subtag %]">[% sublanguage.native_description %] [% sublanguage.region_description %] ([% sublanguage.rfc4646_subtag %])</option>');
-                    $(languages_select).append(option);
-                [% ELSE %]
-                    option = $('<option value="[% sublanguage.rfc4646_subtag %]">[% sublanguage.native_description %] ([% sublanguage.rfc4646_subtag %])</option>');
-                [% END %]
-                $(languages_select).append(option);
-            [% END %]
-        [% END %]
-
-        $("td.translation").on('focus', function(){
-            $(this).css('background-color', '');
-        });
-        $("td.lang").on('click', function(){
-            var td = this;
-            var lang = $(td).text();
-            $(td).css('background-color', '');
-            var my_select = $(languages_select).clone();
-            $(my_select).find('option[value="' + lang + '"]').attr('selected', 'selected');
-            $(my_select).on('click', function(e){
-                e.stopPropagation();
-            });
-            $(my_select).on('change', function(){
-                var tr = $(this).parent().parent();
-                var id = $(tr).data('id');
-                var lang = $(this).find('option:selected').val();
-                var data = "id=" + encodeURIComponent(id) + "&lang=" + encodeURIComponent(lang);
-                send_update_request( data, td );
-            });
-            $(my_select).on('blur', function(){
-                $(td).html(lang);
-            });
-            $(this).html(my_select);
-        });
-
-        $("td.translation").on('blur', function(){
-            var tr = $(this).parent();
-            var id = $(tr).data('id');
-            var translation = $(this).text();
-            var data = "id=" + encodeURIComponent(id) + "&translation=" + encodeURIComponent(translation);
-            send_update_request( data, this );
-        });
-
-        $("a.delete").on('click', function(e){
-            e.preventDefault();
-            if ( confirm(_("Are you sure you want to delete this translation?")) ) {
-                var td = $(this).parent();
-                var tr = $(td).parent();
-                var id = $(tr).data('id');
-                send_delete_request( id, td );
-            }
-        });
-
-        $("#add_translation").on('submit', function(e){
-            e.preventDefault();
-            var entity = $(this).find('input[name="entity"]').val();
-            var code = $(this).find('input[name="code"]').val();
-            var lang = $(this).find('select[name="lang"] option:selected').val();
-            var translation = $(this).find('input[name="translation"]').val();
-            var data = "entity=" + encodeURIComponent(entity) + "&code=" + encodeURIComponent(code) + "&lang=" + encodeURIComponent(lang) + "&translation=" + encodeURIComponent(translation);
-            $.ajax({
-                data: data,
-                type: 'POST',
-                url: '/cgi-bin/koha/svc/localization',
-                success: function (data) {
-                    if ( data.error ) {
-                        show_message({ type: 'error_on_insert', data: data });
-                    } else {
-                        // FIXME Should append the delete link
-                        table.row.add( [ data.id, data.entity, data.code, data.lang, data.translation, "" ] ).draw();
-                        show_message({ type: 'success_on_insert', data: data });
-                    }
-                },
-                error: function (data) {
-                    show_message({ type: 'error_on_insert', data: data });
-                },
-            });
-        });
-
-     });
-//]]>
-</script>
 </head>
+
 <body id="admin_localization" class="admin">
 <div id="main">
 <form id="add_translation" method="post">
@@ -233,5 +50,189 @@
     </tbody>
 </table>
 </div>
-</body>
-</html>
+
+[% MACRO jsinclude BLOCK %]
+    [% INCLUDE 'datatables.inc' %]
+    <script type="text/javascript">
+
+        function show_message( params ) {
+            var type = params.type;
+            var data = params.data;
+            var messages = $("#messages");
+            var message;
+            if ( type == 'success_on_update' ) {
+                message = $('<div class="dialog message"></div>');
+                message.text("Entity %s (code %s) for lang %s has correctly been updated with '%s'".format(data.entity, data.code, data.lang, data.translation));
+            } else if ( type == 'error_on_update' ) {
+                message = $('<div class="dialog alert"></div>');
+                if ( data.error_code == 'already_exists' ) {
+                    message.text("A translation already exists for this language.");
+                } else {
+                    message.text("An error occurred when updating this translation.");
+                }
+            } else if ( type == 'success_on_delete' ) {
+                message = $('<div class="dialog message"></div>');
+                message.text("The translation (id %s) has been removed successfully".format(data.id));
+            } else if ( type == 'error_on_delete' ) {
+                message = $('<div class="dialog alert"></div>');
+                message.text("An error occurred when deleting this translation");
+            } else if ( type == 'success_on_insert' ) {
+                message = $('<div class="dialog message"></div>');
+                message.text("Translation (id %s) has been added successfully".format(data.id));
+            } else if ( type == 'error_on_insert' ) {
+                message = $('<div class="dialog alert"></div>');
+                if ( data.error_code == 'already_exists' ) {
+                    message.text("A translation already exists for this language.");
+                } else {
+                    message.text("An error occurred when adding this translation");
+                }
+            }
+
+            $(messages).append(message);
+
+            setTimeout(function(){
+                message.hide()
+            }, 3000);
+        }
+
+        function send_update_request( data, cell ) {
+            $.ajax({
+                data: data,
+                type: 'PUT',
+                url: '/cgi-bin/koha/svc/localization',
+                success: function (data) {
+                    if ( data.error ) {
+                        $(cell).css('background-color', '#FF0000');
+                        show_message({ type: 'error_on_update', data: data });
+                    } else if ( data.is_changed == 1 ) {
+                        $(cell).css('background-color', '#00FF00');
+                        show_message({ type: 'success_on_update', data: data });
+                    }
+
+                    if ( $(cell).hasClass('lang') ) {
+                        $(cell).text(data.lang)
+                    } else if ( $(cell).hasClass('translation') ) {
+                        $(cell).text(data.translation)
+                    }
+                },
+                error: function (data) {
+                    $(cell).css('background-color', '#FF0000');
+                    if ( $(cell).hasClass('lang') ) {
+                        $(cell).text(data.lang)
+                    } else if ( $(cell).hasClass('translation') ) {
+                        $(cell).text(data.translation)
+                    }
+                    show_message({ type: 'error_on_update', data: data });
+                },
+            });
+        }
+
+        function send_delete_request( id, cell ) {
+            $.ajax({
+                type: 'DELETE',
+                url: '/cgi-bin/koha/svc/localization/?id='+id,
+                success: function (data) {
+                    $("#localization").DataTable().row( '#row_id_' + id ).remove().draw();
+                    show_message({ type: 'success_on_delete', data: data });
+                },
+                error: function (data) {
+                    $(cell).css('background-color', '#FF0000');
+                    show_message({ type: 'error_on_delete', data: data });
+                },
+            });
+        }
+
+        $(document).ready(function() {
+            $(".dialog").hide();
+
+            var table = $("#localization").DataTable($.extend(true, {}, dataTablesDefaults, {
+                'bPaginate': false,
+            }));
+
+            var languages_select = $('<select name="lang"></select>');
+            [% FOR language IN languages %]
+                [% FOR sublanguage IN language.sublanguages_loop %]
+                    var option;
+                    [% IF language.plural %]
+                        option = $('<option value="[% sublanguage.rfc4646_subtag %]">[% sublanguage.native_description %] [% sublanguage.region_description %] ([% sublanguage.rfc4646_subtag %])</option>');
+                        $(languages_select).append(option);
+                    [% ELSE %]
+                        option = $('<option value="[% sublanguage.rfc4646_subtag %]">[% sublanguage.native_description %] ([% sublanguage.rfc4646_subtag %])</option>');
+                    [% END %]
+                    $(languages_select).append(option);
+                [% END %]
+            [% END %]
+
+            $("td.translation").on('focus', function(){
+                $(this).css('background-color', '');
+            });
+            $("td.lang").on('click', function(){
+                var td = this;
+                var lang = $(td).text();
+                $(td).css('background-color', '');
+                var my_select = $(languages_select).clone();
+                $(my_select).find('option[value="' + lang + '"]').attr('selected', 'selected');
+                $(my_select).on('click', function(e){
+                    e.stopPropagation();
+                });
+                $(my_select).on('change', function(){
+                    var tr = $(this).parent().parent();
+                    var id = $(tr).data('id');
+                    var lang = $(this).find('option:selected').val();
+                    var data = "id=" + encodeURIComponent(id) + "&lang=" + encodeURIComponent(lang);
+                    send_update_request( data, td );
+                });
+                $(my_select).on('blur', function(){
+                    $(td).html(lang);
+                });
+                $(this).html(my_select);
+            });
+
+            $("td.translation").on('blur', function(){
+                var tr = $(this).parent();
+                var id = $(tr).data('id');
+                var translation = $(this).text();
+                var data = "id=" + encodeURIComponent(id) + "&translation=" + encodeURIComponent(translation);
+                send_update_request( data, this );
+            });
+
+            $("a.delete").on('click', function(e){
+                e.preventDefault();
+                if ( confirm(_("Are you sure you want to delete this translation?")) ) {
+                    var td = $(this).parent();
+                    var tr = $(td).parent();
+                    var id = $(tr).data('id');
+                    send_delete_request( id, td );
+                }
+            });
+
+            $("#add_translation").on('submit', function(e){
+                e.preventDefault();
+                var entity = $(this).find('input[name="entity"]').val();
+                var code = $(this).find('input[name="code"]').val();
+                var lang = $(this).find('select[name="lang"] option:selected').val();
+                var translation = $(this).find('input[name="translation"]').val();
+                var data = "entity=" + encodeURIComponent(entity) + "&code=" + encodeURIComponent(code) + "&lang=" + encodeURIComponent(lang) + "&translation=" + encodeURIComponent(translation);
+                $.ajax({
+                    data: data,
+                    type: 'POST',
+                    url: '/cgi-bin/koha/svc/localization',
+                    success: function (data) {
+                        if ( data.error ) {
+                            show_message({ type: 'error_on_insert', data: data });
+                        } else {
+                            // FIXME Should append the delete link
+                            table.row.add( [ data.id, data.entity, data.code, data.lang, data.translation, "" ] ).draw();
+                            show_message({ type: 'success_on_insert', data: data });
+                        }
+                    },
+                    error: function (data) {
+                        show_message({ type: 'error_on_insert', data: data });
+                    },
+                });
+            });
+
+         });
+    </script>
+[% END %]
+[% INCLUDE 'popup-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/sru_modmapping.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/sru_modmapping.tt
index 363ec5eb9a..4f53077262 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/sru_modmapping.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/sru_modmapping.tt
@@ -1,32 +1,7 @@
+[% SET footerjs = 1 %]
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; SRU search fields mapping</title>
 [% INCLUDE 'doc-head-close.inc' %]
-
-<script type="text/javascript">
-//<![CDATA[
-    $(document).ready(function() {
-        $("#form01").submit(function(event) {
-            if(window.opener) {
-                var newmap=allInputs();
-                window.opener.$('#show_sru_fields').val(newmap);
-                window.close();
-            } else {
-                // In this case not called as a popup. Just do nothing.
-                event.preventDefault();
-            }
-        });
-    });
-    function allInputs () {
-        var aInput= new Array();
-        $("form :input").each(function() {
-            if( this.id && $(this).val() ) {
-                aInput.push(this.id+'='+$(this).val());
-            }
-        });
-        return aInput.join(',');
-    }
-//]]>
-</script>
 </head>
 
 <body id="admin_sru_modmapping" class="admin">
@@ -95,4 +70,31 @@
         </form>
     </div>
 
-[% INCLUDE 'intranet-bottom.inc' %]
+[% MACRO jsinclude BLOCK %]
+    <script type="text/javascript" src="[% interface %]/[% theme %]/js/admin-menu.js"></script>
+    <script type="text/javascript">
+        $(document).ready(function() {
+            $("#form01").submit(function(event) {
+                if(window.opener) {
+                    var newmap=allInputs();
+                    window.opener.$('#show_sru_fields').val(newmap);
+                    window.close();
+                } else {
+                    // In this case not called as a popup. Just do nothing.
+                    event.preventDefault();
+                }
+            });
+        });
+        function allInputs () {
+            var aInput= new Array();
+            $("form :input").each(function() {
+                if( this.id && $(this).val() ) {
+                    aInput.push(this.id+'='+$(this).val());
+                }
+            });
+            return aInput.join(',');
+        }
+    </script>
+[% END %]
+
+[% INCLUDE 'popup-bottom.inc' %]
-- 
2.39.5