Solved

Accessing dropdown list from a popup

Posted on 2008-09-29
15
263 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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
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…

760 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

19 Experts available now in Live!

Get 1:1 Help Now