Solved

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

Posted on 2009-05-07
8
1,476 Views
Last Modified: 2012-05-06
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

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
  • 4
  • 4
8 Comments
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 400 total points
ID: 24330619
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
0
 

Author Comment

by:DanielR6
ID: 24356305
Thanks for that b0lsc0tt im now working on the alterations, if i get in a pickle i'll let you know, cheers.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 24356485
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
0
Major Incident Management Communications

Major incidents and IT service outages cost companies millions. Often the solution to minimizing damage is automated communication. Find out more in our Major Incident Management Communications infographic.

 

Author Comment

by:DanielR6
ID: 24374886
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

0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 24377898
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
0
 

Author Comment

by:DanielR6
ID: 24382708
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
0
 

Author Comment

by:DanielR6
ID: 24383163
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
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 24386735
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
0

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

688 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