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
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: <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: <input name="dateFromST" type="text" id="dateFromST" readonly=readonly value="" size="13" style="width: 120px;"/>
To: <input name="dateToST" type="text" id="dateToST" readonly=readonly value="" size="13" style="width: 120px;"/>
Price: <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: <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:
<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:
<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: <input name="dateFromCT" type="text" id="dateFromCT" readonly=readonly value="" size="13" style="width: 120px;"/>
To: <input name="dateToCT" type="text" id="dateToCT" readonly=readonly value="" size="13" style="width: 120px;"/>
Price: <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: <input id="ChkCT" name="ChkCT" type="checkbox" />
<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:
<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:
<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:
<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: <input name="dateFromCh" type="text" id="dateFromCh" readonly=readonly value="" size="13" style="width: 120px;"/>
To: <input name="dateToCh" type="text" id="dateToCh" readonly=readonly value="" size="13" style="width: 120px;"/>
Price: <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: <input id="ChkCh" name="ChkCh" type="checkbox" />
<input id="BtnCh" type="button" value="Search" name="BtnCh" onclick="valChurch();"/>
</div>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
add this line 5 :
the line 5 in your current question, not on your site
<script type="text/javascript" src="JS/jquery-latest.min.
<script type="text/javascript" src="JS/jquery-ui.min.js">
<!-- HERE -->
<script>
<script type="text/javascript" src="JS/jquery-latest.min.
<script type="text/javascript" src="JS/jquery-ui.min.js">
<!-- HERE -->
<script>
ASKER
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.
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.
ASKER
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
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
ASKER
A++++++++++++++++++++++
EXCELLENT!!!!!!!!!!!!!!!!!
EXCELLENT!!!!!!!!!!!!!!!!!
you're welcome, thanks for sharing your happiness
see you later
see you later
ASKER
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">
the updated the above code.
I am getting error that says
Jquery is undefined I am not sure what i did wrong?