Solved

Update Image Placeholder with Selection from List/Menu Box

Posted on 2004-10-13
22
243 Views
Last Modified: 2006-11-17
Hi!  I have a list/menu box that has a list of schools.  Next to the list/menu box, I have an image placeholder in which I would like to update to display a photograph of the school selected in the list/menu box when it is selected.  I will have a field that contains the relative path of the image - I just need to know how to update the image based on the current selection in the list/menu.  Any help would be greatly appreciated.

Thanks,
Christy
0
Comment
Question by:ccbailey
  • 13
  • 9
22 Comments
 
LVL 19

Expert Comment

by:peh803
ID: 12298628
as long as you've got the relative path to the image in a field (call it "img_path" for this example), you can do something like this:

<script type="text/javascript">
  function changeImg(){
    var sNewImgPath = document.getElementById('img_path').value;
    document.getElementById('my_img').src=sNewImgPath;
  }
</script>

<select name="images" onChange="changeImg();">
  <option value=1>Pic 1</option>
  <!--... other options here-->
</select>
<input type=hidden name="img_path" id="img_path" value="">
<img id="my_img" src="img1.gif" border=0>

Regards,
peh803
0
 
LVL 19

Expert Comment

by:peh803
ID: 12298646
I obviously haven't addressed how to get the relative path of the image, because you stated that you've already got that info.  If you need help with that, please let me know.  But the main point of the previous post is that you should use javascript to alter the "src" property of the img on your page when the select box's onchange event fires.  

HTH,
peh803
0
 

Author Comment

by:ccbailey
ID: 12337935
peh803,

I apologize for the long delay in getting back to you.  I had some database issues I had to stop and deal with last week, and I am just now getting back to this.

I have the code on my page like you have suggested, and I have the relative path for the picture saved in a field in the database called "PhotoOverallLink".  My question is - how do I get my field value into the 'img_path' value you have in the changeImg routine?

Thanks so much for your help.

Christy
0
 

Author Comment

by:ccbailey
ID: 12351888
OK, I have everything as you suggested, including the following script:

<script type="text/javascript">
  function changeImg(){
    var sNewImgPath = document.getElementById('SchoolPlanLink').value;
    document.getElementById('my_img').src=sNewImgPath;
  }
</script>

The name of the field containing the relative path is SchoolPlanLink.  However nothing is happening when the selection is changed.  Do I need to reference the recordset that contains this field?  How does it know where to go look for the field?

Thanks,
Christy
0
 
LVL 19

Expert Comment

by:peh803
ID: 12351962
Hi CCBailey!

Sorry I haven't been getting back with you on this.  

You've got a hidden field called "SchoolPlanLink" that contains the relative path to the new image, right?  If that's the case, please add this id definition to the hidden field:

<input type="hidden" ID="SchoolPlanLink" name="SchoolPlanLink" value="whatever_your_value_is">

in order for the javascript code to actually use the value, you've got to make sure the ID value is set.  If it is currently set and it's still not working, please post the code you have to write the select box, to populate the hidden input, and the javascript function you're using.

Thanks,
peh803
0
 
LVL 19

Expert Comment

by:peh803
ID: 12351976
For debugging purposes, you might also try doing this:

<script type="text/javascript">
  function changeImg(){
    var sNewImgPath = document.getElementById('SchoolPlanLink').value;

    \\Add this line!!
    alert('sNewImgPath: '+sNewImgPath);

    document.getElementById('my_img').src=sNewImgPath;
  }
</script>

Now, whenever you change the selected value in your combo box, you will see a javascript alert message telling you what image it's trying to use.
0
 

Author Comment

by:ccbailey
ID: 12352061
Oh - I see what you are doing.  Actually, what I have is a little more complex.  I have the relative path to the new image in a field in the database - not a hidden field (when you said 'field', I thought you meant in the database).  I can make a hidden field for this, but I will need the value of the field to change based on the selection in the listbox, since the relative path is different for each value in the listbox.  Is this possible, or do I need to do it a different way?

Thanks for your help,
Christy
0
 
LVL 19

Accepted Solution

by:
peh803 earned 300 total points
ID: 12352180
This is indeed possible.  Let's try an alternative (and probably easier) solution.  

What you're going to do is load all the image path values into a javascript array from your db when the page renders.  Make sure you do this in the same order that you use to generate your combo box.  

The code to build the array would be something like this:

<%

Dim rsJSArray
Dim i
i=0
set rsJSArray = server.createobject("adodb.recordset")
rsJSArray.open "SELECT imagepath FROM image_table", connection, 1, 3, 1
response.write "<script type=""text/javascript"">"
if not rs.eof then
  response.write "var img_paths=new Array("&rsJSArray.recordcount-1&");" & vbCrLf
end if
do while not rsJSArray.eof
 response.write "img_paths[" & i & "] = '"&rsJSArray("imagepath")&"';" & vbCrLf
rsJSArray.moveNext
i=i+1
loop
response.write "</script>"

rsJSArray.close
set rsJSArray = nothing

%>

Once you build the javascript array based on your database values, your onchange event will do this:
--> grab the current selectedIndex of the select box (if you don't know, selectedIndex for a select box starts with 0 and increments by 1 for each value written in your select box)
--> based on this selected index (i.e., selected index = 3), we know which value the user has selected (if the selectedIndex = 3, the user has selected the fourth item in the select box)
--> now, go grab the 4th element in the javascript array (my_array[3]) and use that for your new image path.

Does this make sense?

For more on Javascript arrays, here's a great resource:
http://www.w3schools.com/js/js_obj_array.asp

If you need more help implementing this, please let me know.

Good luck!
peh803
0
 

Author Comment

by:ccbailey
ID: 12358469
OK, I thought I had this right, but when I make a selection from the pulldown, nothing happens.  Any ideas?  Here is my code:

<%

Dim rsJSArray
Dim i
i=0
Set rsJSArray = Server.CreateObject("ADODB.Recordset")
rsJSArray.ActiveConnection = MM_connKatyRoofSurvey_STRING
rsJSArray.open = "SELECT [Table-Facility].SchoolPlanLink FROM [Table-Facility]  GROUP BY [Table-Facility].SchoolPlanLink, [Table-Facility].FacilityName, [Table-Facility].DistrictID  HAVING ((([Table-Facility].DistrictID)=555)) ORDER BY [Table-Facility].FacilityName;"
response.write "<script type=""text/javascript"">"
if not rsJSArray.eof then
  response.write "var img_paths=new Array("&rsJSArray.recordcount-1&");" & vbCrLf
end if
do while not rsJSArray.eof
 response.write "img_paths[" & i & "] = '"&rsJSArray("SchoolPlanLink")&"';" & vbCrLf
rsJSArray.moveNext
i=i+1
loop
response.write "</script>"

rsJSArray.close
set rsJSArray = nothing

%>

<script type="text/javascript">
  function changeImg(){
    var SelectedSchool = document.getElementById('lstschool').SelectedIndex
      var sNewImgPath = rsJSArray[SelectedSchool].value;
       alert('sNewImgPath: '+sNewImgPath);

      document.getElementById('my_img').src=sNewImgPath;
  }
</script>

<select name="lstSchool" id="select" onChange="changeImg();">
                <%
While (NOT rsSchools.EOF)
%>
                <option value="<%=(rsSchools.Fields.Item("FacilityID").Value)%>"><%=(rsSchools.Fields.Item("FacilityName").Value)%></option>
                <%
  rsSchools.MoveNext()
Wend
If (rsSchools.CursorType > 0) Then
  rsSchools.MoveFirst
Else
  rsSchools.Requery
End If
%>
              </select>

<img id="my_img" src="img1.gif" border=0>

Can you tell what I am missing?  I even put the "alert('sNewImgPath: '+sNewImgPath);" line in there for debugging, and still nothing happens.

Thanks for your help.
Christy
0
 
LVL 19

Expert Comment

by:peh803
ID: 12358558
Do you see any script error messages on your page? i.e., a little yellow exclamation mark in the bottom left of the page?  

Here are some things you can try:
Change this line:
-------old-----------
var SelectedSchool = document.getElementById('lstschool').SelectedIndex
-------old-----------
-------new----------- (add case sensitive ID, lowercase s in selectedIndex, and the semi-colon at the end of the line... javascript can be really picky!)
var SelectedSchool = document.getElementById('lstSchool').selectedIndex;
-------new-----------

Now, put alerts in like this:

<script type="text/javascript">
  function changeImg(){
      alert('I am in the changeImg() function...');
      var SelectedSchool = document.getElementById('lstSchool').selectedIndex;
      alert('SelectedSchool: '+SelectedSchool);
      var sNewImgPath = rsJSArray[SelectedSchool].value;
      alert('sNewImgPath: '+sNewImgPath);
      document.getElementById('my_img').src=sNewImgPath;
  }
</script>

Let me know what you get!

also, once the page renders, go to the "View" menu on internet explorer, and then click on "Source"; this will show you the source that was rendered by the ASP compiler to your ASP page.  You should take a look at the javascript array generated by your code and see how that looks.  If anything looks fishy there, that could be a problem.  If you can, paste the javascript array declaration / population that your code generates.

Thanks,
peh803
0
 

Author Comment

by:ccbailey
ID: 12358712
Great - thanks for the help - I am a lot closer.  

Yes - I did have a yellow exclamation mark.  I made your suggested changes, and I still got a script error message on my page (the yellow exclamation mark. . .).  Now the error is " 'rsJSArray is undefined", and it is happening on the line:  var sNewImgPath = rsJSArray[SelectedSchool].value;.  What is going on there?  I get the first two alerts, but not the third (the 'sNewImgPath: '+sNewImgPath).

I looked at my array, and it looks good.  I only have one value entered in the database now (just something to test with), and I think it showed up in the right place.  Here it is:

<script type="text/javascript">var img_paths=new Array(-2);

img_paths[0] = '';

img_paths[1] = '';

img_paths[2] = '';

img_paths[3] = '';

img_paths[4] = '';

img_paths[5] = '';

img_paths[6] = '';

img_paths[7] = '';

img_paths[8] = '';

img_paths[9] = '';

img_paths[10] = '';

img_paths[11] = '';

img_paths[12] = '';

img_paths[13] = '';

img_paths[14] = '';

img_paths[15] = '';

img_paths[16] = '';

img_paths[17] = '';

img_paths[18] = '';

img_paths[19] = '';

img_paths[20] = '';

img_paths[21] = '';

img_paths[22] = '';

img_paths[23] = '';

img_paths[24] = '';

img_paths[25] = '';

img_paths[26] = '';

img_paths[27] = '';

img_paths[28] = '';

img_paths[29] = '';

img_paths[30] = '';

img_paths[31] = '';

img_paths[32] = '';

img_paths[33] = '';

img_paths[34] = '';

img_paths[35] = '';

img_paths[36] = '';

img_paths[37] = '';

img_paths[38] = '';

img_paths[39] = '';

img_paths[40] = '';

img_paths[41] = '';

img_paths[42] = '';

img_paths[43] = '';

img_paths[44] = '';

img_paths[45] = '../Images/1-Elementary/Alexander_ES/JPG/Overall_Section/Alex.jpg';

img_paths[46] = '';

img_paths[47] = '';

img_paths[48] = '';

img_paths[49] = '';

img_paths[50] = '';

img_paths[51] = '';

img_paths[52] = '';

img_paths[53] = '';

</script>

Thanks so much for all your help - I'm getting really close.
Christy
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 19

Expert Comment

by:peh803
ID: 12358850
oops, this line:
--old---
var sNewImgPath = rsJSArray[SelectedSchool].value;
--old---
should be this:
--new---
var sNewImgPath = img_paths[SelectedSchool].value;
--new---

Right?  :)

The problem was that we got confused and were using our ASP array in a javascript call!  oops!
0
 
LVL 19

Expert Comment

by:peh803
ID: 12358872
Also, I just noticed that this is a problem:

if not rsJSArray.eof then
  response.write "var img_paths=new Array("&rsJSArray.recordcount-1&");" & vbCrLf
end if

The problem is that your recordset's recordcount is returning -1, a common problem with recordsets.  You'll have to get the count of your items a different way (which would be a pain) ... OR, you could just declare the array with more than enough items available in it. i.e., something like this:

if not rsJSArray.eof then
  response.write "var img_paths=new Array(200);" & vbCrLf
end if

This is what I would recommend, just to get it working.  If you want to come back later and add specific array dimensioning, you can do that...

Regards,
peh803
0
 

Author Comment

by:ccbailey
ID: 12359919
OK, I did what you suggested (I was confused about calling the array - thanks for clearing that up).  Now, I get my 3 alerts, and it shows the SelectedSchool as 45 (as it should), but the value of sNewImgPath is 'undefined'.  Why would that be - looking at my array, the value at 45 is correct?!?

Thanks,
Christy
0
 
LVL 19

Expert Comment

by:peh803
ID: 12360315
Let me see the js function in its current state?

thanks!~
peh803
0
 

Author Comment

by:ccbailey
ID: 12360378
<script type="text/javascript">
  function changeImg(){
    alert('I am in the changeImg() function...');
      var SelectedSchool = document.getElementById('lstSchool').selectedIndex;
      alert('SelectedSchool: '+SelectedSchool);
      var sNewImgPath = img_paths[SelectedSchool].value;
       alert('sNewImgPath: '+sNewImgPath);
      document.getElementById('my_img').src=sNewImgPath;
  }
</script>
0
 
LVL 19

Expert Comment

by:peh803
ID: 12360461
ah yes, sorry, I should have caught this earlier.  there is no "value" property for javascript arrays.  So, do this:

-------old-------
var sNewImgPath = img_paths[SelectedSchool].value;
-------old-------
-------New-------
var sNewImgPath = img_paths[SelectedSchool];
-------New-------

Let me know how this helps!
Thanks,
peh803
0
 

Author Comment

by:ccbailey
ID: 12360553
Beautiful!  Thanks so much for your help!!

Christy
0
 
LVL 19

Expert Comment

by:peh803
ID: 12360559
so does it work then? :-)
0
 
LVL 19

Expert Comment

by:peh803
ID: 12360579
I'll take the acceptance as a yes :)

Glad to help you through this process.  Hopefully you also learned some pretty cool javascript tricks along the way!

Debugging javascript can be a real pain in the ***, so I typically use alerts as we did for this example.  I hope this knowledge serves you well in the future.

Regards,
peh803
0
 

Author Comment

by:ccbailey
ID: 12360613
It does work - perfectly.  I almost posted because when I tried it the first time, I got the correct path in the alert, but the picture still didn't change.  But then I realized that I hadn't actually uploaded the picture.  Once I did that, it worked like a charm!  Thanks again for all your help.

Christy
0
 
LVL 19

Expert Comment

by:peh803
ID: 12360626
Again, glad I could help out!

Good luck with the project.

peh803
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

I recently decide that I needed a way to make my pages scream on the net.   While searching around how I can accomplish this I stumbled across a great article that stated "minimize the server requests." I got to thinking, hey, I use more than one…
I have helped a lot of people on EE with their coding sources and have enjoyed near about every minute of it. Sometimes it can get a little tedious but it is always a challenge and the one thing that I always say is:  The Exchange of information …
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …
This tutorial demonstrates a quick way of adding group price to multiple Magento products.

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now