Menu

hi,

I have a menu with three buttons

Search by State
Search by City
Search by Church

I am using JQuery for it

what I would like it to do is when the user visit the page I want to automatically open the
button menu that says Search by Church
but
if the user click on any other buttons the page get reloaded the same button that the user clicked on I would like it to be open. all others should be closed.

I am trying to learn Jquery but I am not good at it. so, I need your help.

I have three div and an attached JQuery files and Jquery script

http://www.churchesbulletin.com/post.cfm?CHID=11

<script type="text/javascript" src="JS/jquery-latest.min.js"></script>
<script type="text/javascript" src="JS/jquery-ui.min.js"></script>

<script>

$(document).ready(function() {
    $(".divMain").click(function(){
        $(".divSub").hide();
        $(this).next(".divSub:eq(0)").show(50);
    });
}); 

</script>

_________________________________

<div class="divMain">
		<div align="center" class="BtnSearchByState" style="text-align:center;padding: 0px 0px 0px 0px;" >							
		<input name="BtnSearchByState" type="button" value="" > 
		</div>	
  </div>
	<div class="divSub" style="padding: 0px 0px 0px 0px;">
	Search for 
	<cfif isdefined("form.TxtSearchST") and #form.TxtSearchST# neq "">
    <input id="TxtSearchST" name="TxtSearchST" value="<cfoutput>#form.TxtSearchST#</cfoutput>" style="width: 180px" type="text"/>
	<cfelse>
	 <input id="TxtSearchST" name="TxtSearchST" style="width: 180px" type="text"/>
	 </cfif>
	Filter:&nbsp;  <cfdump var="#session.TxtSearchST#">    
	 <input id="TxtStateST" name="TxtStateST" style="width: 142px" type="text" onKeyUp="setStateOptions(this,'DispStateBoxST');" />

	<cfif isdefined("form.DispStateBoxST") and #form.DispStateBoxST# neq "">
	<select name="DispStateBoxST" size="1" style="width: 180px;"/>
		<option value="" selected="selected">Select State</option>
		<cfoutput query="DispState">
		<cfif (#DispState.StateID# eq #form.DispStateBoxST#)>
		<option value="#DispState.StateID#" selected="selected">#DispState.StateName#</option>
		<cfelse>
		<option value="#DispState.StateID#" >#DispState.StateName#</option>
		</cfif>
		</cfoutput>
	</select>
	<cfelse>
		<select name="DispStateBoxST" size="1" style="width: 180px;"/>
		<option value="" selected="selected">Select State</option>
		<cfoutput query="DispState">
		<option value="#DispState.StateID#" >#DispState.StateName#</option>
		</cfoutput>
	</select>
	</cfif>
	<select name="SelSTPost" size="1" style="width: 180px;"
	onChange="setOptions(this.options[this.selectedIndex].value);"/>
		<option value="" selected="selected">Select type of posting</option>
		<cfoutput query="DispMainMenu">
		<option value="#DispMainMenu.MenuID#" >#DispMainMenu.MainMenuName#</option>
		</cfoutput>
	</select>
	<select name="SelCatg" size="1" style="width: 180px;"/>
		<option value="" selected="selected">Select category</option>
	</select>
	<select name="SelStDt" onChange="GetDateRangeST(this.value)" size="1" style="width: 180px;"/>
		<option value="" selected="selected">Select Date Range</option>
		<option value="3">Last 3 months</option>
		<option value="3-6">Last 3-6 months</option>
		<option value="6-9">Last 6-9 months</option>
		<option value="9-12">Last 9-12 months</option>
		<option value="Clear">Clear Dates</option>
	</select>
	From:&nbsp;<input name="dateFromST" type="text" id="dateFromST" readonly=readonly value="" size="13" style="width: 120px;"/>&nbsp;
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To:&nbsp;<input name="dateToST" type="text" id="dateToST" readonly=readonly value="" size="13"  style="width: 120px;"/>&nbsp;
	Price:&nbsp;<input id='PriceFromST' name="PriceFromST" type="text" onKeyUp="valid_number(this);" value="" size="4" style="width: 63px;"/>  
	<input name="PriceToST" type="text" id="PriceToST" onKeyUp="valid_number(this);" value="" size="4" style="width: 63px;"/>
	 Has image:&nbsp;<input id="ChkST" name="ChkST" type="checkbox" /><br>
	<div align="center" class="myButtonST" style="text-align:center;padding: 6px 0px 0px 0px;" >
<input name="BtnSTSearch" type="button" onclick="valState()" value="" > 
</div>
	 
	 
	 
    
</div>	

<div class="divMain">
	   <div align="center" class="BtnSearchByCity" style="text-align:center;padding: 0px 0px 0px 0px;" >							
		<input name="BtnSearchByCity" type="button" value="" > 
		</div>
</div>
<div class="divSub" style="padding: 0px 0px 0px 0px;">
Search for    
	 <input id="TxtSearchCT" name="TxtSearchCT" style="width: 180px" type="text"/>

 Filter:&nbsp;    
	 <input id="TxtStateCT" name="TxtStateCT" style="width: 142px" type="text" onKeyUp="setStateOptions(this,'DispStateBoxCT');" />

	 <select name="DispStateBoxCT" style="width: 185px;" size="1" 
			   onChange="setCityOptionsCT(this,'TxtCityCT','GetCityCT');"
			   onFocus="this.form.TxtCityCT.value='';" >
			 </select>
			 <cfset strStateListCT="" >
			 <cfloop query="DispState">
			   <cfset strStateListCT=strStateListCT&",['#StateID#','#StateName#']" >
			 </cfloop>
			 <cfoutput>
			 <script>
			   var arrStates=[#Mid(strStateListCT,2,Len(strStateListCT))#];
			   document.forms.FRMAcc.TxtStateCT.onkeyup();
			 </script>
			 </cfoutput> 

Filter:&nbsp;
			 <input id="TxtCityCT"  name="TxtCityCT" style="width: 142px" type="text" onKeyUp="this.form.DispStateBoxCT.onchange()" />

   <select name="GetCityCT" style="width: 185px;" size="1" /> </select>

		<select name="SelSTPostCT" size="1" style="width: 185px;"
	onChange="setOptionsCT(this.options[this.selectedIndex].value);"/>
		<option value="" selected="selected">Select type of posting</option>
		<cfoutput query="DispMainMenu">
		<option value="#DispMainMenu.MenuID#" >#DispMainMenu.MainMenuName#</option>
		</cfoutput>
	</select>
	
	<select name="SelCatCT" size="1" style="width: 185px;"/>
		<option value="" selected="selected">Select category</option>
	</select>

	<select name="SelDtCT" onChange="GetDateRangeCT(this.value)" size="1" style="width: 185px;"/>
		<option value="" selected="selected">Select Date Range</option>
		<option value="3">Last 3 months</option>
		<option value="3-6">Last 3-6 months</option>
		<option value="6-9">Last 6-9 months</option>
		<option value="9-12">Last 9-12 months</option>
		<option value="Clear">Clear Dates</option>
	</select>
	
	
	From:&nbsp;<input name="dateFromCT" type="text" id="dateFromCT" readonly=readonly value="" size="13" style="width: 120px;"/>&nbsp;
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To:&nbsp;<input name="dateToCT" type="text"  id="dateToCT" readonly=readonly value="" size="13"  style="width: 120px;"/>&nbsp;
	Price:&nbsp;<input name="PriceFromCT" type="text" onKeyUp="valid_number(this);" id="PriceFromCT" value="" size="4" style="width: 63px;"/>
	<input name="PriceToCT" type="text" id="PriceToCT" onKeyUp="valid_number(this);" value="" size="4" style="width: 63px;"/>
	 Has image:&nbsp;<input id="ChkCT" name="ChkCT" type="checkbox" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <input id="BtnCT" type="button" value="Search" name="BtnCT" onclick="valCity();"/>

</div>

<div class="divMain">
		<div align="center" class="BtnSearchByChurch" style="text-align:center;padding: 0px 0px 0px 0px;" >							
		<input name="BtnSearchByChurch" type="button" value="" > 
		</div>

</div>
<div class="divSub">
Search for    
	 <input id="TxtSearchCH" name="TxtSearchCH" style="width: 180px" type="text"/>

  Filter:&nbsp;    
			<input id="TxtState" name="TxtState" style="width: 142px" type="text" onKeyUp="setStateOptions(this,'DispStateBox');" />

	 <select name="DispStateBox" style="width: 185px;" size="1" 
			   onChange="setCityOptions(this,'TxtCity','GetCity','GetChurch');"
			   onFocus="this.form.TxtCity.value='';this.form.TxtChurch.value='';" >
			 </select>
			 <cfset strStateList="" >
			 <cfloop query="DispState">
			   <cfset strStateList=strStateList&",['#StateID#','#StateName#']" >
			 </cfloop>
			 <cfoutput>
			 <script>
			   var arrStates=[#Mid(strStateList,2,Len(strStateList))#];
			   document.forms.FRMAcc.TxtState.onkeyup();
			 </script>
			 </cfoutput> 
	
	Filter:&nbsp;
			 <input id="TxtCity"  name="TxtCity" style="width: 142px" type="text" onKeyUp="this.form.DispStateBox.onchange()" />

	
	         <select name="GetCity" style="width: 185px;" size="1" onChange="setChurchOptions(this,'TxtChurch','GetChurch');"/> </select>

Filter:&nbsp;
		 <input id="TxtChurch" name="TxtChurch" style="width: 142px" type="text" onKeyUp="this.form.GetCity.onchange()" />	

	<select name="GetChurch"  style="width: 185px;" size="1" >
	<option></option>
	</select>

		<select name="SelSTPost" size="1" style="width: 185px;"
	onChange="setOptionsCH(this.options[this.selectedIndex].value);"/>
		<option value="" selected="selected">Select type of posting</option>
		<cfoutput query="DispMainMenu">
		<option value="#DispMainMenu.MenuID#" >#DispMainMenu.MainMenuName#</option>
		</cfoutput>
	</select>
	
	<select name="SelCatCh" size="1" style="width: 185px;"/>
		<option value="" selected="selected">Select category</option>
	</select>
	<select name="SelDtCh" onChange="GetDateRangeCH(this.value)" size="1" style="width: 185px;"/>
		<option value="" selected="selected">Select Date Range</option>
		<option value="3">Last 3 months</option>
		<option value="3-6">Last 3-6 months</option>
		<option value="6-9">Last 6-9 months</option>
		<option value="9-12">Last 9-12 months</option>
		<option value="Clear">Clear Dates</option>
	</select>
	
	
	From:&nbsp;<input name="dateFromCh" type="text" id="dateFromCh" readonly=readonly value="" size="13" style="width: 120px;"/>&nbsp;
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To:&nbsp;<input name="dateToCh" type="text" id="dateToCh" readonly=readonly value="" size="13"  style="width: 120px;"/>&nbsp;
	Price:&nbsp;<input name="PriceFromCh" type="text" onKeyUp="valid_number(this);" id="PriceFromCh" value="" size="4" style="width: 63px;"/>
	<input name="PriceToCh" type="text" id="PriceToCh" onKeyUp="valid_number(this);" value="" size="4" style="width: 63px;"/>
	 Has image:&nbsp;<input id="ChkCh" name="ChkCh" type="checkbox" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <input id="BtnCh" type="button" value="Search" name="BtnCh" onclick="valChurch();"/>
	
	
	
</div>

Open in new window

lulu50Asked:
Who is Participating?
 
leakim971PluritechnicianCommented:
download this plugin : https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js
put it in your JS folder and
add this line 5 :
<script type="text/javascript" src="JS/jquery.cookie.js"></script>

now an update :


$(document).ready(function() {

    $(".divMain").click(function(){
$.cookie('last_select', $(this).find(":button").attr("name"));
        $(".divSub").hide();
        $(this).next(".divSub:eq(0)").show(50);
    });


var last_select = $.cookie('last_select');
if( last_select == null ) {
    $.cookie('last_select', "BtnSearchByChurch");
    $(":button[name='BtnSearchByChurch']").closest(".divMain").trigger("click");
}
else {
    $(":button[name='" + last_select + "']").closest(".divMain").trigger("click");
}

});

Open in new window

0
 
lulu50Author Commented:
leakim971:

I uploaded jquery.cookie.js to my JS folder

and included the file on my page

<script type="text/javascript" src="JS/jquery.cookie.js"></script>

the updated the above code.

I am getting error that says

Jquery is undefined  I am not sure what i did wrong?
0
 
leakim971PluritechnicianCommented:
add this line 5 :
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
lulu50Author Commented:
do you mean like this?
Menu.gif
0
 
leakim971PluritechnicianCommented:
the line 5 in your current question, not on your site

<script type="text/javascript" src="JS/jquery-latest.min.js"></script>
<script type="text/javascript" src="JS/jquery-ui.min.js"></script>
<!-- HERE -->
<script>
0
 
lulu50Author Commented:
leakim971:

Wow Wow and Wow this is great!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

you are good A++++++++++++++++++++++++++++++++++

This is beautiful that's how I want it great now I can continue.

this is sharp sharp sharp and sharp!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Thank you for all your help.  



0
 
lulu50Author Commented:
leakim971:

I don't know how to say this but I have one more question than I leave you alone.

I have to open a new question for it and I hope you help this time too!!!!!

this is great!!!!   cannot do it without your help.  THANK YOU

0
 
lulu50Author Commented:
A++++++++++++++++++++++

EXCELLENT!!!!!!!!!!!!!!!!!!!!!!!!!!!
0
 
leakim971PluritechnicianCommented:
you're welcome, thanks for sharing your happiness
see you later
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.