Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Do something based on selection from a list

Status
Not open for further replies.
Ratbags21

Ratbags21

Programmer
Sep 21, 2005
22
GB
Hi there,
On my web page, I have a list of "countries" on the left using cfquery output, and on the right I want to show the image of that country maybe in a table object. but how do I know which country the user chose from the list on the left so that I can do an sql query "display x where countryID=y"?

thanks a lot
 
Sort by date Sort by votes
You could do it a couple ways. you could use a javascript to get the value and display the image or you could submit the form back to the server and refresh the page. which would you like to do?

Vegans are friends, not food...
 
Upvote 0 Downvote
Thanks for your response, TIS. In reality what I am trying to do is populate a list/menu control using an XML dataset. Whoa - scary stuff. But then I can get the user to select a value from the said listbox and display more information on that record in a form (to allow amendments to it) ALL ON THE SAME WEBPAGE.

Any ideas?
 
Upvote 0 Downvote
If you want to do all that without submitting the page back to the server you'll want to use ajax.

you can also submit back to the same page so it's the same page but made a request to the server for the additional information.

which is your goal?



Vegans are friends, not food...
 
Upvote 0 Downvote
Guys - I very much appreciate your help, but can you be more specific? "Use Ajax/jQuery!" is not really helpful. At least point me in the right direction, give me a clue.
Many thanks
 
Upvote 0 Downvote
well, I've already given you some clues if you researched any of what I was asking. You'd learn what ajax is and probably stumble on w3schools that has a very comprehensive tutorial.

however, you haven't answered my question.

If you want to submit back to the same page you'd look for the form structure when you submit to get the data.

if you want to use ajax - is a great place to start.

You haven't provided us with any code or really explained WHAT your stumbling block is. How far have you gotten and what is your next step?



Vegans are friends, not food...
 
Upvote 0 Downvote
Alright, here is the full page. Everything works except that the display objects on the right do not sync with the drop down select on the left. For some reason the "setrow" statement is not working
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns=" xmlns:spry="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Newland Tours: Country Profiles</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryCSVDataSet.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var ds1 = new Spry.Data.XMLDataSet("MySpryDataSet.cfm", "rs_countries/piece", {sortOnLoad: "countryName", sortOrderOnLoad: "ascending"});
ds1.setColumnType("population", "number");
//-->
</script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>

<body class="oneColFixCtrHdr">
<a href="#top"><img src="images/spacer.gif" alt="Skip to main page content." border="0" /></a>
<div id="container">
<div id="header">
<img src="images/banner_left.gif" width="451" height="68" alt="Newland Tour's Banner, Left." /><img src="images/banner_right.jpg" width="276" height="68" id="bannerRight" alt="Newland Tours Banner, Right" />
<!-- end #header --></div>
<div id="navigation">
<ul>
<li><a href="index.cfm">Home</a></li>
<li><a href="about.cfm">About</a></li>
<li><a href="tours.cfm">Find Tours</a></li>
<li><a href="profiles.cfm">Country Profiles</a></li>
<li><a href="contact.cfm">Contact an Agent</a></li>
</ul>
</div>
<div id="mainContent">
<h1><a name="top" id="top"></a>Country Profiles</h1>
<p>Read the profiles below to learn about the countries you can visit on a Newland Tours vacation. Click column hedings to sort:</p>
<div id="StuffContainer">
<div id="LeftPanel">
<div spry:region="ds1">
<select spry:setrow="ds1" spry:repeatchildren ="ds1" name="countryName" >
<option value="{countryName}">{countryName}</option>
</select>
</div>
<p spry:detailregion="ds1">Record {ds_RowNumberPlus1} of {ds_RowCount}</p>
</div>
<div id="RightPanel">
<br/>
<br/>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab" spry:detailregion="ds1"><strong>Country Details:</strong> {countryName}</div>
<div class="AccordionPanelContent" spry:detailregion="ds1"><br/>
<p><strong>World Region:</strong> {regionName}</p>
<p><strong>Description:</strong> {description}</p>
<p><strong>Population:</strong> {population}</p>
<p><strong>Local Currency: {country_currency}</strong> </p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" spry:detailregion="ds1"><strong>Country Image:</strong>{countryName}</div>
<div class="AccordionPanelContent" spry:detailregion="ds1"><img src="images/{imageURL}" alt="{imageALT}" align="right" /></div>
</div>
</div>
</div>
</div>
</p>
<p><br clear="all" />
</div><!-- end #mainContent -->
<div id="footer">
<p>&copy; 2007 Newland Tours</p>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>
</body>
</html>


many thanks
 
Upvote 0 Downvote
i have no clue about spry, but this is how i would do:

Code: 
<cfsetting showdebugoutput="no">
<cfquery name="getArtists" datasource="cfartgallery">
SELECT *
FROM Artists
order by state
</cfquery>
    

<script type="text/javascript" src="javascript/jquery-1.4.js" ></script>
<script>
$().ready(function() {
 $("#artists").change(function(){
	$("#dspArt").html('Loading! Please wait...');						   
	formData = "artistID="+$("#artists").val();
	$.ajax({
		   type: "get",  
		   url: "dspArt.cfm",
		   data: formData,        
		   cache: false,       
		   success: function(result) {
			  $("#dspArt").html(result);
		   },
		   error: function(xmlHttpRequest, status, err) {
					confirm('Error!' + err );
				}
	});			
 });
});
</script>

<div style="border:1px solid green; width:450px; height:70px;">
	<div style="float:left;padding-left:20px; padding-top:20px;">
    	<label for="artists">Artist Name</label><br />  
    	<select name="artists" id="artists">
        	<cfoutput query="getArtists">
        	<option value="#artistID#">#firstName# #lastName#</option>
            </cfoutput>
        </select>
    </div>
    <div id="dspArt" style="float:left;padding-left:30px; padding-top:20px;">&nbsp;</div>
    <div style="clear:both;"/>
</div>

dspArt.cfm
Code: 
<cfsetting showdebugoutput="no">
<cfparam name="artistID" default="">
<cfquery name="getArt" datasource="cfartgallery">
SELECT *
FROM Art
where artistid = <cfqueryparam cfsqltype="cf_sql_integer" value="#artistID#">
and isSold = 0
order by price
</cfquery>
<cfif getArt.recordCount>
<label for="art">Art</label><br />  
<select name="art" id="art">
   <cfoutput query="getArt">
   <option value="#artID#">#artName# - #dollarFormat(price)#</option>
   </cfoutput>
</select>
<cfelse>
	no records found.
</cfif>

for this to run, you will need to get "jquery-1.4.js" and put it in the "javascript" folder.

 
Upvote 0 Downvote
Thanks dude - I'll give it a try - I have no clue about jquery but hey - life's a journey :)
 
Upvote 0 Downvote
I'm not sure about spry either; however in looking at adobe's example I don't see any kind of a event handler in your code (onChange, onClick, et cetera)

here is the example adobe has for spry:setRow, you'll notice the onclick event handler.


HTH

Vegans are friends, not food...
 
Upvote 0 Downvote
You don't need to use jQuery to use ajax if you don't want to get into another framework. Straight JS works, but it's a bit longer winded to write yourself.

Code: 
<script language = "javascript">
function setAjax(){
       //Create AjaxObject
	var xmlHttp;
	try{
		// Firefox, webkit
		xmlHttp=new XMLHttpRequest();
	}
	catch (e){
		// Internet Explorer
		try{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e){
			try{
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){
				alert("Your browser does not support AJAX or Active-x is disabled!");
				return false;
			}
		}
	}
	return xmlHttp;
}

function getNames(aName){
  	ajaxObj = setAjax(); //make the new ajaxObject
	ajaxObj.onreadystatechange=function(){
		if(ajaxObj.readyState==4){
			document.getElementById('outputDiv').innerHTML=ajaxObj.responseText; //outputs your ajax content
		}
	}
        //tick is a timestamp to make this work nice in IE so it doesn't draw a cached result
	ajaxObj.open("get","ajaxGetNames.cfm?aName="+aName+"&tick=" + new Date().getTime(),true);
	ajaxObj.send(null);
  }
</script>
<html>
...
...
<select name = "someList" id = "someList" onChange="getNames(this.value);">
<option value = ""></option>
<option value = "one">One</option>
<option value = "two">Two</option>
</select>
<div id = "outputDiv"></div>
...
...
</html>

Vegans are friends, not food...
 
Upvote 0 Downvote
Actually, after moving setAjax() to a .js it's about the same, at least for this example.

It's preference really. I've never been a fan of frameworks (although I do see jQuery's strengths and it's the popular choice for a reason, I dig that). Most of my clients run in a javascript free environment anyway so any of the RIA benefits jQuery has to me would be handled by flex.

Vegans are friends, not food...
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

RBGraphics
  • Locked
  • Question
Adobe Portfolio
Replies
0
Views
192
RBGraphics
RBGraphics
cfuser10
  • Locked
  • Question
Populating Text Box based on CFSelect Value
Replies
2
Views
105
cfuser10
cfuser10
LonnieJohnson
  • Locked
  • Question
Downloading Dreamweaver
Replies
0
Views
86
LonnieJohnson
LonnieJohnson
lollieleaver
  • Locked
  • Question
Dreamweaver CS4 - how can I make an Access database downloadable from my site?
Replies
2
Views
87
lollieleaver
lollieleaver
LyndonOHRC
  • Locked
  • Question
Javascript code will not execute if a cfdocument tag is in my document
Replies
1
Views
120
LyndonOHRC
LyndonOHRC

Part and Inventory Search

Sponsor

Back
Top