Search Function Problem - CSS-Tricks

This topic is empty.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
August 3, 2015 at 11:46 am #205975
anthonyjones
Participant
Hi,

I created this site http://fitnesssolutions.co.ke/new which is a real estate website. The search engine is supposed to return data depending on what the user inputs and displaying the results on an htlm page here http://fitnesssolutions.co.ke/search-results/default.htm after searching through all the properties on the site.

The problem i have is that its searching and returning a blank page…. What am i doing wrong on the code. Its my first search project so aint a pro in these things

This is the code… Would appreciate if you could help me fine tune it since there seem to be a serious problem with the way am querying
```
<form action="http://www.fitnesssolutions.co.ke/new/search-results/" method="get" id="ihf-search">
    <input type="hidden" value="RES" name="propertyCategory">
    <input type="hidden" value="true" name="newSearch">
    <input type="hidden" value="idx-results" name="" id="mls-hidden">

    <select class="select" name="cityId[]">
        <option value="6699">area</option>
        <option id="6419" value="6419">Nairobi</option>
        <option id="24794" value="24794">Mombasa</option>
        <option id="6615" value="6615">Kisumu</option>
        <option id="6616" value="6616">Thika</option>
    </select>

    <input type="text" name="minListPrice" onfocus="if(this.value == 'min price') {this.value=''}" onblur="if(this.value == ''){this.value ='min price'}" value="min price" class="select-text">

    

    <input type="text" name="bedrooms" onfocus="if(this.value == 'beds') {this.value=''}" onblur="if(this.value == ''){this.value ='beds'}" value="beds" class="select-text">

    
    

    <input type="text" name="streetNames" onfocus="if(this.value == 'address') {this.value=''}" onblur="if(this.value == ''){this.value ='address'}" value="address" class="select-add" id="ihf-address">

    <input type="hidden" name="streetNumber" class="st_num">
    <input type="hidden" name="streetName" class="st_name">

    <select class="select" name="propertyType" id="ihf-prop-type">
        <option value="SFR,CND">property type</option>
        <option value="SFR">House </option>
        <option value="LL">Land</option>
        <option value="RI">Residential</option>
        <option value="RNT">Rental</option>
        <option value="COM">Commercial</option>
    </select>

    <input type="text" name="maxListPrice" onfocus="if(this.value == 'max price') {this.value=''}" onblur="if(this.value == ''){this.value ='max price'}" value="max price" class="select-text">
    

    <input type="text" name="bathCount" onfocus="if(this.value == 'baths') {this.value=''}" onblur="if(this.value == ''){this.value ='baths'}" value="baths" class="select-text">
    

    <input type="text" name="listingNumber" onfocus="if(this.value == 'mls #') {this.value=''}" onblur="if(this.value == ''){this.value ='mls #'}" value="mls #" class="select-num">
    
    
    <input type="submit" value="" class="sub" />
</form>
```
```
<script type="text/javascript">
  jQuery('#ihf-search').submit(function(){
    var mls_num = jQuery('.select-num').val();
    var add = jQuery('.select-add').val();

    if (mls_num == 'mls #'){
      jQuery('.select-num').removeAttr('name');
      if (add == 'address'){
        jQuery('#ihf-address').removeAttr('name');
      }else{
        jQuery('mls-hidden').attr('name','ihf-type');
        jQuery('.select-text').removeAttr('name');
        jQuery('#ihf-prop-type').removeAttr('name');
      }
    }else{
      jQuery('.select-add').removeAttr('name');
      jQuery('.select-text').removeAttr('name');
      jQuery('.select').removeAttr('name');
      jQuery('mls-hidden').attr('name','ihf-type');
    }
  });
  var get_num = '';
  var counters = 0;
  var my_num ='';

  setInterval(function(){
    var list_number = jQuery('.select-add').val();

    if(jQuery.isNumeric(list_number)==true)
    {
      counters = 0;
      jQuery('.st_num').val(list_number);
      my_num = jQuery('.st_num').val().length;
      counters = counters + my_num
    }


    if(jQuery.isNumeric(list_number)!=true)
    {
      var new_text = list_number.substr(counters);
      jQuery('.st_name').val(new_text);
    }

  },1000);
</script>
```
August 4, 2015 at 5:32 am #206052

Mottie
Member

Hi @anthonyjones!

First off, all the inline javascript can be replaced with placeholder

So, this

<input type="text" name="minListPrice" onfocus="if(this.value == 'min price') {this.value=''}" onblur="if(this.value == ''){this.value ='min price'}" value="min price" class="select-text">

becomes this

<input type="text" name="minListPrice" placeholder="min price" class="select-text">

I added your code to this demo (without the form action) and although I’m really not sure what the setInterval function is trying to accomplish, the javascript itself appears to be working.

Maybe it could use some validation code, because it accepts a search without entering anything at all.

So, in that demo I filled in all the fields and noticed this query in the console:

Resource interpreted as Document but transferred with MIME type application/json: "http://fiddle.jshell.net/_display/?propertyCategory=RES&newSearch=true&streetNumber=123+&streetName=main&listingNumber=999999".

Do all those query values appear correct? Is there supposed to be a + after the streetNumber?

It is difficult to test this on the main site since the page changes and the console message is lost. But when the blank result page appears, I noticed the following messages in the console.

Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-content/plugins/optima-express/css/areaPicker.css@ver=3.6.1”.
Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-content/plugins/optima-express/css/chosen.css@ver=3.6.1”.
Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-content/plugins/optima-express/css/ihlayout.css@ver=3.6.1”.
Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-content/plugins/optima-express/css/ih-lib-override.css@ver=3.6.1”.
Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-content/plugins/optima-express/css/jquery-ui-1.10.3.custom.min.css@ver=3.6.1”.
Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-content/plugins/spatialmatch-free-lifestyle-search/third-party/jquery/css/jquery-ui-custom.css@ver=3.6.1”.
Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-content/plugins/spatialmatch-free-lifestyle-search/css/spatialmatch.css@ver=3.6.1”.
Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-content/plugins/wp-video-lightbox/css/prettyPhoto.css@ver=3.6.1”.
Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-content/plugins/wp-video-lightbox/wp-video-lightbox.css@ver=3.6.1”.
Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-content/plugins/hji-membership/resources/styles/common.css@ver=3.6.1”.
Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-content/plugins/hji-membership/resources/styles/essential.min.css@ver=3.6.1”.
Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-content/plugins/contact-form-7/includes/css/styles.css@ver=3.7.2”.
Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-content/plugins/optima-express/widget/css/style.css@ver=3.6.1”.
Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-content/plugins/AIOS_Listings/_view/jquery/colorbox/css/colorbox.css@ver=3.6.1”.
Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-content/plugins/hji-responsive-idx/resources/styles/responsive-idx.css@ver=3.6.1”.
Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-content/plugins/hji-responsive-idx/resources/styles/style.css@ver=3.6.1”.
Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-content/plugins/hji-responsive-idx/third-party/colorbox/colorbox.css@ver=3.6.1”.
Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-content/plugins/hji-responsive-idx…ird-party/jquery_thumbnail_scroller/jquery.thumbnailScroller.css@ver=3.6.1”.
Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-content/plugins/hji-responsive-idx/third-party/jquery.bxslider/jquery.bxslider.css@ver=3.6.1”.
Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-content/plugins/cyclone-slider-2/templates/dark/style.css@ver=2.8.4”.
Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-content/plugins/cyclone-slider-2/templates/default/style.css@ver=2.8.4”.
Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-content/plugins/cyclone-slider-2/templates/standard/style.css@ver=2.8.4”.
Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-content/plugins/cyclone-slider-2/templates/thumbnails/style.css@ver=2.8.4”.
Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/AIOS_Listings/styles.css@ver=3.6.1”.
Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-includes/js/thickbox/thickbox.css@ver=20121105”.
GET http://www.fitnesssolutions.co.ke/fonts.googleapis.com/css@family=Lato_3A300,400,700
GET http://www.fitnesssolutions.co.ke/fonts.googleapis.com/css@family=EB+Garamond 404 (Not Found)
GET http://www.fitnesssolutions.co.ke/favicon.ico 404 (Not Found)
?propertyCategory=RES&newSearch=true&cityId[]=6419&minListPrice=100&bedrooms=2&streetNumber=&street…:45 Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://www.fitnesssolutions.co.ke/new/wp-content/plugins/hji-responsive-idx/resources/styles/responsive-idx-print.css@ver=3.6.1”.
ping?client_id=149037818463361&domain=www.fitnesssolutions.co.ke&origin=1&redirect_uri=http%3A%2F%2…:1 Given URL is not allowed by the Application configuration: One or more of the given URLs is not allowed by the App’s settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App’s domains.

So, part of the issue is that the server doesn’t have the correct mime-type set for both the css and javascript.

I’m not an expert on server-side code, so you might want to ask this question in the “PHP Problems” forum.

August 5, 2015 at 2:22 am #206094

anthonyjones
Participant

Hi @ mottie,

Thanks for this…. makes some sense now. A quick one, somebody was telling me there is a way to do search of a site’s content using a site map?

Any idea how that works?

Thanks once more

August 5, 2015 at 8:31 am #206115

Mottie
Member

That sounds like server-side stuff which I don’t know very well. Try the “Php Problems” forum. Sorry :(
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

The forum ‘JavaScript’ is closed to new topics and replies.