Next / Prev. Navigation in DV

This sub-forum is for discussing all topics related to AppGini Helper JavaScript Library, provided by bizzworxx as a third-party AppGini plugin.
Post Reply
skoch
Veteran Member
Posts: 49
Joined: 2020-01-27 14:20

Next / Prev. Navigation in DV

Post by skoch » 2021-02-01 17:20

Hello,

since the last update of Appgini version 5.94 the new feature "Next / Prev navigation in DV" has been added. It shows the Next / Prev buttons with icon and text in the detail view.
When used in conjunction with the AppGini Helper (Compact Layout) plug-in, is there a way to suppress the text from the button system-wide.

Ahmed sent me a script for the hooks / footer-extras.php, which deletes the button text, but not for the first record, where it is still displayed.
Below is the script:

Code: Select all

<script>
$j(function() { 
   var btnText = $j('.next-record').text().trim();
   var btnHtml = $j('.next-record').html();
   $j('.next-record').html(btnHtml.replace(btnText, ''));

   btnText = $j('.previous-record').text().trim();
   btnHtml = $j('.previous-record').html();
   $j('.previous-record').html(btnHtml.replace(btnText, ''));
})
</script>
Is there a solution?

Stefan
Attachments
side-panel-buttons.PNG
side-panel-buttons.PNG (4.05 KiB) Viewed 4225 times

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Next / Prev. Navigation in DV

Post by jsetzer » 2021-02-02 07:09

Thank you for reporting this issue. I am going to fix it with the next release.

For now you can use the following javascript code in your hooks/TABLENAME-dv.js file:

Code: Select all

$j("button[name=nextRecordDV],button[name=previousRecordDV]").each(function(){var n=$j(this).text(),a=$j(this).find("i.glyphicon");span=$j("<span/>").append(n).addClass("visible-xs"),$j(this).html("").append(a).append(span)});
chrome_hqEBBwLAno.png
chrome_hqEBBwLAno.png (727 Bytes) Viewed 4215 times
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

SOLVED: Next / Prev. Navigation in DV

Post by jsetzer » 2021-02-02 07:22

I have looked at the source code. These two new buttons are dynamically loaded. They are not yet present when the script is executed on detail view load.

So, instead of ...

Code: Select all

var dv = AppGiniHelper.dv;
dv.compact();
...just write...

Code: Select all

var dv = AppGiniHelper.dv;
dv.ready(function () {
    dv.compact();
});
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

skoch
Veteran Member
Posts: 49
Joined: 2020-01-27 14:20

Re: Next / Prev. Navigation in DV

Post by skoch » 2021-02-04 10:36

Hello,

with these adjustments it works great - thank you very much :D

Stefan

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

SOLVED: Next / Prev. Navigation in DV

Post by jsetzer » 2021-02-04 10:45

Great, glad to hear that!
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

ddelpiano
Posts: 8
Joined: 2021-07-17 15:08

Re: SOLVED: Next / Prev. Navigation in DV

Post by ddelpiano » 2021-07-17 16:54

jsetzer wrote:
2021-02-02 07:22
I have looked at the source code. These two new buttons are dynamically loaded. They are not yet present when the script is executed on detail view load.
[...]
Hello!
I've applied your suggestions and added the following code to all *-dv.js files:

// file: hooks/anagrafica-dv.js
var dv = AppGiniHelper.DV;
// Compact View
$j("button[name=nextRecordDV],button[name=previousRecordDV]").each(function(){var n=$j(this).text(),a=$j(this).find("i.glyphicon");span=$j("<span/>").append(n).addClass("visible-xs"),$j(this).html("").append(a).append(span)});// file: hooks/patenti-dv.js
dv.ready(function () {
dv.compact();
});
AppGiniHelper.DV.compact(true, true, true);

It works! But...
Is there a more elegant/efficient way to put some of it once, say in header-extras.js?
Please help me with syntax, because I'm not much of a programmer (my job was network management).
Thank you

Dario Delpiano

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Next / Prev. Navigation in DV

Post by jsetzer » 2021-07-23 14:34

Did you already try putting the code into header-extras?

(not tested)

Code: Select all

<!-- file: hooks/header-extras.php -->
<script>
jQuery(document).ready(function(){
  $j("button[name=nextRecordDV],button[name=previousRecordDV]").each(function(){var n=$j(this).text(),a=$j(this).find("i.glyphicon");span=$j("<span/>").append(n).addClass("visible-xs");$j(this).html("").append(a).append(span)});
});
</script>
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

ddelpiano
Posts: 8
Joined: 2021-07-17 15:08

Re: Next / Prev. Navigation in DV

Post by ddelpiano » 2021-07-27 13:56

I've moved the code to hooks/header-extras.php and it seems to work.
But... not always! For some mysterious reasons, sometimes label are shown, random.
I've cleared browser cache, restarted Apache. Problem persists. Any ideas?
Thank you
Dario Delpiano

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Next / Prev. Navigation in DV

Post by jsetzer » 2021-07-27 18:05

Maybe the lazy loaded elements are not yet loaded at the moment you execute your code
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

ddelpiano
Posts: 8
Joined: 2021-07-17 15:08

Re: Next / Prev. Navigation in DV

Post by ddelpiano » 2021-07-29 18:02

jsetzer wrote:
2021-07-27 18:05
Maybe the lazy loaded elements are not yet loaded at the moment you execute your code
Could you please explain? Is that due to code, to slow test server (WAMP) or to browser?
Thank you

Dario Delpiano

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Next / Prev. Navigation in DV

Post by jsetzer » 2021-07-29 19:55

Explanation;
When loading a webpage dozens to hundreds of single resources are loaded. Due to internet architecture there is no guarantee for a certain order of loading nor can be guaranteed that specific lazy loaded resources are available when the main page has been downloaded completely.
Before accessing an element for manipulation you should check availability of the element.

Waiting for document.ready should be fine in many cases. But I cannot see your complete code nor can I see any errors nor do I know your network performance. So, it's impossible for me to do remote debugging. If my 1st solution is working fine but the 2nd solution is not, I'd recommend you should go with the 1st solution.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

ddelpiano
Posts: 8
Joined: 2021-07-17 15:08

Re: Next / Prev. Navigation in DV

Post by ddelpiano » 2021-08-20 13:35

Hello again!
I had applied your code, and it works. But...
in AppGiniHelper library there is an ActionButton function that seems to do the same, only in a cleaner and ordinate manner.
I removed all previous code from hooks/*-dv.js and added in each [tablename]-dv.js the following code:

Code: Select all

var actionbuttons = dv.actionbuttons;
AppGiniHelper.DV.ActionButtons()
    .hideText();
It doesn't work! What I'm doing wrong?
Thank you

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Next / Prev. Navigation in DV

Post by jsetzer » 2021-08-20 22:15

As far as I can see AppGiniHelper.DV.ActionButtons()
.hideText(); has nothing to do with hiding prev/next buttons
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

ddelpiano
Posts: 8
Joined: 2021-07-17 15:08

Re: Next / Prev. Navigation in DV

Post by ddelpiano » 2021-08-22 16:52

Thank you

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Next / Prev. Navigation in DV

Post by jsetzer » 2021-11-24 07:47

I have had a closer look at hideText()-method of DV-ActionButtons.

Status

At least in latest version it seems to work even for Prev / Next buttons:

Default Prev / Next buttons
chrome_E7ngsKlgpb.png
chrome_E7ngsKlgpb.png (1.63 KiB) Viewed 3093 times

Call hideText()-method in console
chrome_v96UKHNmgX.png
chrome_v96UKHNmgX.png (1.55 KiB) Viewed 3093 times

After execution of hideText()-method
chrome_aoQKrIbp2n.png
chrome_aoQKrIbp2n.png (1.5 KiB) Viewed 3093 times

Problem

The problem is related to lazy loading of Prev / Next buttons (explanation for lazy-load: see above). This means before executing the hideText() methods you will have to wait for the buttons to exist.

Solution

Perhaps the easiest solution: try this

Code: Select all

// file: hooks/TABLENAME-dv.js
var dv = AppGiniHelper.dv;
dv.ready(function () {
    dv.getActionButtons().hideText();
});
This works for me.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

Post Reply