Android Question Webview add to page without reloading?

tsteward · Jun 14, 2020

Is it possible using a webview to add to a page without reloading the whole page?
My app loads local data from a local sql file, then checks an online database for user feedback. Adds this html data to the local data and displays the page.
I would like to display the local data whilst waiting for the online data to download then add it to the bottom of the already displayed data.

Some help or example if possible would be great or am I dream'n

JohnC · Jun 14, 2020

I'm not an expert with CSS/Javascript, but you could probably add a DIV tag like this to the original webpage:

B4X:

<DIV Id="BottomDiv"></DIV>

The above DIV will just be a placeholder to later display something at that location in the page.

And then you can inject some javascript into the webview at a later time to display some text in that DIV:

B4X:

https://www.b4x.com/android/forum/threads/webview-javascript-injection-launching-on-different-threads.118102/#post-738980

(the above example is just an example of injecting javascript and not an example of changing the DIV text)

tsteward · Jun 14, 2020

Yeah my brain not getting anything from that.

I'm thinking my app needs to load and display local content.
Then on pagefinished event I would request data from my online database via httpjob which on success returns some html script and then add that to the bottom of the original page.

I can and already do gather all this info so that's not an issue. How in my httpjob on success would I add that to the webview please.
At the moment I display please wait, download the online content and merge it with local content and display it all at once. I was wanting to display local data instantly to make it a bit quicker/nicer

JohnC · Jun 14, 2020

You said you want to dynamically change the content of a webview *without* reloading the entire page. One way to do that is using JavaScript.

You can do this by adding a "<DIV Id="MyPlaceholder"></DIV>" into the HTML code (before loading it into webview) at the place in the webpage that you later want to add new text to the webpage. For example you can add this tag to the bottom of the <Body> tag (bottom of the page).

When you then display the HTML code in webview, nothing will be initially displayed where you inserted the <DIV> tag.

Then, later when you want to add new content to the webpage (without reloading it) at the location of where you placed the <DIV> tag, you would use javascript to access that <DIV> tag and insert text where that <DIV> tag is located in the page using code like this:

B4X:

'wv = webview control
'wve = webviewextras lib
wve.ExecuteJavascript(wv, "document.getElementById('MyPlaceholder').innerHTML = 'New Content';")

Which will add the text "New Content" to the webpage (at the location of where you placed the <DIV> tag) without reloading the entire page

NOTE: The exact syntax of the "wve.ExecuteJavascript" line is what I am not sure of, so you'll have to play with it a little to get it to work.

tsteward · Jun 14, 2020

JohnC said:
You said you want to dynamically change the content of a webview *without* reloading the entire page. One way to do that is using JavaScript.

You can do this by adding a "<DIV Id="MyPlaceholder"></DIV>" into the HTML code (before loading it into webview) at the place in the webpage that you later want to add new text to the webpage. For example you can add this tag to the bottom of the body tag (bottom of the page).

When you then display the HTML code in webview, initially nothing will be displayed where you inserted the <DIV> tag.

Then, later when you want to add new content to the webpage at the place of the <DIV> tag (without reloading it), you would use javascript to access that <DIV> tag and insert text where that <DIV> tag is located in the page using code like this:

B4X:

'wv = webview control 'wve = webviewextras lib wve.ExecuteJavascript(wv, "document.getElementById('MyPlaceholder]').innerHTML = 'New Content';")

Which will add the text "New Content" to the webpage (at the location of where you placed the <DIV> tag) without reloading the entire page

NOTE: The exact syntax of the "wve.ExecuteJavascript" line is what I am not sure of, so you'll have to play with it a little to get it to work.

Ok think I've got it. So the Java script is in b4a httpjob on success not in the web page?

JohnC · Jun 14, 2020

Yes, you run the javascript whenever you want to change the text (at the <DIV> location) being displayed in the webview.

tsteward · Jun 14, 2020

Here is a test app.
in the button click sub line 48

B4X:

newtxt = "<table style='text-align: left; width: 100px;' border = 1><tr><td>a<br></td><td>b<br></td></tr></table>"

If your remove the - style='text-align: left; width: 100px;' then it works. Is there a way to insert Tables with style?

rraswisak · Jun 14, 2020

please modify your ExecuteJavascript with this line:

B4X:

wve.ExecuteJavascript(WebView1, $"document.getElementById('MyPlaceholder').innerHTML = "${newtxt}";"$)

JohnC · Jun 14, 2020

tsteward said:
B4X:

newtxt = "<table style='text-align: left; width: 100px;' border = 1><tr><td>a<br></td><td>b<br></td></tr></table>"

If your remove the - style='text-align: left; width: 100px;' then it works. Is there a way to insert Tables with style?

I think the single quote marks for the style parameter need to be regular quote marks (double stroke), and to have a quote mark in a string you need to then use double quote marks together. Try this:

B4X:

newtxt = "<table style=""text-align: left; width: 100px;"" border = 1><tr><td>a<br></td><td>b<br></td></tr></table>"

Android Question Webview add to page without reloading?

tsteward

Well-Known Member

JohnC

Expert

tsteward

Well-Known Member

JohnC

Expert

tsteward

Well-Known Member

JohnC

Expert

tsteward

Well-Known Member

Attachments

rraswisak

Active Member

JohnC

Expert

Similar Threads