Dynamically Create A Table

[AbidingDude]

Eons ago I wrote an app for the machine shop I worked in. Without getting into too much detail, it takes a metric measurement, and a category (H12, r6, c9, F10, etc), looks up the dimensions for that category, and gives the results in millimeters and inches.
I wrote it as an HTML form. The form gets passed to a CGI that I wrote in C. The CGI then produces an HTML file with a table with the results.
I'm learning a lot more JavaScript now, and I wanted to revisit the old project. I thought it might be a nice improvement to still have the form-like input fields, but have the table be dynamically produced below it instead of on a new page.
However, I still need a CGI because I need file I/O to get the results. This article was really helpful for me learning to use Javascript and CGI:

https://www.willmaster.com/library/tutorials/javascript-and-cgi-talking-to-each-other.php

I only had to make a few minor changes to the CGI which now outputs JavaScript.
For testing purposes, I put the query string as part of the attribute:

<SCRIPT id="res" src="cgi-bin/pmlfcgi.exe?dimension=35.1&tol=H10"></SCRIPT>

It works. It produces the table, but obviously that's not too useful, so I deleted the 'src' attribute, and added a button to click that calls maketable():

function maketable()
{
	var x, attr;
	x=document.getElementById("res");
	attr=document.createAttribute("src");
	attr.value="cgi-bin/pmlfcgi.exe?dimension=51.7&tol=H11";
	x.setAttributeNode(attr);
}

But no table is being drawn and the script tag does not seem to be updated.

 

[AbidingDude]

Correction. The tag attribute is getting updated, but the cgi does not appear to be called again.

 

[feherke]

Hi

Now it sounds like caching on browser side. This is pretty frequent AJAX problem and the solution would be to add HTTP headers to the CGI response which instruct the browser to not reuse the cached response on next requests. No idea how reliable that solution would be these days, but in older times it definitely was not efficient. So the usual practice was to use a simple workaround instead : add something to the URL that changes on each request :

[b]function[/b] [COLOR=orange]maketable[/color][teal]()[/teal]
[teal]{[/teal]
    [b]var[/b] x[teal],[/teal] attr[teal];[/teal]
    x[teal]=[/teal]document[teal].[/teal][COLOR=orange]getElementById[/color][teal]([/teal][i][green]"res"[/green][/i][teal]);[/teal]
    attr[teal]=[/teal]document[teal].[/teal][COLOR=orange]createAttribute[/color][teal]([/teal][i][green]"src"[/green][/i][teal]);[/teal]
    attr[teal].[/teal]value[teal]=[/teal][i][green]"cgi-bin/pmlfcgi.exe?dimension=51.7&tol=H11[highlight]&whatever=[/highlight]"[/green][/i] [highlight][teal]+[/teal] [b]new[/b] [COLOR=orange]Date[/color][teal]().[/teal][COLOR=orange]getTime[/color][teal]()[/teal][/highlight][teal];[/teal]
    x[teal].[/teal][COLOR=orange]setAttributeNode[/color][teal]([/teal]attr[teal]);[/teal]
[teal]}[/teal]

Some people prefer to use [tt]Math[teal].[/teal]random[teal]()[/teal][/tt] instead of [tt]new Date[teal]().[/teal]getTime[teal]()[/teal][/tt], but there should be no noticable difference.


Feherke.
feherke.github.io

 

[AbidingDude]

I appreciate the suggestions, but I didn't have any luck. First I tried adding the extra bit to the query string. No change. The I went back to the cgi, I added the line:

printf("Cache-Control: no-store\n");

and recompiled. Not sure if that was the right thing to do or not, but it didn't seem to do it.

When I test the page, I have the Developer Tools window up as well. When the maketable() function executes, I see that the <script> tag has been updated, but it doesn't seem to be getting reloaded.