asked on

Help with Populating 2nd ComboBox with Classic ASP and jQuery

Hello All;

I found the following code sample in PHP
http://www.99points.info/2010/06/ajax-tutorial-dynamic-loading-of-combobox-using-jquery-and-ajax-in-php/

I am converting it over to ASP Classic, but not sure how to pass the value through to the 2nd combobox.

This is my 2nd ComboBox
This is the issue here: getMCID = request.querystring("parent_id")
In php this is called as: $id = $_REQUEST['parent_id'];
So I am assuming that it is a request.querystring ?

<!--#include file="ACN_Less.asp"-->
<%
getMCID = request.querystring("parent_id")
Set SubCats = CreateObject("ADODB.Command")
SubCats.ActiveConnection=objConn
SubCats.Prepared = true
SubCats.commandtext="SELECT SCID, MCID, SCName, SCDesc FROM SubCat where MCID=?"
sqlArt.Parameters.Append sqlArt.CreateParameter("@MCID", 3, 1, , getMCID)
set rsSubCats = SubCats.execute
%>
	
	<select name="sub_category"  id="sub_category_id">
	<option value="" selected="selected"></option>
	<%while not rsSubCats.eof
	SCID = rsSubCats("SCID")
	SCName = rsSubCats("SCName")
	%>
		<option value="<%=SCID%>"><%=SCName%></option>
	<%rsSubCats.movenext
	wend
	rsSubCats.close%>
	</select>

Open in new window

Code for the main page below.

Thanks for any and all assistance on this one.
Carrzkiss

<!--#include file="ACN.asp"-->
<%
Set GetCats = CreateObject("ADODB.Command")
GetCats.ActiveConnection=objConn
GetCats.Prepared = true
GetCats.commandtext="SELECT MCID, MCName, MCDesc FROM MainCat"
set rsGetCats = GetCats.execute
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Ajax Tutorial: Dynamic Loading of ComboBox using jQuery and Ajax in ASP Classic</title>

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>

<script type="text/javascript">

$(document).ready(function() {

	$('#loader').hide();
	$('#show_heading').hide();
	
	$('#search_category_id').change(function(){
		$('#show_sub_categories').fadeOut();
		$('#loader').show();
		$.post("ChildCats.asp", {
			parent_id: $('#search_category_id').val(),
		}, function(response){
			
			setTimeout("finishAjax('show_sub_categories', '"+escape(response)+"')", 400);
		});
		return false;
	});
});

function finishAjax(id, response){
  $('#loader').hide();
  $('#show_heading').show();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
} 
</script>
<style>
.both h4{ font-family:Arial, Helvetica, sans-serif; margin:0px; font-size:14px;}
#search_category_id{ padding:3px; width:200px;}
#sub_category_id{ padding:3px; width:200px;}
.both{ float:left; margin:0 15px 0 0; padding:0px;}
</style>
</head>
<body>

<h1>Dynamic Loading of ComboBox using jQuery and Ajax in ASP Classic</h1><br />

<div style="padding-left:30px;">
<form action="#" name="form" id="form" method="post">

	<div class="both">
		<h4>Select Category</h4>
		<select name="search_category"  id="search_category_id">
		<option value="" selected="selected"></option>
        <%while not rsGetCats.eof
		MCID = rsGetCats("MCID")
		MCName = rsGetCats("MCName")%>
        <option value="<%=MCID%>"><%=MCName%></option>
		<%rsGetCats.movenext
        wend
        rsGetCats.close%>
		</select>		
	</div>
	
	<div class="both">
		<h4 id="show_heading">Select Sub Category</h4>
		<div id="show_sub_categories" align="center">
			<img src="loader.gif" style="margin-top:8px; float:left" id="loader" alt="" />
		</div>
	</div>	
	<input type="submit" name="" value="GO" />
</form>
</div>

</body>
</html>

Open in new window

arweeks

I only had a quick look an would need to recreate it to troubleshoot, but I'm not seeing a form field called parent_id, should you be requesting search_category?

Wayne Barron

ASKER

The parent_id is in the javascript.

$.post("ChildCats.asp", {
parent_id: $('#search_category_id').val(),
}, function(response){

Wayne Barron

ASKER

That is what has me a bit confused as to how I can pass the variable from there.
But that is how the php code works, so it should work in this instance as well...
Just need to find out how to pass it..

leakim971

If you want to pass the selected value of the dropdown (search_category_id) you may use : $('#search_category_id option:selected').val()

$.post(
		"ChildCats.asp",
		{ parent_id: $('#search_category_id option:selected').val() },
		function(response){
			setTimeout("finishAjax('show_sub_categories', '"+escape(response)+"')", 400);
		}
	);

Open in new window

Wayne Barron

ASKER

What else needs to be changed in order to make the value pass?
As just changing that did not work.
There has to be something within the other page that needs to be changed??

leakim971

use $.get instead $.post

Wayne Barron

ASKER

still not working??

leakim971

Try a simple test :

Full page for ChildCats.asp

<%= request.querystring("parent_id") %>

Open in new window

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

leakim971

typo error : $.get and not $.gett

Wayne Barron

ASKER

here is a demo
http://ee.cffcs.com/Q_26498993/getCats.asp
code
http://ee.cffcs.com/Q_26498993/Q_26498993.zip

SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Wayne Barron

ASKER

ill be damned.....
That was it...
I totally missed that one thing.

Sometimes it takes a 2nd set of eyes to make it work.. :)

Please try it now, and let me know why it is displaying a warning box on every selection...

http://ee.cffcs.com/Q_26498993/getCats.asp

leakim971

Work fine for me on IE, Chrome and FF :)

You can remove the alert and enjoy!

leakim971

>You can remove the alert

Line 7 post #ID:33759294

Wayne Barron

ASKER

I should have caught onto this all on my own.

Anyway, Thanks a bunch.
Going to sleep now :)

Carrzkiss

Wayne Barron

ASKER

Updated the links to have fully working projects.
Enjoy everyone, PHP jQuery Converted to ASP Classic.
(I love technology)

Carrzkiss

leakim971

(I love technology)
Oh yes!

Thanks for the points! Have a good week-end!

Wayne Barron

ASKER

1 quick questions.
How did you find the asp error on the page?

Microsoft VBScript runtime error '800a01a8'
Object required: 'sqlArt'
/EE/Q_26498993/ChildCats.asp, line 12

I am adding the code to my actual project now and it is not working, so I need to trouble shot it, and am unsure how you found this error and made it display to the page.

Thanks again, youve been great....

Carrzkiss

Wayne Barron

ASKER

I think I figured it out

http://192.168.2.9/ajax/ChildCats.asp?parent_id=1

Wayne Barron

ASKER

Love it.
Works like a charm.
have a good evening.

Carrzkiss

leakim971

>How did you find the asp error on the page?

I think I figured it out
http://192.168.2.9/ajax/ChildCats.asp?parent_id=1

Yes or with Firebug you can see the ajax call and the response

Wayne Barron

ASKER

Firebug, that is part of Firefox correct?

leakim971

A plugin