Docs

[LiamHindson]

Hi,

I have jquery on my home page that isn’t responding (https://www.teachtutti.com).

The jquery is supposed to create a drop-down field when the user begins entering the name of their musical instrument in the search form above-the-fold. This drop-down is important so the user can select their instrument and won’t accidentally type in the instrument incorrectly and be met with an error.

The dropdown was working correctly but I’ve just noticed that now this isn’t doing anything. I’m not sure if the problem is just for me or all ip addresses.

Thanks,

Liam

[Rahul]

Hey There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[LiamHindson]

This reply has been marked as private.

[Rupok]

Hi Liam,

Thanks for writing back. It seems you have placed the script within <script> tag. You don’t need to use <script> tag; just place the raw code. If the code is correct; it will work for sure.

Cheers!

[LiamHindson]

Hi Rupok,

I’m afraid this doesn’t seem to be solving the issue. I’ve also added the script into the body of the page in case this was the problem. Finally, I flushed all the caches and deleted my browsing history, including cookies. Is the drop-down working from your IP address (try typing “piano” into the field)?

The only I have changed today on the home page is styling tweaks in the theme css file. I haven’t done anything else that could have caused this that I know of.

Thanks,

Liam

[Lely]

Hello Liam,

We’re sorry for the confusion. We’re talking about the code on Appearance > Customize > Custom > Edit Global Javascript:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-46938653-1', 'auto');
  ga('send', 'pageview');

</script>

Remove the script tag. Should be like this:

  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-46938653-1', 'auto');
  ga('send', 'pageview');

Then upon checking the RAW CONTENT ELEMENT, you have added an entire HTML code. That is not needed. Just add something like this:

 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
jQuery( document ).ready(function() {

jQuery( "#edit-submit-findtutor" ).click(function( event ) {
  event.preventDefault();

   if( !jQuery('#instrument').val() ) {
         jQuery('#instrument').effect( "shake" );
    }
  
   else if( !jQuery('#edit-distance-postal-code').val() ) {
         jQuery('#edit-distance-postal-code').effect( "shake" );
   } else {
     
    jQuery('#main-search').submit();
   }
 
});

jQuery(function() {
    var availableTags = [
    "Bassoon", "Cello", "Clarinet", "Drums", "Double bass", "Flute", "French horn", "Guitar", "Harp", "Music theory", "Oboe", "Piano", "Piccolo", "Recorder", "Saxophone", "Singing", "Trombone", "Trumpet", "Tuba",  "Viola", "Violin"
    ];
    jQuery( "#instrument" ).autocomplete({
      source: availableTags,
appendTo: '#edit-subjects-wrapper'
    });
  });
 });
</script>
    <div class="teacher-search">
        <div class="container2">
            <h1 class="h1search2" id="home-search-title">Book a local music tutor</h1>
            <div class="content_block">
                <div class="grid-container" id="search-box">
                    <form action="staging.teachtutti.com/tutor-search/"
                    class="grid-100 tablet-grid-100 grid-parent" id=
                    "main-search" method="get" name="main-search">
                        <div class="left-padding grid-20 tablet-grid-25" id=
                        "search-box-label">
                            <h1>Find a tutor for </h1>
                        </div>
                        <div class=
                        "form-item grid-40 tablet-grid-40 mobile-grid-50 grid-parent"
                        id="edit-subjects-wrapper">
                            <a id="focus-search-box" name=
                            "focus-search-box"></a><span aria-live="polite"
                            class="ui-helper-hidden-accessible" role=
                            "status"></span><input autocomplete="off"
                            autofocus="" class=
                            "form-text ui-autocomplete-input" id="instrument"
                            name="instrument" placeholder="Instrument" type=
                            "text">
                        </div>
                        <div class="grid-5 tablet-grid-5 hide-on-mobile">
                            <h1>in</h1>
                        </div>
                        <div class=
                        "form-item grid-20 tablet-grid-15 mobile-grid-30 grid-parent"
                        id="edit-distance-postal-code-wrapper">
                            <input class="form-text" id=
                            "edit-distance-postal-code" maxlength="128" name=
                            "postcode" placeholder="Postcode" type="text">
                        </div>
                        <div class=
                        "views-exposed-widget views-submit-button hide-on-desktop hide-on-tablet grid-parent mobile-grid-20">
                        <button class="form-submit btn" id=
                        "edit-submit-findtutor-mobile" type=
                            "submit"><i class="iconfont icon-search"></i></button>
                        </div>
                        <div class=
                        "views-exposed-widget views-submit-button grid-15 tablet-grid-15">
                        <button class="form-submit home-search-button" id=
                        "edit-submit-findtutor" type="submit">Search</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

<style>
.ui-menu-item:hover {font-weight:bold;}
#ui-id-1 {z-index: 1000 !important; list-style: outside none none !important; padding: 20px !important; margin-top: -40px !important;border-radius: 20px;
    background: white none repeat scroll 0 0 !important; z-index: 1000 !important; cursor: pointer; padding-right: 0 !important;
    border: 1px solid #71a6c5 !important; color: #000000 !important;
    #instrument {z-index: 10000 !important;}
</style>

Hope this helps.

[Author]

Posts