HtmlBox and embedded script

0
0

I have a WiseJ application, ported from VWG.  One of the pages contains an HtmlBox.  At runtime, the code-behind calls a service which returns some HTML (don’t get me started on what a bad design this is – not my doing).   The returned HTML contains markup and script using JQuery.

The HTML is displayed, but there’s no sign of life from the JQuery application.

The HTML script tags look like this:

<script type=’text/javascript’ src=’INSTPATH/js/jquery/jquery.min.js’></script>

Where INSTPATH is replaced at runtime with text that I can control.  I’ve put the necessary files in a JS sub-folder of my application directory, yet I can’t see that the browser is even attempting to read these files.

So, I guess there are two questions, really –

  • Should this work?  I’m assuming the answer is yes – it worked in VWG afterall.
  • Where should I put the .js files and how should they be referenced in the HTML?

I know this is a basic question – but I’m fundamentally not a web developer, and the things I can think of to try haven’t worked, so here I am.

Questions
Share
  • You must to post comments
Filter
Sort by: Recently Active
0
0

1. For your question of “Should this work?”- No, there are security restrictions preventing it from working. This is by design- think of the HtmlPanel as being in a sandbox, isolated from the main app. However, there is a workaround where you can use the InitScript property to execute the JavaScript- see this forum post for an example: https://wisej.com/support/question/using-html-in-an-html-panel

2. Regarding the IFramePanel, you are correct in that you would need to supply a URL to use the IFramePanel. I wouldn’t recommend using the IFramePanel for this anyways, as it will be subject to CORS restrictions. You can execute javascript code in the IFramePanel, but there will be some difficulty in getting it to interact with the main app. You would need to implement a way to send and receive messages using the postMessage() APIs.

3. Re: Where should I put the .js files and how should they be referenced in the HTML?
You have several options for running JavaScript code in Wisej:
1. As I mentioned earlier, you can use the HtmlPanel and do something similar to https://wisej.com/support/question/using-html-in-an-html-panel. That example loads javascript from a cdn (the ChartJS library) but it should also work when loading javascript from a filepath.

2. You can use the Widget class, see: https://docs.wisej.com/docs/controls/content/widget and https://docs.wisej.com/api/wisej.web/content/widget
We use this to integrate third-party JavaScript applications, but you can use it to run your JavaScript code. If your put your javascript code in the InitScript, it will run when the widget is created. Alternatively, if you want to keep your javascript code in a separate file, you can reference that file using the “Packages” property, which can be set in the designer. Once you have added a package, for the “Source” simply put the relative filepath to your script. You can then call whatever javascript methods you need from your code in the InitScript. I recommend this method, as it integrates the most closely into the rest of the application.

3. You can use the JavaScript Extender. Simply search for “JavaScript” in the Toolbox, then drag and drop the extender into the designer.
see https://docs.wisej.com/docs/concepts/javascript and https://docs.wisej.com/api/wisej.web/extenders/javascript

You may find the SetJavaScriptSource function helpful as it lets you load JavaScript from a file: https://docs.wisej.com/api/wisej.web/extenders/javascript#setjavascript-control-script

4. You can use the Call and Eval functions to call JavaScript code from your C# code.
https://docs.wisej.com/api/wisej.web/general/control#call-function-args
https://docs.wisej.com/api/wisej.web/general/control#eval-javascript
https://docs.wisej.com/docs/concepts/javascript has some code examples that use Call and Eval.

Hope this helps!

-Julie

  • Carl Daniel
    Thanks for the tips – I’ll see what I can put together. I absolutely HATE the way this UI was built – but I don’t really have the time to reengineer the way it works to be more sensible, so hopefully I can make it go using the pointers you’ve provided.
  • You must to post comments
0
0

Since apparently the folks at WiseJ don’t get notified about comments, I’ll post this as an “answer”.  I strongly suspect that this is the culprit:

The VWG component “HtmlBox” is implemented as an <iframe>, while the WiseJ “HtmlPanel” is implemented as a <div>.  So, the question becomes, is there a control in WiseJ that wraps an <iframe> and if not, what does it take to make one?

Or am I wrong?

I see that there is an IFramePanel component, but it only accepts a URL – I need to supply the content to the control as HTML, not via a URL…

  • You must to post comments
0
0

Hey Carl,

Can you please attach a small runnable sample project that demonstrates what you’ve mentioned?

Thanks,
Levie

  • Carl Daniel
    Probably not, but I’ll see what I can do. I think all I really need is general guidance – where to place files, how to reference them in the HTML content, etc. I don’t expect that there’s a deeper problem here (but who knows).
  • Carl Daniel
    Best I can tell, all tags in the embedded HTML are being ignored. I can see them in the HTML using the browser developer tools, but I see no signs of life. Script tags that reference files do not cause the browser to load that file (the path and name are good), and immediate script inside the tag is not executed – a window.alert() does not result in a pop-up. Is the something special that I’m not doing? This “just worked” in VWG, so I’m puzzled what’s going on here…
  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.