I have a link on a page that toggles the search form on and off. For example you search for Spring term classes and then you want to search for a new term and click Start a new Search. The link works great and toggles just fine...EXCEPT the toggle automatically closes again. I can't figure out why this is happening, I have searched the stack overflow site and none of the solutions seems to work (Or maybe I am still doing something wrong) Any help you can give me would be greatly appreciated. Here is the part that calls the function
<div class="course-schedule-wrapper">
<span <?= ($show_form) ? 'style="display:none;"' : null ?> class="toggle-search"><a href="#">Start a new schedule search</a></span>
<div id="course-schedule-search" <?= ($show_form) ? null : 'style="display:none;"' ?>>
<form name="form" method="post" action="/schedules/">
<input type="hidden" name="search" value="1" />
<table summary="Course schedule search options" id="course-schedule-form">
<tbody>
<tr valign="top">
<td nowrap="nowrap">
<label for="area_id" class="label">Semester:</label>
</td>
<td>
<!--<input type="radio" name="semester" value="2014SP" id="S2014SP" checked="checked">
<label class="inline" for="S2014SP">Spring 2014</label>
<br />
--> <?
$sflag = FALSE;
$fflag = FALSE;
if ($_POST['semester'] == '2014SU'){
$sflag = "checked=checked";
}
if ($_POST['semester'] == '2014FA'){
$fflag = "checked=checked";
}
if(!$sflag && !$fflag) {
$fflag = "checked=checked";
}
?>
<input type="radio" name="semester" value="2014FA" id="S2014FA" <?= $fflag; ?>>
<label class="inline" for="S2014FA">Fall 2014</label>
<br />
<input type="radio" name="semester" value="2015SP" id="S2015SP" <?= $sflag; ?>>
<label class="inline" for="S2014SU">Spring 2015</label>
<br />
</td>
</tr>
<tr valign="middle">
<td nowrap="nowrap">
<label for="text" class="label">Search for:</label>
</td>
<td>
<input type="text" name="text" id="text" size="60" value="<?= ( (isset($_POST['text']) ) ? $_POST['text'] : null )?>">
<div class="formtext">in course ID, title, or instructor</div>
</td>
</tr>
<tr>
<td nowrap="nowrap">
<label for="area_id" class="label">Area of study:</label>
</td>
<td>
<select name="area_id" size="1" id="area_id">
<option value="-1">Any Area of Study</option>
<?php
$query = "SELECT * FROM areas WHERE inactive=0 ORDER BY name";
$result = db_query($query)->fetchAll();
?>
<? foreach( $result as $area ): ?>
<option <?= ( isset($_POST['area_id']) && $area->id == $_POST['area_id'] ) ?' selected="selected" ' : null ?> value="<?=$area->id?>"><?= $area->name ?></option>
<? endforeach; ?>
</select>
</td>
</tr>
<tr>
<td nowrap="nowrap">
<label for="division_id" class="label">Division:</label>
</td>
<td>
<select name="division_id" size="1" id="division_id">
<option value="-1">Any Division</option>
<?php
$query = "SELECT * FROM divisions ORDER BY name";
$result = db_query($query)->fetchAll();
?>
<? foreach( $result as $division ): ?>
<option <?= ( isset($_POST['division_id']) && $division->id == $_POST['division_id'] ) ?' selected="selected" ' : null ?> value="<?= $division->id ?>"><?= $division->name ?></option>
<? endforeach; ?>
</select>
</td>
</tr>
<tr>
<td nowrap="nowrap">
<label for="time1" class="label">Start time:</label>
</td>
<td>
<div class="formtext">from
<select name="time[0]" size="1" id="time1" onchange="document.form.online.checked=false;">
<option value="" selected="selected">anytime</option>
<option <?= (isset($_POST['time']) && '07:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="07:30">7:30 AM</option>
<option <?= (isset($_POST['time']) && '08:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="08:30">8:30 AM</option>
<option <?= (isset($_POST['time']) && '09:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="09:30">9:30 AM</option>
<option <?= (isset($_POST['time']) && '10:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="10:30">10:30 AM</option>
<option <?= (isset($_POST['time']) && '11:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="11:30">11:30 AM</option>
<option <?= (isset($_POST['time']) && '12:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="12:30">12:30 PM</option>
<option <?= (isset($_POST['time']) && '13:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="13:30">1:30 PM</option>
<option <?= (isset($_POST['time']) && '14:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="14:30">2:30 PM</option>
<option <?= (isset($_POST['time']) && '15:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="15:30">3:30 PM</option>
<option <?= (isset($_POST['time']) && '16:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="16:30">4:30 PM</option>
<option <?= (isset($_POST['time']) && '17:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="17:30">5:30 PM</option>
<option <?= (isset($_POST['time']) && '18:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="18:30">6:30 PM</option>
<option <?= (isset($_POST['time']) && '19:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="19:30">7:30 PM</option>
<option <?= (isset($_POST['time']) && '20:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="20:30">8:30 PM</option>
</select>
<label for="time2">to</label>
<select name="time[1]" size="1" id="time2" onchange="document.form.online.checked=false;">
<option value="" selected="selected">anytime</option>
<option <?= (isset($_POST['time']) && '07:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="07:30">7:30 AM</option>
<option <?= (isset($_POST['time']) && '08:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="08:30">8:30 AM</option>
<option <?= (isset($_POST['time']) && '09:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="09:30">9:30 AM</option>
<option <?= (isset($_POST['time']) && '10:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="10:30">10:30 AM</option>
<option <?= (isset($_POST['time']) && '11:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="11:30">11:30 AM</option>
<option <?= (isset($_POST['time']) && '12:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="12:30">12:30 PM</option>
<option <?= (isset($_POST['time']) && '13:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="13:30">1:30 PM</option>
<option <?= (isset($_POST['time']) && '14:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="14:30">2:30 PM</option>
<option <?= (isset($_POST['time']) && '15:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="15:30">3:30 PM</option>
<option <?= (isset($_POST['time']) && '16:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="16:30">4:30 PM</option>
<option <?= (isset($_POST['time']) && '17:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="17:30">5:30 PM</option>
<option <?= (isset($_POST['time']) && '18:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="18:30">6:30 PM</option>
<option <?= (isset($_POST['time']) && '19:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="19:30">7:30 PM</option>
<option <?= (isset($_POST['time']) && '20:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="20:30">8:30 PM</option>
</select>
(inclusive)
</div>
</td>
</tr>
<tr>
<td nowrap="nowrap">
<label for="duration" class="label">Duration:</label>
</td>
<td>
<select name="duration" size="1" id="duration" onchange="document.form.online.checked=false;">
<option value="-1" selected="selected">any duration</option>
<option <?= (isset($_POST['duration']) && '01:00' == $_POST['duration']) ? ' selected="selected" ' : null ?> value="01:00">1 hour</option>
<option <?= (isset($_POST['duration']) && '01:30' == $_POST['duration']) ? ' selected="selected" ' : null ?> value="01:30">1.5 hours</option>
<option <?= (isset($_POST['duration']) && '02:00' == $_POST['duration']) ? ' selected="selected" ' : null ?> value="02:00">2 hours</option>
<option <?= (isset($_POST['duration']) && '02:30' == $_POST['duration']) ? ' selected="selected" ' : null ?> value="02:30">2.5 hours</option>
<option <?= (isset($_POST['duration']) && '03:00' == $_POST['duration']) ? ' selected="selected" ' : null ?> value="03:00">3 hours</option>
<option <?= (isset($_POST['duration']) && '03:30' == $_POST['duration']) ? ' selected="selected" ' : null ?> value="03:30">3.5 hours</option>
<option <?= (isset($_POST['duration']) && '04:00' == $_POST['duration']) ? ' selected="selected" ' : null ?> value="04:00">4 hours</option>
<option <?= (isset($_POST['duration']) && '04:30' == $_POST['duration']) ? ' selected="selected" ' : null ?> value="04:30">4.5 hours</option>
</select>
<select name="durcomp" size="1" id="durcomp" onchange="document.form.online.checked=false;">
<option value="less" <?= (isset($_POST['durcomp']) && 'less' == $_POST['durcomp']) ? ' selected="selected" ' : null ?>>or less</option>
<option value="more" <?= (isset($_POST['durcomp']) && 'more' == $_POST['durcomp']) ? ' selected="selected" ' : null ?>>or more</option>
</select>
</td>
</tr>
<tr>
<td nowrap="nowrap" class="label">Days:</td>
<td>
<table summary="Days of the week">
<tbody>
<tr>
<td align="center"><label for="M" class="formtext">M</label></td>
<td align="center"><label for="T" class="formtext">T</label></td>
<td align="center"><label for="W" class="formtext">W</label></td>
<td align="center"><label for="R" class="formtext">R</label></td>
<td align="center"><label for="F" class="formtext">F</label></td>
<td align="center"><label for="S" class="formtext">S</label></td>
</tr>
<tr valign="top">
<td align="center">
<input type="checkbox" name="M" id="M" <?=( isset($_POST['M']) && "ON" == $_POST['M'] ) ? ' checked="checked" ' : null ?> value="ON">
</td>
<td align="center">
<input type="checkbox" name="T" id="T" <?=( isset($_POST['T']) && "ON" == $_POST['T'] ) ? ' checked="checked" ' : null ?> value="ON">
</td>
<td align="center">
<input type="checkbox" name="W" id="W" <?=( isset($_POST['W']) && "ON" == $_POST['W'] ) ? ' checked="checked" ' : null ?> value="ON">
</td>
<td align="center">
<input type="checkbox" name="R" id="R" <?=( isset($_POST['R']) && "ON" == $_POST['R'] ) ? ' checked="checked" ' : null ?> value="ON">
</td>
<td align="center">
<input type="checkbox" name="F" id="F" <?=( isset($_POST['F']) && "ON" == $_POST['F'] ) ? ' checked="checked" ' : null ?> value="ON">
</td>
<td align="center">
<input type="checkbox" name="S" id="S" <?=( isset($_POST['S']) && "ON" == $_POST['S'] ) ? ' checked="checked" ' : null ?> value="ON">
</td>
<td align="left">
<select name="dayop" size="1" id="dayop">
<option value="AND" <?=( isset($_POST['dayop']) && "AND" == $_POST['dayop'] ) ? ' selected="selected" ' : null ?>>these days only</option>
<option value="OR" <?=( isset($_POST['dayop']) && "OR" == $_POST['dayop'] ) ? ' selected="selected" ' : null ?>>at least these days</option>
</select>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr valign="middle">
<td nowrap="nowrap"><label for="online" class="label">Show online<br>courses only:</label></td>
<?php
if($_POST['online'] == "ON") {
$oflag = "checked=checked";
}
?>
<td><input type="checkbox" name="online" id="online" onclick="rst()" value="ON" <?= $oflag; ?>></td>
</tr>
</tbody>
</table>
<input type="hidden" name="currentcourse" id="inprog" value="3">
<br>
<input type="submit"> | <input type="reset" value="Reset"><br>
</form>
<hr />
<p class="body"><strong>To register</strong>, or for more information, contact
the <a href="../ar/">Admissions office</a> at
217.443.8800.
</p>
<p class="body">Some courses have flexible schedules or have schedules that are yet to be
determined; these are listed as TBA (To Be Arranged) and include online
(Internet) courses, video telecourses, internships, et cetera. If you
search based on time, length and/or day, the results will <b>not</b>
include such courses.
</p>
<p class="body">Some courses involve a lab portion that meets at a different time and/or
on different days than the lecture portion. If you search based on time,
length and/or day, the results may include the lecture portion or the lab
portion, but not necessarily both, even though both portions are
required.
</p>
</div>
</div>
Here is the function information (other functions included just to make sure I am not missing anything)
jQuery(function($){
$('#header-logo').click(function(){
window.location = 'http://local.dannew.com/';
});
$(".course-schedule-wrapper .toggle-search a").click(function(e){
e.preventDefault();
$("#course-schedule-search").slideToggle();
});
$("#quicklinks").change(function(){
if( $(this).val() != "0" )
window.location = $(this).val();
});
$(".show-in-progress").click(function(){
$('#inprog').val('1');
$("form[name='form']").submit();
console.log('test');
});
$("a").each(function(i, el){
if( $(el).attr('href') == "/%23" || $(el).attr('href') == "..." ){
$(el).click(function(){
return false;
}).css({
"text-decoration" : "none",
"color" : "#000",
"cursor" : "default"
});
}
});
I found my issue, there was an extraneous copy of the script
$(".course-schedule-wrapper .toggle-search a").click(function(e){
e.preventDefault();
$("#course-schedule-search").slideToggle();
});
in one of the other files that feeds into the page. removed that copy and now it is working great! For the record this was not as simple as it sounds as for this "schedules" page the developers created 6 different files to feed this one page!
One click handler for that selector submits a form. Submitting a form will reload a new page based on criteria set in the action url code, unless the form is submitted via ajax.
There is no page state saved when you load a new page.
Thus you are basically seeing the page reset itself to a new version