Return Select Box to Default State Without Refreshing The Page - Ajax - JQuery

Hi EE

I've searched around trying to find a solution to this little problem. I have two select boxes, both are populated from a database, the second box is updated via Ajax after the 1st has a selection made. When the first box has a selection made it displays a 'clear selection' text link which I'd like to refresh the 1st select box but without refreshing the page. Im using both Ajax and Jquery in my project. Im also looking at having another link appear underneath the second select box if a selection is made on that, so I need the links to be relevant to each object.

Help on this would be appreciated

---- The code below is the asp file which is pulled in from the Ajax request. ----
<%
dim conn
dim sql
dim manuvalue
manuvalue = request.querystring("man-select")
response.expires=-1
sql= "SELECT DISTINCT ModelID FROM troika_stock WHERE Show = true AND ManufacturerID= "
sql=sql & "'" & manuvalue & "'"
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("stock.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""" & 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
%>

Open in new window

DanielR6Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

b0lsc0ttIT ManagerCommented:
DanielR6,

The code used to return the 2 select lists to the default state will depend on the html when the page loads.  You might try using ...

document.formName.reset();

... but otherwise you will need code to manually reset both selects.  The specifics will depend on those form fields.  Please show the html for the page if you need specific code.  I do have a general suggestion though.  Have your AJAX code set up to return a blank select list if the default choice is selected in the first.  In otherwords you would just have the main code but it would send an empty list (and maybe disable if the field is disabled by default) if the default option is selected in the first list.  The results should basically be the same but the code and form cleaner.

Let me know if you have any questions or need more information.

b0lsc0tt

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
DanielR6Author Commented:
Thanks for that b0lsc0tt im now working on the alterations, if i get in a pickle i'll let you know, cheers.
b0lsc0ttIT ManagerCommented:
Thanks for the update.  Let me know if you do need more details or help.  WIth some code and specifics I can be more detailed in my answer and help if you need it.  Good luck! :)
bol
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

DanielR6Author Commented:
I've been unable to find a way of targeting each specific select. I've had it setup an empty disabled select box, i think in the manner you were suggesting.

I've noticed  though that if you do a standard button form reset, the fields reset but it looks like the ajax page that is called stays in place  and not return, ie before it was called so im duplicating code in a way. one for the pre-call and one for post.

You may probably ask me to open a new question, but i now want to add an additional select box for the contract term, do i need to make another ajax page or can i have multiple calls made to that single page?

Heres my test site just so you can see it working (or not as the case mat be!)
http://www.testsite.troikaleasing.com

Heres the code, hope this helps as a hand would be very welcome.

Thanks b0l


---------------------- Search Field ----------------
    <div class="searchbox">
 
    <form name="frm-search" id="frm-search" method="get" action="<%=Request.ServerVariables("SCRIPT_NAME")%>">
<%
dbconnect(1)
Set RS=Server.CreateObject("ADODB.Recordset") 
RS.Open "SELECT ManufacturerID, COUNT(*) As RecordCount FROM troika_stock WHERE show = true GROUP BY ManufacturerID ORDER BY ManufacturerID", strConnString, 3, 3 
response.write("<select id=""man_select""" & "class=""searchbox-dd""" & "onchange=""showModel(this.value)""" & vbCRLF)	
if RS.eof then
response.write("disabled")
end if	
response.write(">")
response.Write("<option selected=""selected""" & "class=""searchbox-dd-item""" & "value=""""" & ">" & vbCRLF)
if RS.eof then
response.write("[ No Vehicles Available ]" & vbCRLF)
else
response.write("[ All Makes ]" & vbCRLF)
end if
response.write("</option>")
response.write("<optgroup label='Makes'"">")
	if not RS.eof then
	do while not RS.eof				
			response.write ("<option value=""" & RS("ManufacturerID") & """" & "class=""searchbox-dd-item""" & ">" & RS("ManufacturerID") & "&nbsp;&nbsp;" & "(" & RS("RecordCount") & ")" & "</option>")
		
		RS.movenext
		loop
		end if
response.write("</optgroup>")
response.write ("</select>")
RS.close
Set RS = Nothing
dbconnect(0)                       
response.write "<span id=""content_model""" & ">"
response.write "<div class=""clearlist""" & ">"  & "clear option" & "</div>"                        
response.write "<select id=""mod_select""" & "class=""searchbox-dd""" & "onchange=""showModel(this.value)""" & "disabled" & ">"
response.Write "<option selected=""selected""" & "class=""searchbox-dd-item""" & "value=""""" & ">" & "[ All Models ]" & "</option>"
response.write "</select>"
response.write "<div class=""clearlist""" & ">"  & "clear option" & "</div>" 
response.write "<select id=""term_select""" & "class=""searchbox-dd""" & "disabled" & ">"
response.Write "<option selected=""selected""" & "class=""searchbox-dd-item""" & "value=""""" & ">" & "[ Any Contract Term ]" & "</option>"
response.write "</select>"
response.write "</span>"
%>                        
                        <div class="search-form-controls">
                        <input id="imgbutton" class="search" title="search" type="reset" value="" />
                        <input id="imgbutton" class="refresh" title="reset" type="reset" value="" />
                        </div>
</form>
</div>
---------------------- Search Field End ----------------
---------------------- GetModel.asp ----------------
<%
dim conn
dim sql
dim manuvalue
manuvalue = request.querystring("man_select")
response.expires=-1
sql= "SELECT ModelID, COUNT(*) As RecordCount FROM troika_stock WHERE show = true AND ManufacturerID= "
sql=sql & "'" & manuvalue & "'"
sql=sql & "GROUP BY ModelID ORDER BY ModelID"
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/App_Data/troika.mdb"))
set RS=Server.CreateObject("ADODB.recordset")
RS.Open sql,conn
response.write "<div class=""clearlist""" & ">" & vbCRLF
if manuvalue <> "" then 
response.write "<a href=""""" & "onclick=""showModel(document.frm-search.man_select.value)"""  & ">" & vbCRLF
end if	
response.write "clear option" & vbCRLF
response.write "</a>"
response.write "</div>"
response.write "<select id=""mod_select""" & "class=""searchbox-dd""" & 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;"  & "(" & RS("RecordCount") & ")" & "</option>")
RS.movenext
loop
end if             
response.write("</optgroup>")      
response.write ("</select>")
RS.close
set RS = nothing
conn.close
set conn =nothing
%>
---------------------- getmodel.asp End ----------------
---------------------- ModelSort.js ----------------
var xmlhttp
 
function showModel(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
var url="/inc/getmodel/getmodel.asp";
url=url+"?man_select="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
 
function stateChanged()
{
if (xmlhttp.readyState==4)
  {
  document.getElementById("content_model").innerHTML=xmlhttp.responseText;
  }
}
 
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}
 
var xmlhttp
 
function showModel(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
var url="/inc/getmodel/getmodel.asp";
url=url+"?man_select="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
 
function stateChanged()
{
if (xmlhttp.readyState==4)
  {
  document.getElementById("content_model").innerHTML=xmlhttp.responseText;
  }
}
 
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}
---------------------- ModelSort.js End ----------------

Open in new window

b0lsc0ttIT ManagerCommented:
I need to look over the code and link to respond to the first part.  I will do that and post again on that part.
>> I've noticed  though that if you do a standard button form reset, the fields reset but it looks like the ajax page that is called stays in place  and not return <<
I wasn't sure how the reset() method would work.  It doesn't surprise me it behaves as you say so it might be best to just not use it (unless there are cases where you would need to reset before you had done any AJAX stuff).
>> but i now want to add an additional select box for the contract term, do i need to make another ajax page or can i have multiple calls made to that single page? <<
You should open a new question if you want details on that but I usually just use the same page.  The server page the AJAX script calls is set up to handle the different steps or cases.  I use the URL or the post header to not only pass the form info I need for the step but the step I am doing when I make the AJAX call.  Most of the AJAX script is the same no matter what the step is but just the URL or header part changes.  If that isn't really clear or you want help working on it then open a new question for it.  If you do that and post the new question's URL here then I will be glad to look at it and try to help.
Let me know if you have a question about any of this but I will post another comment to respond to the other part of your post.
bol
DanielR6Author Commented:
b0l, i've opened up another question for the additional part of my previous one, as im completly stuck as to how to include a third drop down

link to post:
http:#a24407660

thanks so much
Dan
DanielR6Author Commented:
that link doesn't work i noticed, obviously did it wrong, so i'll try it again;

http://www.experts-exchange.com/Programming/Languages/Scripting/AJAX/Q_24407660.html
b0lsc0ttIT ManagerCommented:
Dan,
Thanks.  I will look at the Q and see what help I can provide.
On the link I just want to point out that those like yours in the second to the last comment are anchors.  They point to a part of the page.  Notice the lack of a "filename."  The part after the colon (:) is the hash mark (#).
To link to another Q the short format would be like ...
http:/Q_24407660.html
Notice the colon is followed by the forward slash (which "refers" to the root of this site) and then has a filename (the Q_24407660.html part).  An anchor to a specific part of that Q could still be done by adding #aCID (where CID is the comment's ID).  The URL in your last comment could also be ...
http://www.experts-exchange.com/Q_24407660.html
You would want that format when using the URL outside of a post on EE.
I know this is offtopic but hope it helps. :)
bol
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.