Forums

I have a need to create a Javascript function in Chronoforms that depends on data returned by a query call to a data table. Here is the scenario.

I have a drop down menu that contains titles of images. When the user selects an option, it triggers an onChange event and calls my java script function. The function needs to know the real image file name in order to change the image displayed along side the select menu. Both the image name and the file name are retrieved at the top of the form using an sql query to the appropriate database. So, I need to get the image name associated with the selection to the java script function so it can make the change. The select/option DOM entries only know about the image name because that is the "value" of the selected option. I thought if I could construct an "onload" event function in javascript to initialize a global array that stores the image file names, then I could just reference that global array in the onChange event function. To do this I would have to associate the onLoad function with the body tag of the form, and I don't know how to get to that.

Anybody run into this problem before. Thanks in advance for any help or thoughts.

-Mark

Hi Mark,

You can 'write' JavaScript in your form html

<script type="text/javascript">
<?php
// some database query
$i = 0;
foreach ( $result as $row) {
    echo "var image[$i] = '".$row->imageurl.";';
    $i++;
}
?>
</script>

Pseudo-code not tested and certainly needs de-bugging.

Or, if you knew more than I do, you could write an AJAX script to do the update on the fly.

Bob

Thanks so much! That is just what I needed to know. Some refinements got me up and working.

<script type="text/javascript">
var image = [];
function initarrays() {
<?php
// some database query
$i = 0;
foreach ( $result as $row) {
    echo "image[$i] = " . "'$row->imageurl'" . ";\n";
    $i++;
}
?>
}
window.onload=initarrays()
</script>

Wrapping the array initialization in a function allows the code to be executed when the browser is loaded, which is done by the window.onload event trigger. I found out about the window.onload after my initial post. It takes care of the other problem of attaching an onload event to the HTML body tag. The image array should be declared outside the function so that it is global and accessible by the onChange javascript function that actually changes the image display.

Many thanks for the lead. Outstanding support for an outstanding component.

-Mark

Hi Mark,

Prompted by your improvements here are a couple more - really about elegance though rather than functionality.
[list]

MooTools provides a dom ready event that ought to simplify this a little (will not work if Mootool.js isn't loaded but it usually is in Joomla 1.5;

Joomla has a method that will load the script into the header part of the page.

[/list]

<?php
$script  = "var image = new Array;";
$script .= "window.addEvent('domready', function() {";
// some database query
$i = 0;
foreach ( $result as $row) {
    $script .= "image[$i] = " . "'$row->imageurl'" . ";\n";
    $i++;
}
$script .= "});";
$doc =& JFactory::getDocument(); 
$doc->addScriptDeclaration($script);
?>

Note: again this is not tested and will need de-bugging.

Bob