I am relatively new to JQuery and my experience with JavaScript hasn't been much more than UI glue to HTML forms than in-depth programming (i.e. limited DOM-client-side events for client side validation and making the UI more responsive and useful.)
I am tasked to extend an existing application to add a quality improvement module. This application uses JQueryUI extensively. I need to display a dialog box that contains a table with four controls, and I need to have JavaScript react to the events of the control in JavaScript.
For example, I need to have the contents of one SELECT box change depending upon the selected value of the value of another SELECT box.
I worked out the JQuery and JavaScript in an html document, and it worked fine, but when I put the controls in a JQueryUI dialog box (by passing the DIV containing the controls), the linkage between the events and controls are broken in a strange way.
The events fire properly, but when the function references the controls, the values returned are the values of the original HTML page, not the controls in the dialog box.
It seems that JQueryUI creates a new HTML page and hovers that over the original HTML page.
I have been searching for two days for a solution to this problem, but have not found an answer.
Here is the HTML:
Here is the JavaScript and JQuery Code: