Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Ajax, ASP Drop Down Issue - Loads Duplicate Of Current Page In Div

Posted on 2009-05-07
3
Medium Priority
?
265 Views
Last Modified: 2012-05-06
Hi E.E

I have two dropdowns using ajax and asp, like most the second select filters depending on the first. Issue im getting is that when I make a selection on the first the div where second list gets populated gets filled by what looks like is a duplicate of the current page.

I have included all the necessary code so hopefully the glitch will be in there somewhere. I am including all the files on the same page, there's not a seperate asp file being called by the ajax script. Im thinking that may have something to do with it, and it's possibly trying to load the current page into it's self.

Thanks in advance for any help received
Dan
<------------------------------- SUB ROUNTINE CALLED ---------------------->
<% Sub getModels
dim conn
dim sql
dim manuvalue
manuvalue = request.querystring("man-select")
response.expires=-1
sql= "SELECT DISTINCT ModelID FROM troika_stock WHERE ManufacturerID= "
sql=sql & "'" & manuvalue & "'"
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("sum.mdb"))
set RS=Server.CreateObject("ADODB.recordset")
RS.Open sql,conn
if manuvalue <> "" then 
response.write "<div class=""clearlist""" & ">" & "<a href="""""  & ">" & "clear results" & "</a>" & "</div>"
end if
response.write "<select id=""mod-select""" & "class=""searchbox-dd""" & "onchange=""this.form.submit()""" & vbCRLF
if manuvalue = "" then 
response.write "disabled"
end if	
response.write ">"
response.write("<option selected=""selected""" & "class=""searchbox-dd-item""" & "value=""""" & ">" & "[ All Models]" & "</option>")	
response.write("<optgroup label='Models'"">")
if not RS.eof then
do while not RS.eof					
response.write ("<option value=""" & RS("ModelID") & """" & "class=""searchbox-dd-item""" & ">" & RS("ModelID") & "&nbsp;&nbsp;"  & "</option>")
RS.movenext
loop
end if             
response.write("</optgroup>")      
response.write ("</select>")
RS.close
set RS = nothing
conn.close
set conn =nothing
End Sub
%>
 
<------------------------------- SUB ROUNTINE CALLED (END) ---------------------->
 
<------------------------------- AJAX CALLED ---------------------->
 
<script type="text/javascript">
 
/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
 
var loadedobjects = "";
var rootdomain = "http://" + window.location.hostname;
 
function ajaxpage(url, containerid){
var page_request = false;
	if (window.XMLHttpRequest) // if Mozilla, Safari etc
		page_request = new XMLHttpRequest()
	else if (window.ActiveXObject){ // if IE
		try {
	page_request = new ActiveXObject("Msxml2.XMLHTTP")
		} 
		catch (e){
	try{
	page_request = new ActiveXObject("Microsoft.XMLHTTP")
			}
		catch (e){}
		}
	}
	else
	return false
		
	page_request.onreadystatechange = function(){
	loadpage(page_request, containerid);
	}
 
	page_request.open('GET', url, true);
	page_request.send(null);
}
 
function loadpage(page_request, containerid){
	if(page_request.readyState == 4 && (page_request.status == 200 || window.location.href.indexOf("http") == -1)){
		document.getElementById(containerid).innerHTML = page_request.responseText;
	}
}
 
/***Combo Menu Load Ajax snippet**/
function ajaxcombo(selectobjID, loadarea){
var selectobj = document.getElementById ? document.getElementById(selectobjID) : ""
	if(selectobj != "" && selectobj.options[selectobj.selectedIndex].value != ""){
		url = '<%=Request.ServerVariables("SCRIPT_NAME")%>?method=ajax&man-select=' + selectobj.options[selectobj.selectedIndex].value;
		ajaxpage(url, loadarea);
	}
}
 
</script>
<------------------------------- AJAX CALLED (END) ---------------------->
<------------------------------- FORM  ---------------------->
 <form name="frm-search" id="frm-search" method="get" action="<%=Request.ServerVariables("SCRIPT_NAME")%>">
<%
dbconnect(1)
ManufacturerID = ""
recCount = 0
Set RS=Server.CreateObject("ADODB.Recordset") 
RS.Open "SELECT DISTINCTROW ManufacturerID FROM troika_stock WHERE Show = true ORDER BY ManufacturerID ASC", strConnString, 3, 3 
						
 response.write("<select id=""man-select""" & "class=""searchbox-dd""" & "onchange=""ajaxcombo('man-select','content_model')""" & ">") 	
response.Write("<option selected=""selected""" & "class=""searchbox-dd-item""" & "value=""""" & ">" & "[ All Makes ]" & "</option>")
response.write("<optgroup label='Makes'"">")
if not RS.eof then
do while not RS.eof
If RS("ManufacturerID") <> ManufacturerID  then
 If ManufacturerID <> "" Then					
	
response.write ("<option value=""" & RS("ManufacturerID") & """" & "class=""searchbox-dd-item""" & ">" & RS("ManufacturerID") & "&nbsp;&nbsp;" & "(" & recCount & ")" & "</option>")
                         end if
ManufacturerID = RS("ManufacturerID")
recCount = 0 
end if
recCount = recCount + 1 
RS.movenext
loop
end if
response.write("</optgroup>")
response.write ("</select>")
 
RS.close
Set RS = Nothing
dbconnect(0)
%>
                        
<span id="content_model"><%Call getModels %></span>
</form>
<------------------------------- FORM (END) ---------------------->

Open in new window

0
Comment
Question by:DanielR6
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 8

Expert Comment

by:Bobaran98
ID: 24332502
Two thoughts to get you started here.  First off, I'm not sure you should be using hyphens in your html element names.  Certainly if you tried to directly access those elements (as opposed to through getElementById), it wouldn't work.  But if you don't know for sure that it's kosher, just try removing the hypen or using an underscore instead (e.g. man_select).

If that's not it, though, let's figure out where your problem is occurring.  Add a popup alert in your ajaxcombo() function to make sure you're calling the URL the way you think you are.  For example, right after you assign the url variable, but before you call ajaxpage(), put in:

window.alert(url);

Does it look right?
0
 
LVL 8

Accepted Solution

by:
Bobaran98 earned 2000 total points
ID: 24332551
Okay, wait... something else that may be happening here.  It looks like all your page would work just fine (other than my caveats above) if you were planning to reload the entire page within your ajaxpage() function (which would not, of course, be AJAX-- it would just be a JavaScript redirect / form submission where all your variables are passed in the querystring.  In fact, if you changed your ajaxcombo() function to what I've got below, the whole page reload should work fine (again, in theory).

The problem with what you've got right now is that you're trying to load the entire page into your content_model <span> tag (which I didn't know you could do... I've only seen AJAX used to load into <div> tags, but then, I am fairly new to AJAX).  Regardless, that would be why you appear to have a complete duplicate of the original page-- because you do!  You're in essence replacing (in the original page) whatever the getModels sub generated with a whole 'nother instance of the page.

I would suggest you take your getModels sub and build it into its own separate page, and you then AJAX that page into the content_model <span> tag (of course, for aesthetic reasons, you'll still want to start the content_model <span> out with a disabled listbox.

Thoughts?

function ajaxcombo(selectobjID, loadarea){
	var selectobj = document.getElementById ? document.getElementById(selectobjID) : ""
	if(selectobj != "" && selectobj.options[selectobj.selectedIndex].value != ""){
			url = '<%=Request.ServerVariables("SCRIPT_NAME")%>?method=ajax&man-select=' + selectobj.options[selectobj.selectedIndex].value;
			//ajaxpage(url, loadarea);
			window.location = url;
	}
}

Open in new window

0
 

Author Closing Comment

by:DanielR6
ID: 31578927
Thanks Bobaran98 for your help i resolved the problem, by putting the getmodels sub into a seperate page and called that in. So all sorted no more duplicating pages.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Hello World !, Thanks : My Sincere thanks to @Michael Male who encouraged me to write an article on this in my  blog (http://scribblejava.wordpress.com). Introduction:       There are several technical issues a developer may face in his…
I would like to start this tip/trick by saying Thank You, to all who said that this could not be done, as it forced me to make sure that it could be accomplished. :) To start, I want to make sure everyone understands the importance of utilizing p…
In this video you will find out how to export Office 365 mailboxes using the built in eDiscovery tool. Bear in mind that although this method might be useful in some cases, using PST files as Office 365 backup is troublesome in a long run (more on t…
Have you created a query with information for a calendar? ... and then, abra-cadabra, the calendar is done?! I am going to show you how to make that happen. Visualize your data!  ... really see it To use the code to create a calendar from a q…

636 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