?
Solved

Menu

Posted on 2011-10-03
9
Medium Priority
?
216 Views
Last Modified: 2012-08-14
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

0
Comment
Question by:lulu50
  • 5
  • 4
9 Comments
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 36904251
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
 

Author Comment

by:lulu50
ID: 36905328
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
 
LVL 83

Expert Comment

by:leakim971
ID: 36905343
add this line 5 :
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:lulu50
ID: 36905400
do you mean like this?
Menu.gif
0
 
LVL 83

Expert Comment

by:leakim971
ID: 36905476
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
 

Author Comment

by:lulu50
ID: 36905648
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
 

Author Comment

by:lulu50
ID: 36905679
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
 

Author Closing Comment

by:lulu50
ID: 36905698
A++++++++++++++++++++++

EXCELLENT!!!!!!!!!!!!!!!!!!!!!!!!!!!
0
 
LVL 83

Expert Comment

by:leakim971
ID: 36906333
you're welcome, thanks for sharing your happiness
see you later
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
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…
Suggested Courses

850 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