Solved

Accessing dropdown list from a popup

Posted on 2008-09-29
15
264 Views
Last Modified: 2012-06-27
I have a dropdown select list on my page with a list of images. A user can either select one of these or choose to add a new one. If they add a new one, then a popup is loaded.

I have sorted everything in regards to adding the image, I just want the value to be passed back into the dropdown at the last step.

Currently the value is passed back and changes the background of a div to display the new image, I just can't seem to pass the value into the dropdown.

I'm using the following, it's the top one that doesn't work:

<script language="javascript" type="text/javascript">
<!--
window.opener.document.getElementById('piclist').value='top_<%=request.form("imagePath")%>';
window.opener.document.getElementById('top_pic').style.background='url(top/top_<%=request.form("imagePath")%>)';
//-->
</script>

Thanks

Chris
0
Comment
Question by:djfenom
  • 7
  • 7
15 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 22596902
are you saying you are trying to add it to the dropdown list? Is so try:
var l = window.opener.document.getElementById('piclist');
l.options[l.options.length] = new Option('top_<%=request.form("imagePath")%>','top_<%=request.form("imagePath")%>');
window.opener.document.getElementById('top_pic').style.background='url(top/top_<%=request.form("imagePath")%>)';

Open in new window

0
 
LVL 5

Expert Comment

by:jose_juan
ID: 22596932
Hi,

probably your code are running before the content are available. Try to execute your code after onload event.

On the other hand, if you select the image reloading the page, why not set the image background on style attribute? like this

...<div style="background-image: url(<%=image%>)">...

Good luck!
0
 

Author Comment

by:djfenom
ID: 22596999
Thank hielo, basically on the parent page I have a form that needs to be submitted and the dropdown list displays all of the images in a particular folder using FileSystemObject. When a new image is added I need this image to be selected in the dropdown so when the form is submitted this is passed on to the next page.

I tried your suggestion, but it only changed the image.
0
 

Author Comment

by:djfenom
ID: 22597126
I don't really want to have to reload the parent page as the user will have filled out a section of the form already.
0
 
LVL 82

Expert Comment

by:hielo
ID: 22597448
this:
var l = window.opener.document.getElementById('piclist');
l.options[l.options.length] = new Option('top_<%=request.form("imagePath")%>','top_<%=request.form("imagePath")%>');

assumes that you have a select list with id="piclist". Not sure if your piclist is a select or a textbox, but use whatever id your select list has.
0
 

Author Comment

by:djfenom
ID: 22597500
That gives the same result and it also stops the background image changing.

This is my select on the parent page:

<select name="piclist" id="piclist" style="width:270px;" onchange="document.getElementById('top_pic').style.background = 'url(top/'+this.value+')'">
        <option value="top-image01.jpg">Please Select</option>
        <%
Set fso = Server.CreateObject("Scripting.FileSystemObject")
Set rootFolder = fso.GetFolder(Server.MapPath("/top"))

Set files = rootFolder.Files

For Each file in files
      if file.Name = "blank.gif" OR file.Name = "transparent.gif" then
      else
    Response.Write "<option value=""" & file.Name & """>" & file.Name & "</option>" & vbCrLf
      end if
Next
%>
      </select>
0
 
LVL 82

Expert Comment

by:hielo
ID: 22598118
>>I tried your suggestion, but it only changed the image.
did it add the image to the list? I am trying to guess if it just NOT "select" the added image.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:djfenom
ID: 22603324
No, the image isn't added to the list or selected?
0
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
ID: 22614381
try adding this to your parent page:
function addToList(elem,value,text){

	var l = document.getElementById(elem);

	if( !l )

	{

		alert("Invalid element ID provided");

		return false;

	}

	l.options[l.options.length]=new Option(text,value);

return true;

}
 
 

then in the popup use:

<script type="text/javascript">

window.opener.addToList('piclist','top_<%=request.form("imagePath")%>','top_<%=request.form("imagePath")%>');

window.opener.document.getElementById('top_pic').style.background='url(top/top_<%=request.form("imagePath")%>)';

</script>

Open in new window

0
 

Author Comment

by:djfenom
ID: 22615158
Right, that gets added to the list, but how do I get it selected?

Thanks
0
 
LVL 82

Expert Comment

by:hielo
ID: 22615202
try:
l.options[l.options.length]=new Option(text,value,true);
0
 

Author Comment

by:djfenom
ID: 22615389
No, that still gives the same result.
0
 
LVL 82

Expert Comment

by:hielo
ID: 22615627
l.options[l.options.length]=new Option(text,value,false,true);
0
 

Author Comment

by:djfenom
ID: 22615749
Awesome!

Thanks very much!
0
 
LVL 82

Expert Comment

by:hielo
ID: 22616194
you are welcome
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

910 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

22 Experts available now in Live!

Get 1:1 Help Now