aspose file tools*
The moose likes PHP and the fly likes javascript for popup on selected item in dropdown Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Spring in Action this week in the Spring forum!
JavaRanch » Java Forums » Languages » PHP
Bookmark "javascript for popup on selected item in dropdown " Watch "javascript for popup on selected item in dropdown " New topic
Author

javascript for popup on selected item in dropdown

shilpa deshmukh-kadam
Ranch Hand

Joined: Jun 01, 2012
Posts: 38
I have searched on google but can't get any javascript for popup on selected item in dropdown please help me or suggest me reference site



Here I want new popup on item selected

Thank you in adv
Kumar Barun
Greenhorn

Joined: Oct 14, 2011
Posts: 20
It's not clear what sort of popup you want and what for. If you make it clear I'll be able to help you.
shilpa deshmukh-kadam
Ranch Hand

Joined: Jun 01, 2012
Posts: 38
for example below code shows popup on item selection but it is a alert box where I can not put image or buttons in popup window



this above is simple one example another one when I searched a lot I got javascript as below



Now code for style.css is as below


Fine this code is displaying popup on item selected but Problem is that It shows same popup on each selection although I changed id of popupbox ......
Please help me....

you can run this code it works as mentioned............. and I send whole code
Kumar Barun
Greenhorn

Joined: Oct 14, 2011
Posts: 20
Below is the modified version:



and




I think you don't understand the basics of JS and jQuery well. You want the data to be displayed in the div with id content on every new item selected and initially the data should have selected value but you were not doing that.

I'll write and post a simple tutorial on what to do for a simple plain JS version and the approach you should take when you make a popup. I'll post the link here.
shilpa deshmukh-kadam
Ranch Hand

Joined: Jun 01, 2012
Posts: 38
Your modified code is executing properly.... which Item I have selected It shows into popup ...... but problem is with the description ... If I try to describe each Item It is not possible through my code....
Below is my updated code...

index.html


Here is Style.css




You give me very proper way to my search but in above example It shows only boxpopup div .... Here I understand its due to passing the Id ti javascript function ... Now I don't understand how to pass anather Id i.e boxpopup2
Please guide me...
Thank you in advance... !!
Kumar Barun
Greenhorn

Joined: Oct 14, 2011
Posts: 20
Shilpa, there's a lot for you in store to learn as I can feel from your new code. I would love to help you to your success. But for that give me the complete requirement you need. Then I will write a short tutorial for your problem with detailed discussion and post it for you.

Some obvious misconceptions can be found in your code like the same id (content) two times in your page and others.

Ready to help you but be clear first with all of your requirements.
shilpa deshmukh-kadam
Ranch Hand

Joined: Jun 01, 2012
Posts: 38


such like this one

If financial year is selected the related report open in popup
Kumar Barun
Greenhorn

Joined: Oct 14, 2011
Posts: 20
It's simple you have to write a new function that should be called from within the openOffersDialog(x) function like this:



function openOffersDialog(x){

var store = func1();

}



Now store variable should be written in div with id content using:

either

$('#content').html(store);



or



document.getElementById('content').innerHTML=store;



Misconceptions

Below is the code she had tried:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JQuery Popup | JQuery Slide Popup | Demo</title>
<link rel="stylesheet" type="text/css" href="style1.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function openOffersDialog(x) {
$('#overlay').fadeIn('fast', function() {
$(boxpopup).css('display','block');
$(boxpopup).animate({'left':'30%'},500);

$('#content').html(x);
});
}


function closeOffersDialog(prospectElementID) {
$(function($) {
$(document).ready(function() {
$('#' + prospectElementID).css('position','absolute');
$('#' + prospectElementID).animate({'left':'-100%'}, 500, function() {
$('#' + prospectElementID).css('position','fixed');
$('#' + prospectElementID).css('left','100%');
$('#overlay').fadeOut('fast');
});
});
});
}
</script>
</head>

<body onLoad="openOffersDialog('Audi');">
<div id="wrapper">
<div id="overlay" class="overlay"></div>
<select onChange="openOffersDialog(this.value);">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>

<div id="boxpopup" class="box">
<a onClick="closeOffersDialog('boxpopup');" class="boxclose"></a>
<div id="content">
This is popupbox. This is popupbox.
</div><!--end of content -->
<table width="50%" border="0">
<tr>
<td><a href="http://www.audi.in/" target="_blank"><img src="images/pdf.png"></a></td>
<td><a href="http://www.javaranch.com/" target="_blank"><img src="images/pdf.png"></a></td>
</tr>
<tr>
<td>audi1</td>
<td>audi2</td>
</tr>
</table>

</div><!--end of popupbox -->

<div id="boxpopup2" class="box">
<a onClick="closeOffersDialog('boxpopup');" class="boxclose"></a>
<div id="content">
This is popupbox. This is popupbox.
</div><!--end of content -->
<table width="50%" border="0">
<tr>
<td><a href="http://www.coderanch.com/" target="_blank"><img src="images/pdf.png"></a></td>
<td><a href="http://www.volvobuses.com/" target="_blank"><img src="images/pdf.png"></a></td>
</tr>
<tr>
<td>Volvo1</td>
<td>Volvo2</td>
</tr>
</table>


</div><!--end of popupbox -->

</div><!--end of wrapper -->
</body>
</html>



I have highlighted the miconceptions part:

1. id attribute must be unique on the page, it means it must not be repeated. It is also obvious from its name. You have class attribute for that.

2. The description in the table you have is not being manipulated on the basis of selection. So it will become a part of the box for keeps.


Due to work overload I couldn't write much for you, but you can visit this link:

displaying data in pop up
 
jQuery in Action, 2nd edition
 
subject: javascript for popup on selected item in dropdown