Solved

Accessing dropdown list from a popup

Posted on 2008-09-29
15
265 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
Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

 

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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Sorting a string 1 29
how can i extend ? 2 43
Problem to refer to value 8 49
Java Script Error encountered while loading a page, IBM Lotus Notes 6 22
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

773 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