cant hide/show search area

Hi,

I have a search area which I hide and show using JS. That works fine.

The issue is when I click to search the search div area then hides again  as I am using cakephp and there is an automatic server call.
What I want to happen is to have the search area 'regSearch ' to be hidden  on load but to stay visible when I click the search button.



  <?php 
        echo $this->Form->button('Search', array('label' => 'Search', 'style'=>'float:right', 'onclick' => 'return hide()'));
           ?>
          <div id="regSearch" style="display: none" >

         echo '<td>';
            echo $this->Form->submit('Search', array('name'=>'searchFilter','style'=>'width:130px;height:40px',));
             echo '</td>';
................
<script type="text/javascript">
function hide()
{
//alert('asd');
 // document.getElementById("avail2").style.visibility = "hidden";
  
  
	var e = document.getElementById("regSearch");

	  if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
  
  return false;
  
}
</script>
..

Open in new window

jagguyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ryan ChongCommented:
probably you can check if your form was posted back, if yes then change the search visibility state accordingly. probably something to this...
<?php
$sSearch = "none";
if (strtoupper($_SERVER['REQUEST_METHOD']) == 'POST') { 
     $sSearch = "block"; 
}
?>

Open in new window

<div id="regSearch" style="display: <?=$sSearch?>" >
...
0
jagguyAuthor Commented:
this doesnt work as now the search bar is always visible after I have clicked the show/hide button
0
Ryan ChongCommented:
or if this works for you? that's to call the hide() javascript again if the form is posted... like:

<div id="regSearch" style="display: none" >

Open in new window

then at the end of your page, add this:
<?php
if (strtoupper($_SERVER['REQUEST_METHOD']) == 'POST') { 
?>
<script language="javascript">
     hide();
</script>
<?php
}
?>

Open in new window

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.

jagguyAuthor Commented:
I tried it again and what a happens is that it works the same as before. Clicking the submit button for the search is not triggering the

if (strtoupper($_SERVER['REQUEST_METHOD']) == 'POST') {
0
Ryan ChongCommented:
can you post the HTML codes generated before the search button is clicked?
0
jagguyAuthor Commented:
ok

<pre class="cake-error"><a href="javascript:void(0);" onclick="document.getElementById('cakeErr55e2af7c08105-trace').style.display = (document.getElementById('cakeErr55e2af7c08105-trace').style.display == 'none' ? '' : 'none');"><b>Strict</b> (2048)</a>: Declaration of AppModel::afterSave() should be compatible with Model::afterSave($created, $options = Array) [<b>APP\Model\AppModel.php</b>, line <b>34</b>]<div id="cakeErr55e2af7c08105-trace" class="cake-stack-trace" style="display: none;"><a href="javascript:void(0);" onclick="document.getElementById('cakeErr55e2af7c08105-code').style.display = (document.getElementById('cakeErr55e2af7c08105-code').style.display == 'none' ? '' : 'none')">Code</a> <a href="javascript:void(0);" onclick="document.getElementById('cakeErr55e2af7c08105-context').style.display = (document.getElementById('cakeErr55e2af7c08105-context').style.display == 'none' ? '' : 'none')">Context</a><pre id="cakeErr55e2af7c08105-code" class="cake-code-dump" style="display: none;"><code><span style="color: #000000"><span style="color: #0000BB">&nbsp;</span><span style="color: #007700">*&nbsp;@</span><span style="color: #0000BB">package&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app</span><span style="color: #007700">.</span><span style="color: #0000BB">Model</span></span></code>
<code><span style="color: #000000"><span style="color: #0000BB">&nbsp;</span><span style="color: #007700">*/</span></span></code>
<span class="code-highlight"><code><span style="color: #000000"><span style="color: #0000BB"></span><span style="color: #007700">class&nbsp;</span><span style="color: #0000BB">AppModel&nbsp;</span><span style="color: #007700">extends&nbsp;</span><span style="color: #0000BB">Model&nbsp;</span><span style="color: #007700">{</span></span></code></span></pre><pre id="cakeErr55e2af7c08105-context" class="cake-context" style="display: none;">$className = &#039;AppModel&#039;
$parts = array(
	(int) 0 =&gt; &#039;Model&#039;
)
$plugin = null
$package = &#039;Model&#039;
$file = &#039;D:\AA-website design\crm5\app\Model\AppModel.php&#039;
$paths = array(
	(int) 0 =&gt; &#039;D:\AA-website design\crm5\app\Model\&#039;,
	(int) 1 =&gt; &#039;D:\AA-website design\crm5\app\Lib\Model\&#039;,
	(int) 2 =&gt; &#039;D:\AA-website design\crm5\app\Model\&#039;,
	(int) 3 =&gt; &#039;D:\AA-website design\crm5\lib\Cake\Model\&#039;
)
$appLibs = &#039;D:\AA-website design\crm5\app\Lib\&#039;
$normalizedClassName = &#039;AppModel&#039;
$path = &#039;D:\AA-website design\crm5\app\Model\&#039;</pre><pre class="stack-trace">include - APP\Model\AppModel.php, line 34
App::load() - CORE\Cake\Core\App.php, line 565
spl_autoload_call - [internal], line ??
include - APP\Model\Lesson.php, line 15
App::load() - CORE\Cake\Core\App.php, line 565
spl_autoload_call - [internal], line ??
class_exists - [internal], line ??
ClassRegistry::init() - CORE\Cake\Utility\ClassRegistry.php, line 145
Controller::loadModel() - CORE\Cake\Controller\Controller.php, line 738
UsersController::dashboard() - APP\Controller\UsersController.php, line 1789
ReflectionMethod::invokeArgs() - [internal], line ??
Controller::invokeAction() - CORE\Cake\Controller\Controller.php, line 490
Dispatcher::_invoke() - CORE\Cake\Routing\Dispatcher.php, line 191
Dispatcher::dispatch() - CORE\Cake\Routing\Dispatcher.php, line 165
[main] - APP\webroot\index.php, line 92</pre></div></pre><!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Users</title>

		<!--[if lt IE 9]>
      		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
    	<![endif]-->
        
	<link rel="stylesheet" type="text/css" href="/crm5/css/boot_strap.css" />
	<link rel="stylesheet" type="text/css" href="/crm5/css/jquery-ui.css" />
   <!--     <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">  -->
         <link href="http:////code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" rel="stylesheet"> 
    	
		
		
	<link rel="stylesheet" type="text/css" href="/crm5/css/apt.css" />
	<link rel="stylesheet" type="text/css" href="/crm5/css/jquerytablesorterpager.css" />

	<script type="text/javascript" src="/crm5/js/jquery.min.js"></script>
	<script type="text/javascript" src="/crm5/js/jquery-ui.min.js"></script>
            
			<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
            <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
	</head>
	<body ng-app="apTut">

	    <div class="navbar navbar-fixed-top">
	      <div class="navbar-inner">
	        <div class="container">
                      <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </a>
                     <a href="/crm5/" class="brand">APTUTORING CRM ADMIN</a>                                            <div class=" nav-collapse">
                        <ul class="nav">
                            
                                                       
                            
                            
                                      <li ><a href="/crm5/users/admindashboard">Dashboard</a></li>
                                        <li ><a href="/crm5/students/index2">Students</a></li>
                                        <li ><a href="/crm5/tutors/index2">Tutors</a></li>
                                  
                                        <li class="active"><a href="/crm5/users/dashboard">Schedule</a></li>
                                  
                                 
                                  	<li ><a href="/crm5/configs">Admin</a></li>
                                        <li ><a href="/crm5/students/enquiryIndex">Enquiries</a></li>
                                    
                                      
                                  
                                                           
                            
                            <li id='nav_logout' class="pull-right">
                            	<a href="/crm5/users/logout"><i class="icon-off"></i>Logout</a>                            </li>
                           
                                <li id='nav_user' class="pull-right">
                            	                            </li>
                              
                        </ul>
                          
                                                 </div><!--/.nav-collapse -->
	        </div>
	      </div>
	    </div>

	    <div class="container">
	      <div class="content">
	        <div class="row">


	           	<div id="main-content" class="span10">

					
					
<script type="text/javascript">  

function myFunc(val) {
    if(val != 4) {
        document.getElementById("startdatebox").disabled = true;
        document.getElementById("enddatebox").disabled = true;
    } else {
        document.getElementById("startdatebox").disabled = false;
        document.getElementById("enddatebox").disabled = false;
    }
}
</script>

<div class="container-fluid">
        
  <div class="row-fluid">
   <div class='span6'>
    
    <h2>Scheduled Classes <br></h2>

   </div>
     <div class="row-fluid">
    <div class='span6'>
 
    </div>
     </div>
      
      
   <div class="row-fluid">
    <div class='span12'>

      <form action="/crm5/users/dashboard/page:1/subject:assess/classtype:1/dateRange:1/startDate:30-08-2015/endDate:13-09-2015" id="UserDashboardForm" method="post" accept-charset="utf-8"><div style="display:none;"><input type="hidden" name="_method" value="POST"/></div>    
	
    
       
        
      </div>
      
      </div> 
       
      <div class="row-fluid">
    <div class='span12'>


       
                  
       
  
   
        <br><br>
           
        <div id="regSearch" style="display:block " ><table><tr><td><div class="input text"><label for="UserFirstname">First Name</label><input name="data[User][firstname]" style="width:100px;height:30px" type="text" id="UserFirstname"/></div></td><td><div class="input text"><label for="UserLastname">Last Name</label><input name="data[User][lastname]" style="width:100px;height:30px" type="text" id="UserLastname"/></div></td><td><div class="input text"><label for="UserSubject">Subject</label><input name="data[User][subject]" style="width:80px;height:30px" value="assess" type="text" id="UserSubject"/></div></td><td><div class="input text"><label for="UserMobile">Mobile</label><input name="data[User][mobile]" style="width:90px;height:30px" type="text" id="UserMobile"/></div></td><td><div class="input select"><label for="UserClasstype">Class Type</label><select name="data[User][classtype]" style="width:120px" id="UserClasstype">
<option value="1" selected="selected">Individual</option>
<option value="2">Group Tuition</option>
</select></div></td><td><div class="input select"><label for="dateRange">Date Range</label><select name="data[User][dateRange]" id="dateRange" style="width:120px" onclick="myFunc(this.value)">
<option value="1" selected="selected">Fortnightly</option>
<option value="5">All</option>
<option value="2">Today</option>
<option value="3">Month</option>
<option value="4">Custom Date</option>
</select></div></td><td><div class="input text"><label for="startdatebox">Start Date</label><input name="data[User][startDate]" id="startdatebox" class="datepicker" style="width:90px;height:30px" value="30-08-2015" readonly="readonly" type="text"/></div></td><td><div class="input text"><label for="enddatebox">End Date</label><input name="data[User][endDate]" id="enddatebox" class="datepicker" style="width:90px;height:30px" value="13-09-2015" readonly="readonly" type="text"/></div></td><td><div class="submit"><input  name="searchFilter" style="width:130px;height:40px" type="submit" value="Search"/></div></td><td><div class="submit"><input  name="clear" style="width:130px;height:40px" type="submit" value="Clear All"/></div></td></tr></table><br></div>    
    </div>
     
      
      
      
  <div class="row-fluid">
   <div class='span12'> 
        <a href="/crm5/lessons/makeupIndex3" class="mybtn"><i class="icon-book"></i> Make Up Lessons</a><a href="/crm5/lessons/CustomDateRangeTutorsCancellationReport" class="mybtn "><i class="icon-plus"></i>Tutor Cancellation Report</a>                
       <a href="#" onClick="MyWindow=window.open('/crm5/users/printfortnightLessons','MyWindow',width=400,height=300); return false;"class="mybtn">
             <i class="icon-print"></i> Print</a>
     
      <a href="/crm5/apttexts/smslists" class="mybtn">New Student Sms </a><br><br><div class="submit"><input  name="deleteallbutton" type="submit" value="Delete All Checked Lessons"/></div> 
       
        <br>
         <div class='tstyle2'>
	<table>
	<tr>
                         <th>Payment</th>
                          <th>Lesson No</th>
                         
                        <th>&nbsp;</th>
			<th>Lesson Date</th>
                       
			<th>Weekday</th>
			<th>Start time</th>
			<th>End time</th>
                	<th>Tutor name</th>
			<th>Subject</th>
			
			<th>Student</th>
			<!--<th>Gender</th>-->
			<th>Lesson Type</th>
                     
			<!--<th>Venue</th>-->
			<th>Action</th>
	</tr>
	<tbody>
		
	  
        
		<tr class="colorclass5">
		
		     <td>Postpaid&nbsp</td><td>8422-1&nbsp</td><td>-</td><input type="hidden" name="data[User0][id]" value="8422" id="User0Id"/>                     <td>
			05-09-2015			
		
		</td> 
		<td>
			Saturday		
			
		</td>
		<td>09:00 AM&nbsp;</td>
		<td>10:00 AM&nbsp;</td>
		
		<!-- Get tutor first name from Tutor table through Model -->
		<td>
			Simon Kearney			
		</td>
		<!-- Get the subject being taught -->
		<td>History Assessment&nbsp;</td>
		<td>Abdul Karim&nbsp;</td>
		
		<td>
			Assessment Class&nbsp;
		</td>
                
                
		<td >
			<a href="/crm5/lessons/cancelledBy/8422/33/57" ="" class="myview mygreen " title="cancel"><i class="" title="Delete"></i>Cancel</a><a href="/crm5/lessons/editIndividual3/8422" ="" class="myview myorange " title="edit"><i class="" title="Delete"></i>Edit</a><a href="/crm5/users/deleteassessment/8422/0/57" class="myview myred confirm-delete" onclick="if (confirm(&quot;Are you sure you want to delete the record from the system?&quot;)) { return true; } return false;"><i class="" title="Delete"></i>Delete</a>  
                         
                            
                            
				 
			
						
		</td>
	</tr>
	
	  
        
		<tr class="colorclass5">
		
		     <td>Postpaid&nbsp</td><td>8423-2&nbsp</td><td>-</td><input type="hidden" name="data[User1][id]" value="8423" id="User1Id"/>                     <td>
			12-09-2015			
		
		</td> 
		<td>
			Saturday		
			
		</td>
		<td>09:00 AM&nbsp;</td>
		<td>10:00 AM&nbsp;</td>
		
		<!-- Get tutor first name from Tutor table through Model -->
		<td>
			Simon Kearney			
		</td>
		<!-- Get the subject being taught -->
		<td>History Assessment&nbsp;</td>
		<td>Abdul Karim&nbsp;</td>
		
		<td>
			Assessment Class&nbsp;
		</td>
                
                
		<td >
			<a href="/crm5/lessons/cancelledBy/8423/33/57" ="" class="myview mygreen " title="cancel"><i class="" title="Delete"></i>Cancel</a><a href="/crm5/lessons/editIndividual3/8423" ="" class="myview myorange " title="edit"><i class="" title="Delete"></i>Edit</a><a href="/crm5/users/deleteassessment/8423/0/57" class="myview myred confirm-delete" onclick="if (confirm(&quot;Are you sure you want to delete the record from the system?&quot;)) { return true; } return false;"><i class="" title="Delete"></i>Delete</a>  
                         
                            
                            
				 
			
						
		</td>
	</tr>
	</tbody>
	
	</table>
         </div>
  </form><div class="mypaging">
    
  Showing Page 1 of 1<span class="off"> &lt;</span><span class="off">  &gt;</span>&nbsp; &nbsp;Total Records:2   
</div>


   </div>  
	
	




<script type="text/javascript">
function hide()
{
//alert('asd');
 // document.getElementById("avail2").style.visibility = "hidden";
  
  
	var e = document.getElementById("lessonSearch");

	  if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
  
  return false;
  
}
</script>


	            </div><!--/span-->

	        </div><!--/row-->
	      </div><!--/content-->

	
	<!-- Footer commented out by Ricky
	      <footer>
	        <p>&copy; ApTutoring Pty Ltd 2015</p>
	      </footer>
	 -->     

	    </div> <!-- /container -->
            <div id="modal-delete" class="modal hide fade">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3>Delete</h3>
                </div>
                <div class="modal-body">
                    <p>Are you sure?</p>
                </div>
                <div class="modal-footer">
                    <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">No</a>
                    <a href="#" id="delete_yes_btn" class="btn btn-danger">Yes</a>
                </div>
            </div>
            
            <script src="//ajax.cdnjs.com/ajax/libs/json2/20110223/json2.min.js"></script>
            <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
            <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
            <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
            <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tab.js"></script>
            <script type="text/javascript" src="/crm5/js/apTut_angular.js"></script>            			<script type="text/javascript" src="/crm5/js/cancelledBy_date_picker.js"></script>            
            
                        			
			

			
			
			
			
			
			
            <script type="text/javascript" src="http://maps.google.com.au/maps/api/js?sensor=false"></script>
	</body>
</html>

Open in new window

0
RobOwner (Aidellio)Commented:
There is a cake error: http://output.jsbin.com/wuyakaxoyo

Fix that first as it may prevent the page loading correctly.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

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.