Ajax not working intermittently on some computers

Question

I guess I'm not up-to-date or am missing something really simple. I have the javascript code below, which uses ajax to connect to an external php file which reads the form post'd variables and pulls pricing from a sql database and returns the price, which is updated on the current page. The machine I am testing on uses Windows 7 and the latest version of Chrome browser. The ajax call ALWAYS works. I was in a different office yesterday and tested the code on a Windows 10 machine running the latest Chrome browser and the ajax call seems to never work and no price is updated. I also tried the latest Internet explorer browser on the same Windows 10 machine and it did NOT work. I found another Windows 7 machine at the same location using Chrome and it worked fine on it. What's even crazier is this morning, I tried the code on a Windows 10 machine running the latest Chrome and the first time the page loaded it worked but then quit again.

I keep checking the code and don't see anything, as it works fine on some machines. Any ideas or thoughts would greatly be appreciated.

I am using jQuery v1.12.4. I thought maybe this might have an issue so I tried using 3.1.1 even and nothing changed.

What am I missing? How would I be able to debug the ajax call to see what is actually happening on the computer that it isn't working?

THE JAVASCRIPT CODE:

<script type='text/javascript'>
// Monitor changes to Quantity form field
$('#Quantity').on('keyup', function(event) {
    $.ajax({
        url: 'updatePrice.php',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: $('#OrderDetails').serialize(),
        datatype: 'json',
        success: function(response) {
            $("#showPrice").text('$' + response);
        }
    });
});

function updatePrice() {
    $.ajax({
        url: 'updatePrice.php',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: $('#OrderDetails').serialize(),
        datatype: 'json',
        success: function(response) {
            $("#showPrice").text('$' + response);
        }
    });
}
</script>

THE SHORTENED HTML CODE RELATED TO THE JAVASCRIPT:

Quantity<br><input type="text" name="Quantity" id="Quantity" class="textWidth2" value="">

<img src="images/B&WSelected.png" id="BWimage" onclick="changeImage3(); updatePrice();">

<div class="border-top-color quote_panel">
<span class="quote_title">Your Price:</span>
<span id="showPrice" class="quote_price">$0.00</span>
</div>

You should consider invoking `updatePrice()` on `keyup` instead of duplicating code like that... — MonkeyZeus, Jul 27 '18 at 17:05
You're going to have to do some debugging on your own. Have you checked the developer tools Network tab to see whether the HTTP requests are being made? Have you checked for errors in the console? Have you checked server logs for errors? — Pointy, Jul 27 '18 at 17:05
Additionally, you are missing [`$(document).ready(function(){});`](http://learn.jquery.com/using-jquery-core/document-ready/) — MonkeyZeus, Jul 27 '18 at 17:06
Fourthly, [How to debug AJAX calls](http://stackoverflow.com/a/21617685/2191572) — MonkeyZeus, Jul 27 '18 at 17:11
@MonkeyZeus I have updated my code with your two suggestions.Thanks.Still working on some debugging now. — Rodney, Jul 27 '18 at 17:36
Someone removed my "thirdly" so... Thirdly, stop using `onclick="changeImage3(); updatePrice();"` because it will cause phantom issues for you. — MonkeyZeus, Jul 27 '18 at 17:42
@MonkeyZeus so in place of onclick should I add jquery event listener? — Rodney, Jul 27 '18 at 17:43
Absolutely. I assume you have multiple images, right? so give them a `class="BWimage"` and the relevant `$('.BWimage').on('click', function(){});` code — MonkeyZeus, Jul 27 '18 at 17:45

score 0 · Accepted Answer · answered Jul 27 '18 at 18:59

I finally figured out what was causing the problem I believe. I think it is both 'crossdomain requests' related and encoding issues.

I edited the ajax call by removing the full url (http://www....) from url: and only left the file name and I removed the line

contentType: 'application/json; charset=utf-8',

from the code and now everything seems to work perfectly

function updatePrice() {
    $.ajax({
      url: 'updatePrice.php',
      type: 'POST',
      data: $('#OrderDetails').serialize(),
      datatype: 'json',
      success:function(response){
      $("#showPrice").text('$'+response);
      }
    });
}

score -1 · Answer 2 · answered Jul 27 '18 at 17:28

-1

download jQuery CDN – latest stable version

answered Jul 27 '18 at 17:28

Taif Raoof

354
3
8

Ajax not working intermittently on some computers

2 Answers2