Retrieve CGI variables from Javascript

[Geoff]

Here's the situation. I have a static html page which we want to update
to include some dynamic content. I want a counter that keeps track of
the number of times anyone presses the "add" button, and display that
number. So, that page would look something like:

Number of calls today: 5
Add | Reset

The "5" would increment with every click of the "Add" link. The "Reset"
link would reset the counter to 0.

I have a Perl script that does all of the accounting stuff (opens a file
that contains the number, increments it, resets it, etc). What I don't
know how to do is to get the data from the CGI script to the web page.
I'm imagining that you can use Javascript, but I can't figure it out.
My CGI script can accept three options (add, view, reset). So it you
call it like so [myscript.cgi?action=add], it increments the counter by one.

So, in a nutshell, this is what I want:
1) the web page to display the # of calls upon load.
2) When a user presses the "Add" link, it invokes the CGI script to
handle the accounting stuff, then refresh the page with the new number
of calls.
3) When a user presses the "Reset" link, it resets the counter to 0.

 

[Michael Winter]

Geoff wrote on 03 Dec 2003:

Here's the situation. I have a static html page which we want
to update to include some dynamic content. I want a counter
that keeps track of the number of times anyone presses the "add"
button, and display that number. So, that page would look
something like:

Number of calls today: 5
Add | Reset

The "5" would increment with every click of the "Add" link. The
"Reset" link would reset the counter to 0.

I have a Perl script that does all of the accounting stuff
(opens a file that contains the number, increments it, resets
it, etc). What I don't know how to do is to get the data from
the CGI script to the web page. I'm imagining that you can use
Javascript, but I can't figure it out. My CGI script can accept
three options (add, view, reset). So it you call it like so
[myscript.cgi?action=add], it increments the counter by one.

So, in a nutshell, this is what I want:
1) the web page to display the # of calls upon load.
2) When a user presses the "Add" link, it invokes the CGI script
to handle the accounting stuff, then refresh the page with the
new number of calls.
3) When a user presses the "Reset" link, it resets the counter
to 0.

If you want to insert the value directly into the document, try:

<SCRIPT type="text/javascript">
document.write( <?php echo "\'" . $counter . "\'"; ?> );
</SCRIPT>

....which after evaluation (if counter was 10) should be:

document.write( '10' );

I don't know Perl, so the I've shown a (hopefully) comparible PHP
example. Basically, you need to include the counter value as a quoted
string inside the document.write call.

Alternatively, if you want to assign the value to a JavaScript
variable, you'd do something like (again, in PHP):

<SCRIPT type="text/javascript">
var counter = <?php echo $counter; ?>;
</SCRIPT>

....which after evaluation (if counter was 10) should be:

var counter = 10;

JavaScript can't access a CGI (or PHP) variable - they are used
server-side, and JS is client-side. However, you can give it the
value stored in the variable at the time of parsing by outputing the
variable's value directly into the document.

For the control buttons:

<SCRIPT type="text/javascript">
function invokeAction( type ) {
window.location = 'myscript.cgi?action=' + type;
}
</SCRIPT>

<BUTTON type="button" onclick="invokeAction('add')">Add</BUTTON>
<BUTTON type="button" onclick="invokeAction('reset')">Reset</BUTTON>

Clicking those buttons would change the page to:

myscript.cgi?action=add

and

myscript.cgi?action=reset

respectively.

<snipped HTML attachment>

This is a text-only newsgroup. Please only post in plain text: no
HTML and no attachments.

Hope that helps,
Mike

 

[Geoff]

If you want to insert the value directly into the document, try:

<SCRIPT type="text/javascript">
document.write( <?php echo "\'" . $counter . "\'"; ?> );
</SCRIPT>

<SCRIPT type="text/javascript">
var counter = <?php echo $counter; ?>;
</SCRIPT>

For the control buttons:

<SCRIPT type="text/javascript">
function invokeAction( type ) {
window.location = 'myscript.cgi?action=' + type;
}
</SCRIPT>

<BUTTON type="button" onclick="invokeAction('add')">Add</BUTTON>
<BUTTON type="button" onclick="invokeAction('reset')">Reset</BUTTON>

Clicking those buttons would change the page to:

myscript.cgi?action=add

and

myscript.cgi?action=reset

respectively.

Hope that helps,
Mike

Unfortunately, I don't know PHP, so I don't really understand your
expample. I tried using a Server Side Include, but that failed..
Here's a snippet of code:
"<!--#exec cgi="/cgi-bin/callTrack.cgi action=view"-->"

In my mind, this calls callTrack.cgi and passes the parameter
action=view. This doesn't work.

As far as the buttons go, I don't want the output of
callTrack.cgi?action=add to be printed to the screen, I just want it to
update the file that contains the current call count. So, that's why I
wanted to use javascript so I could do something like:
execute callTrack.cgi action=add
reload this page.

I hope I'm making myself clear.

thanks,
Geoff

 

[Michael Winter]

Geoff wrote on 03 Dec 2003:

Unfortunately, I don't know PHP, so I don't really understand
your expample. I tried using a Server Side Include, but that
failed.. Here's a snippet of code:
"<!--#exec cgi="/cgi-bin/callTrack.cgi action=view"-->"

The example didn't really require knowledge of PHP. The idea was to
show how to assign a server-side variable to a JS variable. I just
used PHP syntax, because that's the only syntax I know. You could
replace the PHP code with CGI equivalent for:

var jsVar = writeCGIVariable( $counter );

Where writeCGIVariable is a CGI function that takes a CGI variable
($counter) and outputs it to a text string with a trailing semicolon
so that when the browser gets it, it looks like:

var jsVar = <some number>;

That was all I was trying to show.


Note: The document.write example is pointless. If you can output
text, why output text for JS to then output again?

In my mind, this calls callTrack.cgi and passes the parameter
action=view. This doesn't work.

As far as the buttons go, I don't want the output of
callTrack.cgi?action=add to be printed to the screen, I just
want it to update the file that contains the current call count.
So, that's why I wanted to use javascript so I could do
something like:
execute callTrack.cgi action=add
reload this page.

I hope I'm making myself clear.

OK. In order to update the value on the server, it's obvious that you
need to make another HTTP request, during which time the count is
updated. There are two possible (related) ways:

1) Do what my buttons did: navigate to another page. The page can
have exactly the same contents as it did before, but during the
reload, the CGI script is invoked and the count is updated.
2) Hide something somewhere that gets reloaded (instead of the page)
and updates the counter.

The first option is quite a bad idea as the user has to re-request
the entire page, and gets nothing from it (no new content). The
second is a fudge, but is transparent to the user.

The hidden object can be anything, really. What would be ideal is if
your update script (callTrack) always returned a small transparent
GIF, rather than HTML. I don't know if you can do it, though. With
this approach, you would include an image, and update the source when
the buttons were clicked:

<IMG id="dummy" src="callTrack.cgi">

[Doesn't alter the script's values - just gets the transparent GIF]

<SCRIPT type="text/javascript">
function updateCount( action ) {
document.getElementById('dummy').src = 'callTrack.cgi?action='
+ action;
}
</SCRIPT>

<BUTTON type="button" onclick="updateCount('add')">Add</BUTTON>

As I said, you could theoretically update any object. For example, an
IFRAME (it would use the same script and BUTTON above):

<IFRAME id="dummy" src="callTrack.cgi" width="1" height="1"
style="display: none">

You wouldn't have to return binary data here. You could return
nothing at all.

To be honest, this is far from my area of expertise, so there may be
more elegant ways of doing it, but they would still boil down to
sending a HTTP request of some description.

My final note: if the user has JavaScript disabled, this won't work.
You could replace the buttons with regular links if that's a concern,
but then you'd be limited to only the first option I presented above
(a full page refresh).

Mike

 

[GIMME]

Server side includes such as this one are disabled by default
and not supported by all web servers.

This will work with apache if this service is enabled.