joejac
Posts: 242
|
| Posted: 01/31/2009, 3:35 PM |
|
Hello,
I have the model_no listbox displaying the model_names available.
What I would like to do is when the user select one model on the listbox, the image control that is next to the listbox should change with the corresponding content from the field: model_image_url, which is the url where to find the model's image, and display the image. Each time the listbox changes so it should change the corresponding model's image without page reloading.
I am using CCS 4.1, PHP5, MySQL5 I would like to know if there is an easy way to do it with the new features of CCS 4.1. Documentation, tutorials, example code are very much appreciated.
Thanks a lot in advance.
Regards
joejac
By the way, where is the best place for this type of posts, in General or in PHP?
|
 |
|
mentecky
Posts: 321
|
| Posted: 01/31/2009, 5:56 PM |
|
joejac,
At CCSElite we have a table that holds images similar to what you describe. The relevant fields are gallery_image_id, name and filename.
First, I created a record and added a listbox called gallery_image_id. I set it's data source to the gallery_images table. Bound Column to gallery_image_id and Text column to name.
I then added an image and in the HTML made sure it looked like this:
<img id="dep_image" alt=" " src="images/CCSElite/whatmeworry.jpg" align="absMiddle" name="dep_image">
Then I added the following code in the HTML directly above the </HEAD> tag:
<script language="JavaScript" type="text/javascript">
var images = [];
{image_script}
function swapImage(index)
{
document.getElementById("dep_image").src = images[index];
}
</script>
Now the fun part. In the page Before Show event add custom code. This is written for my table, but yours should look pretty similar.
global $Tpl;
$script = "";
// Relative path to the images
$image_path = "gallery/thumbs/";
$db = new clsDBcommunity();
// SQL to get the images we want
$SQL = "SELECT * FROM gallery_images";
$db->query($SQL);
$result = $db->next_record();
while ($result)
{
// Add the image definition
$id = $db->f("gallery_image_id");
$url = $image_path.$db->f("filename");
$script .= "images[$id] = '$url';\n";
$result = $db->next_record();
}
// Set the TPL image script value
$Tpl->setvar("image_script", $script);
The above code builds javascript to build an array of image URL's that coincide with the image descriptions in the listbox.
Finally, click your list box and in the client On Change event add the following code:
// Make sure you change "image_test" to your form name
swapImage(document.forms["image_test"].gallery_image_id.value);
Good Luck,
Rick
_________________
http://www.ccselite.com |
|
|
|
mentecky
Posts: 321
|
| Posted: 01/31/2009, 5:57 PM |
|
I forgot to mention I put a sample of it at:
http://www.ccselite.com/test_image.php
Rick
_________________
http://www.ccselite.com |
|
|
|
joejac
Posts: 242
|
| Posted: 01/31/2009, 8:51 PM |
|
Richard, you are my savior! Very nice example.
Now is late here, I'm going to sleep, but tomorrow I will study and implement your solution.
Thanks a million
Best regards
joejac
|
|
|
|
mentecky
Posts: 321
|
| Posted: 01/31/2009, 9:50 PM |
|
joejac,
No problem. Let me know how it works out for you. If it is easy enough I'll turn this one into a tip.
Rick
_________________
http://www.ccselite.com |
|
|
|
damian
Posts: 838
|
| Posted: 02/01/2009, 12:10 AM |
|
another way - depending on how many images there are would be to pre-load each image in a seperate DIV layer and use js show/hide the appropriate image in an on-change event... maybe you dont even need to pre-load....
_________________
if you found this post useful take the time to help someone else.... :)
|
|
|
|
joejac
Posts: 242
|
| Posted: 02/01/2009, 9:40 AM |
|
Hello Richard,
I appreciate a lot your nice help. It works fine in Firefox but it do not work in Internet Explorer 7, the image do not change with the listbox, it shows always the default image. Any Idea?, I have this:
<!-- in the HEAD -->
<script language="JavaScript" type="text/javascript">
<!--//--><![CDATA[//><!--
var images = [];
images[1] = '../imagenes/test1.jpg';
images[2] = ' ';
images[3] = '../imagenes/test3.jpg';
images[4] = '../imagenes/test4.jpg';
function swapImage(index)
{
document.getElementById("dep_image").src = images[index];
}
/*]]>*/-->
//--><!]]>
</script>
<script language="JavaScript" type="text/javascript">
<!--//--><![CDATA[//><!--
//Begin CCS script
//Include Common JSFunctions @1-F6D184C6
//--><!]]>
</script>
<script language="JavaScript" src="ClientI18N.php?file=Functions.js&locale=es" type="text/javascript" charset="utf-8"></script>
<script language="JavaScript" type="text/javascript">
<!--//--><![CDATA[//><!--
//End Include Common JSFunctions
//sobremodelo_id_OnChange @51-517B0F90
function sobremodelo_id_OnChange()
{
var result = true;
//End sobremodelo_id_OnChange
//Custom Code @61-2A29BDB7
// -------------------------
swapImage(document.forms["sobre"].modelo_id.value);
// -------------------------
//End Custom Code
<!-- in the BODY -->
<div>
<label>Modelo:</label>
<select id="sobremodelo_id" name="modelo_id">
<option value="" selected="selected">Seleccionar Valor</option>
<option value="1">Modelo 1</option>
<option value="2">Modelo 2</option>
<option value="3">Modelo 3</option>
<option value="4">Modelo 4</option>
</select>
</div>
<div>
<label>Imagen Modelo</label>
<img id="dep_image" alt=" " src="../imagenes/test1.jpg" align="absMiddle" name="dep_image">
</div>
I have a couple considerations:
1.- If I have many images, they can be more than 500, I think this could create a speed problem for the script and the web page. Can be used the CCS4 AJAX functionality and adapt to this need?, sorry about my lack of Javascript knowledge.
2.- I need to have a second dependent image on same page: category table, category_id, category_name, for the listbox, and url_image_category for the image component.
With this 2 issues working in IE and Firefox, this topic will be resolved.
Thanks a lot for all your valuable help 
Best regards
joejac
|
|
|
|
mentecky
Posts: 321
|
| Posted: 02/01/2009, 9:48 AM |
|
joejac,
Try changing the OnChange code to:
swapImage(document.getElementById("sobremodelo_id").value);
Rick
_________________
http://www.ccselite.com |
|
|
|
joejac
Posts: 242
|
| Posted: 02/01/2009, 1:28 PM |
|
Hello Rick.
I noticed a difference between the HTML code in your example and the CCS4 output of my generated files. Your code do not have the CDATA:
<script language="JavaScript" type="text/javascript">
<!--//--><![CDATA[//><!--
code ...
/*]]>*/-->
//--><!]]>
</script>
I found in Google that: "CDATA Sections are used to escape blocks of text containing characters which would otherwise be recognized as markup." In another place do not recommend using it. I do not know for what reason CCS4 is sending that, but I deleted and your solution worked fine in both browsers: IE7 and Firefox.
Any Idea why is this behavior? I do not want to mess with CCS4 output, but your files do not have the CDATA, why? and what can I do?, and sorry for so many questions
Best regards
joejac
I use xHTML
|
|
|
|
mentecky
Posts: 321
|
| Posted: 02/01/2009, 1:43 PM |
|
joejac,
I'm not sure why 4.x would generate it that way. I'm sure Yes had a reason for it. This may be a support question.
I am glad you figured it out though. The answer to repeating the process for a second listbox is just duplicate the code and change the function and variable names... ie var imagesCat = [];... and swapImageCat() maybe.
Good Luck!
Rick
_________________
http://www.ccselite.com |
|
|
|
|
 |
|
|
|
