Major Problems with the Chrome Helper Commands.

[jhackney]

I have several old desktop applications using xDialog that I am updating to incorporate Bootstrap 5.3 as a replacement to the standard xDialog user interface. So far the aesthetics and performance using Bootstrap are amazing. Unfortunately, tying the UI and custom javascript functions back to the older dialog buttons and functions has been a challenge. Enough so that I am questioning whether or not the cp helper functions really work in a more complex HTML environment. Specifically the cp.ExecuteJavascriptResult(jstorun) function. I have spent approx 20 hours trying to debug the possible source of my conflict with this function to no avail. My questions for the community and everything I have done to troubleshoot are listed below.

Specific problem (one of many):

jstorun = "document.getElementById('myCheckboxId').checked;" 
resultA = cp.ExecuteJavascriptResult(jstorun)    '===> hangs then fails in my app.  Works in test environment
jstorun = "document.getElementById(myCheckboxId').hasAttribute('checked');"
resultB = cp.ExecuteJavascriptResult(jstorun)     '===> hangs then fails in my app.  Works in test environment​

'Alt Code
resultA = cp.GetAttribute('myCheckboxId', "checked")  '===> hangs then fails in my app.  Fails in test environment so anyone can reproduce
resultB = cp.HasAttribute('myCheckboxId', "checked")  '===> hangs then fails in my app.  Fails in test environment so anyone can reproduce

Questions for the Community:

1. Has anyone used the Chrome Control within an xDialog within the last 2 years to build an application? If so, did you run into any problems using the cp.ExecuteJavascriptResult(jstorun) function or anything else using the cp pointer? I am interested in any insight or knowledge gained from your issues.
2. From a logic standpoint, is there anything else that I should try to identify the issue? I listed the primary methods performed below. If I included them all I would have to publish a book.
3. Is it even possible for the HTML code itself to cause a problem with the CP functions?

Troubleshooting Steps:

1. In a test environment where the function was successful, I included all of the css and javascript files that are in my application. Test environment still successful less all of the HTML from my application.
2. In my application, removed all of the css and javascript files but it still did not work.
3. Inspected my HTML code using WebStorm application and no issues were found.
4. Tried every alt method available under CP to no avail.
5. Did not use HTML_Page_Prepare() function so I do not need to worry about any jQuery or Alpha Anywhere javascript conflicts.
6. I can not imagine that any of my xBasic code is causing an issue.

[kkfin]

The way I do it with Chrome Control is to use DOM for storing values and pass values between javascript and xbasic. So I use cp.GetValue and cp.SetValue in xbasic and I fire events from javascript and from html button and I use xDialogEvent function to fire then xbasic events. And so xbasic and javascript talk with values stored in DOM. I use hidden fields for this purpose. So actually I save variables to them. This works fine because user will never see the DOM which is not case in web application.

So for example this way I pass value to xbasic from javascript event:

document.getElementById("instanceid").value = editedInstace;
xdialogEvent('delrec', editedInstace);

[jhackney]

kkfin, thanks for the response. I do it the same way except I prefer a JavaScript object for storing values. I also use the windows variable space if it is strictly desktop.

My issue is this, I can set the value of an input using cp.setValue('id', value) but calling cp.getValue('id') on the next line hangs and returns nothing. Same thing if I set the value using JavaScript and cp.executeJavascript(js) and try to return the result using JavaScript and cp.executeJavascriptResult(js). Have you ever had any time when you had problems using the cp functions that were not due to the asyncrenous nature of JavaScript? I have not until now and it is driving me crazy. I have already ruled out another js file which leaves me with an issue with the HTML. How would it be possible that the HTML markup is causing this issue? It does not make sense to me.

[kkfin]

I did a quick test.
I do not have problem with cp.executeJavascriptResult(js) and cp.executeJavascript(js) but with cp.SetValue and cp.GetValue on the next line I do. But it does not hang. I did solve this using cp.GetValue twice. I did the test with simple text input. But for example cp.hasElement was always false whatever I did do…

[jhackney]

kkfin, I started re-writing my application to see if I could figure out what is breaking the get portion of the CP helper. Right after I declared all of my test variables that prove that CP does work, I broke it. I think I now have enough to submit a bug report. If you want to see if you can obtain the same results, I have attached a simple function you can import and run. To break, do the following:

1. Import the attached function and execute.
2. You will see a bunch of test buttons at the bottom that execute CP functions.
3. Using the buttons, set the value of the checkbox and then get the value of the checkbox.
4. Immediately following this, get the value of the window var. It should return "undefined" but instead it returns a type error.
5. Close the function and open again.
6. As soon as it opens, get the value of the window var again. Everything works.
7. Immediately following this, get the value of the checkbox. It returns a type error.

If I had to bet, there is probably some old alpha JavaScript that is still using var and the global namespace when it needs to be changed to either const or let. Whenever it runs a type check, it is returning the result from the previous check.

[jhackney]

Resolved. Whenever you need to push data from from the chrome control back to xDialog/xBasic so you can take immediate action, do the following:

Chrome Side:

<button id="myButton" onclick="myJsFunction()">My Button</button>

<script>
function myJsFunction() {
   ...manipulate some data...
   Const myVar = my data converted to text
   xdEvent("eventName:" + myVar)
}

function xdEvent(eventName) {
    const client = new XMLHttpRequest();
    client.open('GET', 'a5xdialog:' + eventName, false);
    client.setRequestHeader('My-Custom-Header', 'Some Value');
    client.send();
    console.log('xdEvent triggered');
}​
</script>

xDialog Side:

dlg_event = <<%code%

if atc("eventName:", a_dlg_button) = 1 then
   dim myData as C = word(a_dlg_button, 2, ":", 9999999)
   ...manipulate the data using xBasic...

end if
%code%

This will keep you from making the mistake of trying to access the CP document while you are still within the xdEvent callback which will continue as long as your xDialog function has not completed.