Page 1 of 1
Using JQuery with WebViewExecuteScript possible?
Posted: Mon Mar 25, 2024 2:20 pm
by Tranquil
Hello all!
I'm trying to call some JQuery methods but it does not work.
Unfortunately, WebViewExecuteScript does not return any error-Code and the console of my WebViewGadget is also empty.
I just tried this to add a class to my body section:
and the DOM still keeps untouched. (works within my .html but not when calling it from outside)
I also tried to implement a kind of wrapper. Calling a JS function from PB, but this also failed.
Anyone has a working example of how to do this?
Thanks a lot!
Re: Using JQuery with WebViewExecuteScript possible?
Posted: Mon Mar 25, 2024 2:51 pm
by Kiffi
Perhaps you have not taken into account that jQuery needs a little time before it is ready for use?
Code: Select all
Enumeration
#Window
#WebViewGadget
#Button
EndEnumeration
Procedure ButtonGadgetEvent()
WebViewExecuteScript(#WebViewGadget, "$('#testDiv').addClass('blueBackground')")
EndProcedure
HTML.s = ~"<!DOCTYPE html>\n" +
~"<html lang='en'>\n" +
~" <head>\n" +
~" <meta charset='utf-8'/>\n" +
~"" +
~" <style>\n" +
~" .blueBackground { background-color: blue }\n" +
~" </style>\n" +
~"" +
~" <script type='text/javascript' src='https://code.jquery.com/jquery-3.7.1.min.js'></script>\n" +
~"" +
~" <script type='text/javascript'>\n" +
~" $(document).ready(function() {\n" +
~" alert('jQuery is ready!');\n" +
~" });\n" +
~" </script>\n" +
~" </head>\n" +
~" <body>\n" +
~" <div id='testDiv' style='width: 100px; height: 100px; border: 1px solid black'></div>\n" +
~" </body>\n" +
~"</html>";
OpenWindow(#Window, 0, 0, 1000, 800, "Hello", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
ButtonGadget(#Button, 0, 0, 100, 30, "AddClass")
WebViewGadget(#WebViewGadget, 0, 30, 1000, 800 - 30, #PB_WebView_Debug)
SetGadgetItemText(#WebViewGadget, #PB_WebView_HtmlCode, HTML)
BindGadgetEvent(#Button, @ButtonGadgetEvent())
Repeat
Event = WaitWindowEvent()
Until Event = #PB_Event_CloseWindow
Hint: If you create the WebView gadget with the #PB_WebView_Debug flag, you can open the developer console by right-clicking on the gadget in the pop-up menu.
Re: Using JQuery with WebViewExecuteScript possible?
Posted: Mon Mar 25, 2024 9:21 pm
by Tranquil
Yea, that seems to fix it. Indeed I thought it has something to do with it and I added a delay(1000) for testing purpose and it still did not work.
Now I'm waiting until the DOM content is completely loaded and send a message back to my PB instance. I think that is the smartest way to solve this.
Seems that it takes just some ms more then my 1000 test. :-/
Thank you a lot for your time and taking a look on it!
Re: Using JQuery with WebViewExecuteScript possible?
Posted: Mon Mar 25, 2024 10:17 pm
by Kiffi
Tranquil wrote: Mon Mar 25, 2024 9:21 pmNow I'm waiting until the DOM content is completely loaded and send a message back to my PB instance.
here's an example to wait until jQuery is ready:
Code: Select all
Enumeration
#Window
#WebViewGadget
EndEnumeration
Procedure jQueryIsReady(JsonParameters$)
WebViewExecuteScript(#WebViewGadget, "$('#testDiv').addClass('blueBackground')")
EndProcedure
HTML.s = ~"<!DOCTYPE html>\n" +
~"<html lang='en'>\n" +
~" <head>\n" +
~" <meta charset='utf-8'/>\n" +
~"" +
~" <style>\n" +
~" .blueBackground { background-color: blue }\n" +
~" </style>\n" +
~"" +
~" <script type='text/javascript' src='https://code.jquery.com/jquery-3.7.1.min.js'></script>\n" +
~"" +
~" <script type='text/javascript'>\n" +
~" $(document).ready(function() {\n" +
~" window.jQueryIsReady();\n" +
~" });\n" +
~" </script>\n" +
~" </head>\n" +
~" <body>\n" +
~" <div id='testDiv' style='width: 100px; height: 100px; border: 1px solid black'></div>\n" +
~" </body>\n" +
~"</html>";
OpenWindow(#Window, 0, 0, 1000, 800, "Hello", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
WebViewGadget(#WebViewGadget, 0, 0, 1000, 800, #PB_WebView_Debug)
BindWebViewCallback(#WebViewGadget, "jQueryIsReady", @jQueryIsReady())
SetGadgetItemText(#WebViewGadget, #PB_WebView_HtmlCode, HTML)
Repeat
Event = WaitWindowEvent()
Until Event = #PB_Event_CloseWindow