0

At the moment i am testing all on localhost but in my live version i am to call a online (http) url.

I have included the latest jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Now the main part of my javascript

<script type="text/javascript">
            $(document).ready(function () {


                $('#theBarcodeA').keyup(function (e) {
                    barcodeA = $(this);
                    // if Enter key was pressed, send the barcode to backend 
                    if ((e.keyCode == 13) && (barcodeA.val().length > 2)) {

                        $('#theBarcodeB').focus();
                        //clean the message/status
                        document.querySelector('#status').innerHTML = '';

                    }

                });
                $('#theBarcodeB').keyup(function (e) {
                    barcodeB = $(this);
                    // if Enter key was pressed, send the barcode to backend 
                    if ((e.keyCode == 13) && (barcodeB.val().length > 2)) {

                        document.querySelector('#status').innerHTML = barcodeA.val()+' '+barcodeB.val();//just testing
                        var codeA = barcodeA.val();
                        var codeB = barcodeB.val();

                        $.ajax({
                            type: "POST",
                            url: "http://localhost/testdomain.com/scannerconnector/connectBars.php",
                            data: 'barcodeA=' + codeA + '&barcodeB=' + codeB,
                            success: function (data) {
    console.log(data);
    console.log(status);
                                $("#status").html(data);
                                // document.querySelector('#status').innerHTML = data;
                            }
                        });


                    }

                });


            });

but i get the " $.ajax is not a function" error message

Pointy
  • 405,095
  • 59
  • 585
  • 614
alex
  • 4,804
  • 14
  • 51
  • 86
  • did you load jquery? – Hikmat Sijapati Jan 29 '17 at 15:42
  • @Hekmat the code could not have made it to the `$.ajax()` call without jQuery. – Pointy Jan 29 '17 at 15:43
  • 2
    If you're using jQuery, fwiw, there's no reason to use `document.querySelector()`. That's what the `$()` function does. – Pointy Jan 29 '17 at 15:43
  • @Pointy well the strange thing is if i replace document.querySelector with $ the inner html doesn't update – alex Jan 29 '17 at 15:47
  • 1
    You'd need `$("#status").html(data)` - jQuery returns a jQuery object, so you have to use jQuery APIs and not native DOM APIs. – Pointy Jan 29 '17 at 15:48
  • 1
    @alex html() in jquery innerHTML in js – Jonas Wilms Jan 29 '17 at 15:48
  • 1
    Any other library loaded in page that might also use `$()`? – charlietfl Jan 29 '17 at 15:49
  • 1
    Right, or is it possible that there's another jQuery import that's grabbing one of the "slim" builds without ajax? – Pointy Jan 29 '17 at 15:51
  • @Pointy and charlietfl you are correct. I totally overlooked 'https://code.jquery.com/jquery-3.1.1.slim.min.js' which has been imported as well – alex Jan 29 '17 at 15:53
  • 2
    second load overwrites whole `$` object and there's the problem – charlietfl Jan 29 '17 at 15:54
  • @charlietfl how do make the ajax call without jquery? I found this but wasn't able to get it to work see first answer at http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call – alex Jan 29 '17 at 16:04
  • @alex: Visit http://youmightnotneedjquery.com and type in `ajax` in the search field at the bottom. Solutions will show up below. All of that code can be easily written without jQuery. –  Jan 29 '17 at 16:27

0 Answers0