jquery problem: .append does not show, but works in console

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

jquery problem: .append does not show, but works in console

Post by onoehring » 2019-06-26 09:44

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
ec46.png (39.7 KiB) Viewed 421 times
Olaf

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

Re: jquery problem: .append does not show, but works in console

Post by jsetzer » 2019-06-26 09:50

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.

onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 298
Joined: 2019-05-21 22:42
Contact:

Re: jquery problem: .append does not show, but works in console

Post by onoehring » 2019-06-26 09:56

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

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

Re: jquery problem: .append does not show, but works in console

Post by jsetzer » 2019-06-26 10:08

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

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

Re: jquery problem: .append does not show, but works in console

Post by jsetzer » 2019-06-26 10:22

By the way: <span> does not force any line break or so. Just in case you expect your text being somewhere below your target.

onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 298
Joined: 2019-05-21 22:42
Contact:

Re: jquery problem: .append does not show, but works in console

Post by onoehring » 2019-06-26 11:22

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

onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 298
Joined: 2019-05-21 22:42
Contact:

Re: jquery problem: .append does not show, but works in console

Post by onoehring » 2019-06-26 11:35

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

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

Re: jquery problem: .append does not show, but works in console

Post by jsetzer » 2019-06-26 11:38

Yes, many parts on AppGini pages are being lazy-loaded using AJAX.

onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 298
Joined: 2019-05-21 22:42
Contact:

Re: jquery problem: .append does not show, but works in console

Post by onoehring » 2019-06-26 11:59

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
ec47.png (7.89 KiB) Viewed 411 times
Thank you for your help.

Olaf

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

Re: jquery problem: .append does not show, but works in console

Post by jsetzer » 2019-06-26 12:32

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

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

Re: jquery problem: .append does not show, but works in console

Post by jsetzer » 2019-06-26 12:38

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.

onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 298
Joined: 2019-05-21 22:42
Contact:

Re: jquery problem: .append does not show, but works in console

Post by onoehring » 2019-06-27 06:08

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

onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 298
Joined: 2019-05-21 22:42
Contact:

Re: jquery problem: .append does not show, but works in console

Post by onoehring » 2019-06-27 07:19

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
ec48.png (26.37 KiB) Viewed 391 times
Olaf

Post Reply