Using JQuery with WebViewExecuteScript possible?

Tranquil · Post by **Tranquil** » Mon Mar 25, 2024 2:20 pm

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:

Code: Select all

$('body').addClass("Test");

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!

Post by **Kiffi** » Mon Mar 25, 2024 2:51 pm

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.

Tranquil · Post by **Tranquil** » Mon Mar 25, 2024 9:21 pm

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!

Post by **Kiffi** » Mon Mar 25, 2024 10:17 pm

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

PureBasic Forums - English

Using JQuery with WebViewExecuteScript possible?

Using JQuery with WebViewExecuteScript possible?

Re: Using JQuery with WebViewExecuteScript possible?

Re: Using JQuery with WebViewExecuteScript possible?

Re: Using JQuery with WebViewExecuteScript possible?