Solved

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

Posted on 2009-05-07
8
1,471 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
  • 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
 

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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
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)

759 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now