Page 1 of 1
jquery problem: .append does not show, but works in console
Posted: 2019-06-26 09:44
by onoehring
Hi,
pbötcher suggested some code to me here (
viewtopic.php?f=2&t=3102 ).
I played with the jquery a little and tried to insert text below a details table (see screenshot).
The code is
Code: Select all
$j('#panel_ecomo_ContainerBilder-ID_Container tfoot tr td').append(' <span style="font-size: small !important;">(max. 10 je Container)</span>')
and is placed in the /hooks/tablename.php ->
..._footer function. This code however does
not work when the page is initially generated. When I open the console and paste the code it works fine as you can see in the image.
Does anyone has a suggestion what I need to change to get the result shown automatically right away - like one would expect it?
- ec46.png (39.7 KiB) Viewed 4324 times
Olaf
Re: jquery problem: .append does not show, but works in console
Posted: 2019-06-26 09:50
by jsetzer
You should use your browser's developer tools (F12) to find the target you need . Then you will be able to see that element's id (if exists), class (if exists) or path which you can use to append your element to.
Re: jquery problem: .append does not show, but works in console
Posted: 2019-06-26 09:56
by onoehring
Hi Jan
a) I tried some Chrome extension to find the target. How can I do that directly using F12? Can you point me the way please?
b) As the code works in the console, I suppose the target is correct. .... Am I wrong?
Olaf
Re: jquery problem: .append does not show, but works in console
Posted: 2019-06-26 10:08
by jsetzer
a) you don't need any chrome extension. Chrome, Firefox and others (even IE/Edge) include them. Just press F12 or select developer tools from the [...] menu of your browser. If have googled the following URL for you:
https://developers.google.com/web/tools ... -devtools/
b) if the code works in the console, this means the target exists. If this is
correct or not depends on your requirement. You can place your new element wherever you like. It just depends on the target you define in your .appendTo() or .prependTo() call.
If you wish to manipulate the standard-output of generated AppGini apps, I highly recommend reading the documentation about selectors and about appendTo() / prependTo() functions. I have google'd the following URL's for you:
https://www.w3schools.com/jquery/jquery_selectors.asp
https://www.w3schools.com/jquery/html_appendto.asp
https://www.w3schools.com/jquery/html_prependto.asp
Regards,
Jan
Re: jquery problem: .append does not show, but works in console
Posted: 2019-06-26 10:22
by jsetzer
By the way: <span> does not force any line break or so. Just in case you expect your text being somewhere below your target.
Re: jquery problem: .append does not show, but works in console
Posted: 2019-06-26 11:22
by onoehring
Hi Jan,
thank you for google'ing and the links. I will take a look as I am new to jquery and just used your and pbötcher's suggestion and tried to extend those.
Yes, I used span on purpose for now because I find it nicer to have the additional information places right there where it can be seen in the image.
The
problem I tried to describe in the thread is, that
the code works in the console: It adds that piece of text at the correct position,
but it does not work in the initial creation of the page directly. And the code is found in the source of the page (CTRL+U). An extraction of that area of code (I added some linebreaks to make it easier to read here):
Code: Select all
</div></div></div></form></div><div class="col-xs-1 md-hidden lg-hidden"></div></div>
<script>$j('#panel_ecomo_ContainerBilder-ID_Container tfoot tr td').append(' <span style="font-size: small !important;">(max. 10 je Container)</span>')</script>
<!-- Add footer template above here -->
When I run the $j in the console, the code is analyzed and interpreted as I want to
Code: Select all
<tfoot>
<tr>
<td colspan="8">
<span style="margin: 10px;">
Records 1 to 7 of 7 </span>
<span style="font-size: small !important;">(max. 10 je Container)</span></td>
</tr>
</tfoot>
Olaf
Re: jquery problem: .append does not show, but works in console
Posted: 2019-06-26 11:35
by onoehring
Hi,
just a thought: Maybe the reason is, that AG itself creates the record navigation only after the page is generated? In this case, my attempt to do this when the page is being generated the first time would fail because at this time, the selector I used might not even exist.
Maybe?
Olaf
Re: jquery problem: .append does not show, but works in console
Posted: 2019-06-26 11:38
by jsetzer
Yes, many parts on AppGini pages are being lazy-loaded using AJAX.
Re: jquery problem: .append does not show, but works in console
Posted: 2019-06-26 11:59
by onoehring
Hi Jan,
I guess that was the reason. I change the code now to place the information at some place that is already generated at the beginning of the page (i.e. the title).
Too bad, I would have liked it much more in the specific sub-table ("Bilder" / "Images" of the containers) instead of the general headline.
- ec47.png (7.89 KiB) Viewed 4314 times
Thank you for your help.
Olaf
Re: jquery problem: .append does not show, but works in console
Posted: 2019-06-26 12:32
by jsetzer
There was a blog post of Ahmed, don't know the URL, showing late binding after children tabs have been loaded using 'ajaxStop' event. Ahmed's post was about badges in tab captions. You can use the ajaxStop event, too, to change everything you want in tabs after they have been created - even create new tabs with additional data or visualizations for example.
Jan
Re: jquery problem: .append does not show, but works in console
Posted: 2019-06-26 12:38
by jsetzer
https://bigprof.com/blog/appgini/displa ... tab-title/
That is the post I was refering to. My mistake: he did not use ajaxStop event but a timer. I have done a similar implementation for badges in tab captions using ajaxStop event. Both ways can be used to fulfill your requirement.
Re: jquery problem: .append does not show, but works in console
Posted: 2019-06-27 06:08
by onoehring
Hi Jan,
thank you for investigating and that great tip. I was already happy with the knowledge you and pbötcher helped me with before, placing content somewhere. But now, having the opportunity use "additional" places that were not accessibly by the code (before), is great.
Olaf
Re: jquery problem: .append does not show, but works in console
Posted: 2019-06-27 07:19
by onoehring
Hi,
I changed his code to check if the additional information was inserted already (then do nothing) or if it was not yet inserted insert it.
Thanks again for your help
My working code to insert something at the bottom of the details navigation is:
Code: Select all
<script>
\$j(function() {
setInterval(function() {
var n = \$j('#panel_ecomo_ContainerBilder-ID_Container').find('td span.BilderMaxJeContainer').length;
if (n < 1 ) {
\$j('#panel_ecomo_ContainerBilder-ID_Container tfoot tr td').append(' " . $BilderMaxAnzahl . "')
}
else {
}
}, 1000);
})
</script>
It looks like this (as expected) now:
- ec48.png (26.37 KiB) Viewed 4294 times
Olaf