-1

I'm attempting to create a live search page for my database and running into an issue. My jQuery / Ajax does not seem to be working. My compiler is telling me that "$ is not defined" on my document line but I have defined jQuery and used the $(document).ready(function() call. Can anyone shed any light as to what seems to be the issue? I've googled and checked here and I can't find the solution.

Below are some code snippets and a screenshot of what I'm seeing. It looks like the query is working fine, detecting a result, but the jQuery is not displaying the result live as it should be.

jQuery:

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.search-box input[type="text"]').on("keyup input", function(){
        /* Get input value on change */
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings(".result");
        if(inputVal.length){
            $.get("backend-search.php", {term: inputVal}).done(function(data){
                // Display the returned data in browser
                resultDropdown.html(data);
            });
        } else{
            resultDropdown.empty();
        }
    });

    // Set search input value on click of result item
    $(document).on("click", ".result p", function(){
        $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
        $(this).parent(".result").empty();
    });
});
</script>
</head>
<body>
    <div class="search-box">
        <input type="text" autocomplete="off" placeholder="Search Books..." />
        <div class="result"></div>
    </div>
</body>
</html>

enter image description here

enter image description here

In the below images I'm trying to search for an entry containing the title "accounting". When I search correctly, it looks like a record appears but no data is shown. When I type something not fitting a record, it correctly displays no results.

Any and all help is greatly appreciated!

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Collin Meese
  • 25
  • 5
  • 1st question ..Are you connected to Internet. While testing this..? – Confused Apr 22 '17 at 15:49
  • Are you saying that your IDE code linter is telling you $ not defined? Big difference between that and browser throwing that error – charlietfl Apr 22 '17 at 15:49
  • try putting your JS code just before `

    `

     – Ikhlak S. Apr 22 '17 at 15:50
  • @charlietfl Yes. And my Jquery code doesn't look to be executing so my thinking is that is causing the issue. – Collin Meese Apr 22 '17 at 15:51
  • No, that is not the issue at all. `$` is defined in the remote file and your linter can't see that. – charlietfl Apr 22 '17 at 15:51
  • And when you load your page in your browser bypassing your IDE's compilation? – Lixus Apr 22 '17 at 15:52
  • Inspect the actual request in browser dev tools network to see it's status and what is actually returned. Also check console errors in browser – charlietfl Apr 22 '17 at 15:54
  • Open your developer tools and check if jQuery is a function. If it is, that just means that you need do `var $ = jQuery`. If jQuery is undefined, then you should check to see if your server is blocking `https://code.jquery.com/jquery-1.12.4.min.js` for some reason – Joe Lissner Apr 22 '17 at 17:18

2 Answers2

-1

$ is not defined means that jquery isn't loaded, make sure that you put your script src="jquery" on top of everything. Here is the jquery:

getl0st
  • 342
  • 1
  • 10
-1

Perhaps you are behind some proxy that is blocking access to the jquery cdn. If you go to https://code.jquery.com/jquery-1.12.4.min.js in your browser can you see the jquery code or do you get an error?

If that is the case I'd suggest using an alternative CDN or obtaining the library somewhere else and serving locally.

Chris
  • 6,076
  • 11
  • 48
  • 62