removing ajax loader animation

replacing the header search loading animation with loading text in the dropdown markup. changing the
off canvas mark up to not use the same classes as the header search

diff --git a/js/app.js b/js/app.js
index d2a99ce..9d15b8d 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -19,7 +19,6 @@ $(document).ready(function () {
         search_fields[i] = json_search[i];
     }
 
-    
     var activities          = page.find('.activity-search');
     var counties            = page.find('.county-search');
     var cities              = page.find('.city-search');
@@ -30,6 +29,11 @@ $(document).ready(function () {
     var location_loader     = page.find('.location-loader');
     var selected_item;
     
+    function get_select_text(el){
+        var text = $(el + ' option:first-child').text();
+        return text;
+    }
+    
     // member info data on change
     counties.on('change', function(){
 //        $('option:selected', this).attr('selected', 'selected');
@@ -38,7 +42,7 @@ $(document).ready(function () {
             county = 'false';
         }
         var selected = $('option:selected', this).val();
-        
+        var city_text;
         jQuery.ajax({
             type:"POST",
             dataType: 'json',
@@ -48,10 +52,12 @@ $(document).ready(function () {
                 county: county,
             },
              beforeSend: function(){
-                location_loader.css("display", 'block');
+                cities.prop('disabled','disabled');
+                city_text = get_select_text('.header-search.city-search');
+                $('.city-search option:first-child').text("Loading...");
             },
             complete: function(){
-                location_loader.css("display", 'none');
+                cities.prop('disabled',false);
             },
             success:function(data){
                 var county_data = data;
@@ -76,7 +82,7 @@ $(document).ready(function () {
             region = 'false';
         }
         var selected = $('option:selected', this).val();
-        
+        var city_text, county_text;
         jQuery.ajax({
             type:"POST",
             dataType: 'json',
@@ -86,10 +92,17 @@ $(document).ready(function () {
                 region: region,
             },
             beforeSend: function(){
-                location_loader.css("display", 'block');
+                counties.prop('disabled','disabled');
+                cities.prop('disabled','disabled');
+                
+                city_text = get_select_text('.header-search.city-search');
+                $('.city-search option:first-child').text("Loading...");
+                county_text = get_select_text('.header-search.county-search');
+                $('.county-search option:first-child').text("Loading...");
             },
             complete: function(){
-                location_loader.css("display", 'none');
+                counties.prop('disabled',false);
+                cities.prop('disabled',false);
             },
             success:function(data){
                 var region_data = data;
@@ -124,6 +137,7 @@ $(document).ready(function () {
         if(activity === ''){
             activity = 'false';
         }
+        var park_text,destination_text;
         jQuery.ajax({
             type:"POST",
             dataType: 'json',
@@ -135,10 +149,20 @@ $(document).ready(function () {
 
             },
             beforeSend: function(){
-                category_loader.css("display", 'block');
+                parks.prop('disabled','disabled');
+                destinations.prop('disabled','disabled');
+                
+                destination_text = get_select_text('.header-search.destination-search');
+                $('.destination-search option:first-child').text("Loading...");
+                park_text = get_select_text('.header-search.park-search');
+                $('.park-search option:first-child').text("Loading...");
             },
             complete: function(){
-                category_loader.css("display", 'none');
+                parks.prop('disabled',false);
+                destinations.prop('disabled',false);
+                
+                $('.destination-search option:first-child').text(destination_text);
+                $('.park-search option:first-child').text(park_text);
             },
             success:function(data){
                var activity_data = data;
@@ -177,7 +201,7 @@ $(document).ready(function () {
         if(park === ''){
             park = 'false';
         }
-
+        var destination_text, activity_text;
         jQuery.ajax({
             type:"POST",
             dataType: 'json',
@@ -188,10 +212,20 @@ $(document).ready(function () {
                 others: {'destination' : $('.destination-search option:selected').val(), 'activity' : $('.activity-search option:selected').val()}
             },
             beforeSend: function(){
-                category_loader.css("display", 'block');
+                activities.prop('disabled','disabled');
+                destinations.prop('disabled','disabled');
+                
+                destination_text = get_select_text('.header-search.destination-search');
+                $('.destination-search option:first-child').text("Loading...");
+                activity_text = get_select_text('.header-search.activity-search');
+                $('.activity-search option:first-child').text("Loading...");
             },
             complete: function(){
-                category_loader.css("display", 'none');
+                activities.prop('disabled',false);
+                destinations.prop('disabled',false);
+                
+                $('.destination-search option:first-child').text(destination_text);
+                $('.activity-search option:first-child').text(activity_text);
             },
             success:function(data){
                var park_data = data;
@@ -230,6 +264,7 @@ $(document).ready(function () {
         if(destination === ''){
             destination = 'false';
         }
+        var park_text, activity_text;
         jQuery.ajax({
             type:"POST",
             dataType: 'json',
@@ -240,13 +275,24 @@ $(document).ready(function () {
                 others: {'activity' : $('.activity-search option:selected').val(), 'park' : $('.park-search option:selected').val()}
             },
             beforeSend: function(){
-                category_loader.css("display", 'block');
+//                category_loader.css("display", 'block');
+                activities.prop('disabled','disabled');
+                parks.prop('disabled','disabled');
+                
+                park_text = get_select_text('.header-search.park-search');
+                $('.park-search option:first-child').text("Loading...");
+                activity_text = get_select_text('.header-search.activity-search');
+                $('.activity-search option:first-child').text("Loading...");
+                
             },
             complete: function(){
-                category_loader.css("display", 'none');
+                activities.prop('disabled',false);
+                parks.prop('disabled',false);
+                
+                $('.park-search option:first-child').text(park_text);
+                $('.activity-search option:first-child').text(activity_text);
             },
             success:function(data){
-                console.log(data.categories);
                var destination_data = data;
                 option = {};
                 $('.activity-search option').not(':eq(0), :selected').remove();

diff --git a/js/custom/headerSearch.js b/js/custom/headerSearch.js
index 5d42d07..ea35f25 100644 (file)
--- a/js/custom/headerSearch.js
+++ b/js/custom/headerSearch.js
@@ -10,7 +10,6 @@ $(document).ready(function () {
         search_fields[i] = json_search[i];
     }
 
-    
     var activities          = page.find('.activity-search');
     var counties            = page.find('.county-search');
     var cities              = page.find('.city-search');
@@ -21,6 +20,11 @@ $(document).ready(function () {
     var location_loader     = page.find('.location-loader');
     var selected_item;
     
+    function get_select_text(el){
+        var text = $(el + ' option:first-child').text();
+        return text;
+    }
+    
     // member info data on change
     counties.on('change', function(){
 //        $('option:selected', this).attr('selected', 'selected');
@@ -29,7 +33,7 @@ $(document).ready(function () {
             county = 'false';
         }
         var selected = $('option:selected', this).val();
-        
+        var city_text;
         jQuery.ajax({
             type:"POST",
             dataType: 'json',
@@ -39,10 +43,12 @@ $(document).ready(function () {
                 county: county,
             },
              beforeSend: function(){
-                location_loader.css("display", 'block');
+                cities.prop('disabled','disabled');
+                city_text = get_select_text('.header-search.city-search');
+                $('.city-search option:first-child').text("Loading...");
             },
             complete: function(){
-                location_loader.css("display", 'none');
+                cities.prop('disabled',false);
             },
             success:function(data){
                 var county_data = data;
@@ -67,7 +73,7 @@ $(document).ready(function () {
             region = 'false';
         }
         var selected = $('option:selected', this).val();
-        
+        var city_text, county_text;
         jQuery.ajax({
             type:"POST",
             dataType: 'json',
@@ -77,10 +83,17 @@ $(document).ready(function () {
                 region: region,
             },
             beforeSend: function(){
-                location_loader.css("display", 'block');
+                counties.prop('disabled','disabled');
+                cities.prop('disabled','disabled');
+                
+                city_text = get_select_text('.header-search.city-search');
+                $('.city-search option:first-child').text("Loading...");
+                county_text = get_select_text('.header-search.county-search');
+                $('.county-search option:first-child').text("Loading...");
             },
             complete: function(){
-                location_loader.css("display", 'none');
+                counties.prop('disabled',false);
+                cities.prop('disabled',false);
             },
             success:function(data){
                 var region_data = data;
@@ -115,6 +128,7 @@ $(document).ready(function () {
         if(activity === ''){
             activity = 'false';
         }
+        var park_text,destination_text;
         jQuery.ajax({
             type:"POST",
             dataType: 'json',
@@ -126,10 +140,20 @@ $(document).ready(function () {
 
             },
             beforeSend: function(){
-                category_loader.css("display", 'block');
+                parks.prop('disabled','disabled');
+                destinations.prop('disabled','disabled');
+                
+                destination_text = get_select_text('.header-search.destination-search');
+                $('.destination-search option:first-child').text("Loading...");
+                park_text = get_select_text('.header-search.park-search');
+                $('.park-search option:first-child').text("Loading...");
             },
             complete: function(){
-                category_loader.css("display", 'none');
+                parks.prop('disabled',false);
+                destinations.prop('disabled',false);
+                
+                $('.destination-search option:first-child').text(destination_text);
+                $('.park-search option:first-child').text(park_text);
             },
             success:function(data){
                var activity_data = data;
@@ -168,7 +192,7 @@ $(document).ready(function () {
         if(park === ''){
             park = 'false';
         }
-
+        var destination_text, activity_text;
         jQuery.ajax({
             type:"POST",
             dataType: 'json',
@@ -179,10 +203,20 @@ $(document).ready(function () {
                 others: {'destination' : $('.destination-search option:selected').val(), 'activity' : $('.activity-search option:selected').val()}
             },
             beforeSend: function(){
-                category_loader.css("display", 'block');
+                activities.prop('disabled','disabled');
+                destinations.prop('disabled','disabled');
+                
+                destination_text = get_select_text('.header-search.destination-search');
+                $('.destination-search option:first-child').text("Loading...");
+                activity_text = get_select_text('.header-search.activity-search');
+                $('.activity-search option:first-child').text("Loading...");
             },
             complete: function(){
-                category_loader.css("display", 'none');
+                activities.prop('disabled',false);
+                destinations.prop('disabled',false);
+                
+                $('.destination-search option:first-child').text(destination_text);
+                $('.activity-search option:first-child').text(activity_text);
             },
             success:function(data){
                var park_data = data;
@@ -221,6 +255,7 @@ $(document).ready(function () {
         if(destination === ''){
             destination = 'false';
         }
+        var park_text, activity_text;
         jQuery.ajax({
             type:"POST",
             dataType: 'json',
@@ -231,13 +266,24 @@ $(document).ready(function () {
                 others: {'activity' : $('.activity-search option:selected').val(), 'park' : $('.park-search option:selected').val()}
             },
             beforeSend: function(){
-                category_loader.css("display", 'block');
+//                category_loader.css("display", 'block');
+                activities.prop('disabled','disabled');
+                parks.prop('disabled','disabled');
+                
+                park_text = get_select_text('.header-search.park-search');
+                $('.park-search option:first-child').text("Loading...");
+                activity_text = get_select_text('.header-search.activity-search');
+                $('.activity-search option:first-child').text("Loading...");
+                
             },
             complete: function(){
-                category_loader.css("display", 'none');
+                activities.prop('disabled',false);
+                parks.prop('disabled',false);
+                
+                $('.park-search option:first-child').text(park_text);
+                $('.activity-search option:first-child').text(activity_text);
             },
             success:function(data){
-                console.log(data.categories);
                var destination_data = data;
                 option = {};
                 $('.activity-search option').not(':eq(0), :selected').remove();

diff --git a/parts/oc-trail-form.php b/parts/oc-trail-form.php
index 3ebb058..c12e080 100644 (file)
--- a/parts/oc-trail-form.php
+++ b/parts/oc-trail-form.php
@@ -1,2 +1,2 @@
  <?php include(get_template_directory().'/parts/search-filters.php'); ?>
- <?php include(get_template_directory().'/parts/trail-search.php'); ?>
\ No newline at end of file
+ <?php include(get_template_directory().'/parts/oc-trail-search.php'); ?>
\ No newline at end of file

diff --git a/parts/oc-trail-search.php b/parts/oc-trail-search.php
new file mode 100644 (file)
index 0000000..6508def
--- /dev/null
+++ b/parts/oc-trail-search.php
@@ -0,0 +1,65 @@
+      <h3>Find Trails & Maps</h3>
+            <div class="row">
+                <div class="small-12 columns search-header">
+<!--                   <a class="reset-search" href="">Reset Search</a>-->
+                    <form class="text-search-form" method="post" enctype="multipart/form-data" action="<?php echo get_permalink(get_option('glm_members_database_option_members_list_id')); ?>?action=list">
+                        <span>Search for Trail</span>
+                        <input name="textSearch" type="text" method="post">
+                        <input class="search-button right" type="submit" value="Search" name="submit">
+                    </form>
+                    
+                    <form class="location-search-form" action="<?php echo get_permalink(get_option('glm_members_database_option_members_list_id')); ?>?action=list" method="post" enctype="multipart/form-data">
+                        <span>Search by Location</span>
+                        <select class="oc-search region-search" name="regionUserSearch[]" >
+                            <option value="">Select a Region</option>
+                            <?php foreach($regions as $region){ ?>
+
+                                <option value="<?php echo $region['region']; ?>"><?php echo $region['name']; ?></option>
+                            <?php } ?>
+                        </select>
+                        <select class="oc-search county-search" name="counties[]" >
+                            <option value="">Select a County</option>
+                            <?php foreach($counties as $county){ ?>
+
+                                <option value="<?php echo $county['county']; ?>"><?php echo $county['name']; ?></option>
+                            <?php } ?>
+                        </select>
+                        <select class="oc-search city-search" name="cities[]" >
+                            <option value="">Select a City</option>
+                            <?php foreach($cities as $city){ ?>
+                                <option value="<?php echo $city['city']; ?>"><?php echo $city['name']; ?></option>
+                            <?php } ?>
+                        </select>
+                        <input class="search-button right" type="submit" value="Search" name="submit">
+                        <div class="location-loader">
+                            <div class="loader"></div>
+                        </div>
+                    </form>
+                   
+                    <form class="category-search-form" action="<?php echo get_permalink(get_option('glm_members_database_option_members_list_id')); ?>?action=list" method="post" enctype="multipart/form-data">
+                        <span>Search by</span>
+                        <select class="oc-search destination-search" name="categories[]" >
+                             <option value="">Select a Destination</option>
+                            <?php foreach($destinations as $destination){ ?>
+                                <option value="<?php echo $destination['category']; ?>"><?php echo $destination['name']; ?></option>
+                            <?php } ?>
+                        </select>
+                        <select class="oc-search activity-search" name="categories[]" >
+                            <option value="">Select an Activity</option>
+                            <?php foreach($activities as $activity){ ?>
+                                <option value="<?php echo $activity['category']; ?>"><?php echo $activity['name']; ?></option>
+                            <?php } ?>
+                        </select>
+                        <select class="oc-search park-search" name="categories[]" >
+                            <option value="">Select a Park</option>
+                            <?php foreach($parks as $park){ ?>
+                                <option value="<?php echo $park['category']; ?>"><?php echo $park['name']; ?></option>
+                            <?php } ?>
+                        </select>
+                        <input class="search-button right" type="submit" value="Search" name="submit">
+                        <div class="category-loader">
+                            <div class="loader"></div>
+                        </div>
+                    </form>
+                </div>
+            </div>
\ No newline at end of file