Solved

Accessing dropdown list from a popup

Posted on 2008-09-29
15
272 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

 

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
 

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

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

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

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-…
This article discusses how to implement server side field validation and display customized error messages to the client.
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…

707 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