Using AJAX to fill contents of DIV with a Grid or Form does not work

Hi all,

I have the unenviable task of taking a long departed (from my company) developer’s hand-cranked PHP and converting it into a ScriptCase environment.

At the moment I’m using a blank application to replicate some of his code. Here’s the scenario I have and what I’m running into.

I have two DIV elements, one that takes up the first 80% width of the screen, and the other that takes up the last 20% width. For simplicity I’ve called these “main” and “side”.

I have a static image that gets populated into the “main” div via a database lookup and a ‘background’ style entry. It has a z-index of 1, and eventually some polygons will be drawn on top of the image with some javaScript that has a z-index of something greater than 1, like 2 or 5. But that’s getting ahead of things.

On the right side, there needs to be a list (Grid Application: poly_list) of polygons that have been drawn on top of this image. Then when you select one of the polygons from the list, it should navigate to a form (Form: poly_edit).

To populate the “side” element of the page, I’m using a simple AJAX navigation query that retrieves the content of “…/poly_list” and inserts this content into the “side” div.

The problem is, while the poly_list grid is populating into the “side” div, none of the links in the grid can be clicked on. And when I use the Development Debugger in chrome, I can see that every time my mouse passes over any of these fields, about 4 new errors appear in the console, like this:

(index):1 Uncaught ReferenceError: over_tr is not defined at HTMLTableRowElement.onmouseover ((index):1) onmouseover @ (index):1
(index):1 Uncaught ReferenceError: out_tr is not defined at HTMLTableRowElement.onmouseout ((index):1) onmouseout @ (index):1
(index):1 Uncaught ReferenceError: over_tr is not defined at HTMLTableRowElement.onmouseover ((index):1) onmouseover @ (index):1
(index):1 Uncaught ReferenceError: out_tr is not defined at HTMLTableRowElement.onmouseout ((index):1) onmouseout @ (index):1

The grid application and form application work outside of this environment. They just don’t work inside this environment. And I need this Blank Application to work so people can draw polygons on top of the image and capture the X,Y coordinates of each point in the polygon.

So, the “not defined” part of this error leads me to believe that there are elements inside the “…/poly_list” folder/application that it cannot find anymore because AJAX just pulled the content of index.php out of that folder and did not pull any of the associated files that are generated with this grid. Is there a way to properly point them there?

For those wondering, sure, I could possibly do this with another mechanism… some ideas that come to mind (and have been tried) are a Dashboard type application and a Menu type application. Both of these rely on IFRAME elements and don’t seem to work well for what I need, specifically the data from the “Main” DIV element being available to the “Side” DIV element’s contents, or in the case of an iframe, it would be IFRAME “main” and IFRAME “side”. I need the two to work together, so as points are being selected on the image in the “main” div, they are being captured/appended to a field in the form application (poly_edit) in the “side” div.

Just wondering if I’ve missed a wonderful trick because I’m so busy staring at the trees that I’ve missed the forest.

Thanks, in advance!
-Paul

see there, maybe can you find similair solution
https://www.highcharts.com/forum/viewtopic.php?t=33199