How to remove X-Close on WebDialog?

I have a floating WebDialog that I use to hold some user options. I have a Close button that hides the WebDialog.

If the user clicks the X-Close button instead it forces the WebDialog to close and lose my settings. What’s worse running myWebDialog.Show or myWebDialog.Visible = True doesn’t return the WebDialog.

Is there a way to cancel a WebDialog Close/Dismissed event? Or hide/remove the X-Close button?

Pop through the DOM chain with your browser and see if you can find either an ID or a class for the close X button and then use ExecuteJavaScript to remove the element after it’s shown.

When I cycle through the elements on the WebDialog I only get my own Xojo objects, not the windows’s Close box. How can I isolate that?

for tempInt As Integer = 0 to myWebDialog.ControlCount - 1 tempString = myWebDialog.ControlAtIndex(tempInt).Name next

Plus, once I find it, how do I remove it? Is it something like this:

myWebDialog.ExecuteJavaScript("document.getElementById('" + myWebDialog.ControlID + "_inner').remove();")

You can’t access some elements (like ones in the framework) by cycling through the controls, so you have to sift through the web app’s DOM in your browser to find some of the details you want.

I’ve made a video tutorial on how to do just that, maybe it’ll help someone in the future :slight_smile:
https://dl.dropboxusercontent.com/u/10504478/HideElement.mp4

In an effort not to have things unrelated to this thread get all kinds of broken from someone following the tutorial I covered the code to merely hide the element. The close button still functions even though it’s hidden, so you will need to use the .remove() function.

It’s covered in the video, but below is the ExecuteJavaScript that you’ll need for your purposes.

ExecuteJavaScript("document.getElementById('" + me.ControlID + "_close').remove();")

Keep in mind that removing DOM elements like that is not always safe. I think you’ll be fine in this instance because running this in Shown means that Xojo has already set itself up with event handlers and won’t be trying to attach to the object after we remove it. But, as with all modifications outside the framework, Xojo does not support issues that may arise.

@Tim Parnell Thanks for the video and the time taken — very informative and exactly what I need!

I found that the subsequent Shown events would cause a JavaScript error since the CloseBox is now removed, so I have changed it to hide the ChoseBox instead:

This can now be called as often as you want without error messages.