Question

I’m a beginning programmer on a mac (so I don’t have ie) and built a relatively simple ajax jquery application where based on what $msg is stored in the database, it shows form elements (could be a button, a select/dropdown, or just text and a link) that upon being clicked, go back to the database and change the $msg.

My code works great in Chrome and Firefox, but form elements (at the 5 second lag) revert to where they were when you loaded the page when I tested in all versions of IE. After getting frustrated, I looked up SO answers and read about doctypes sometimes being problematic, so I changed the doctype to the html5 doctype and nothing changed.

Heres my code:

$(document).ready(function() {  



$('.checkIn').click(function() {
    var $e = $(this);
    var data = $e.data("param").split('_')[1] ;
    // gets the id  of button  (1 for the first button)
    // You can map this to the corresponding button in database...
    $.ajax({
        type: "POST",
        url: "checkin.php",
        // Data used to set the values in Database
        data: { "checkIn" : $(this).val(), "buttonId" : data},
        success: function() {
            // Hide the current Button clicked
            $e.hide();
            var $container = $e.closest("div.jcontainer");
            // Get the immediate form for the button
            // find the select inside it and show...

            $container.find('.locationSelect').fadeIn();
        }
    });
});
$('.reset').click(function() {
    var $e = $(this);
    var data = $e.data("param").split('_')[1] ;
    // gets the id  of button  (1 for the first button)
    // You can map this to the corresponding button in database...
    $.ajax({
        type: "POST",
        url: "reset.php",
        // Data used to set the values in Database
        data: { "reset" : $(this).val(), "buttonId" : data},
        success: function() {
            // Hide the current Button clicked
            $e.fadeOut();

            var $container = $e.closest("div.jcontainer");
            // Get the immediate form for the button
            // find the select inside it and show...
            $container.find('.finished').fadeOut();
            $container.find('.checkIn').fadeIn();
        }
    });
});
$('.locationSelect').change(function(e) {
  if($(this).children(":selected").val() === "CheckOut") {
    $e = $(this);
    var data = $e.data("param").split('_')[1] ;
    $.ajax({
        type: "POST",
        url: "checkout.php",
        // Data used to set the values in Database
        data: { "checkOut" : $(this).val(), "buttonId" : data},
        success: function() {
            // Hide the current Button clicked
            $e.fadeOut();
            var $container = $e.closest("div.jcontainer");
            // Get the immediate form for the button
            // find the select inside it and show...
            $container.find('reset').fadeIn();
            $container.find('.finished').fadeIn();

        }
    });
  }
  else{
    $e = $(this);
    var data = $e.data("param").split('_')[1] ;
    // gets the id  of select (1 for the first select)
    // You can map this to the corresponding select in database...
    $.ajax({
        type: "POST",
        url: "changeloc.php",
        data: { "locationSelect" : $(this).val(), "selectid" : data},
        success: function() {
            // Do something here
        }
    });
  }
});
setInterval(function(){

    $('.jcontainer').each(function() {
        var $e = $(this);
        var dataid = $e.data("param").split('_')[1] ;
        $.ajax({
            url: 'heartbeat.php',
            method: 'POST',
            contentType: "application/json",
            cache: true,
            data: { "dataid": dataid },
            success: function(data){


                var msg = $.parseJSON(data);

                if (msg == ""){ //after reset or after new patient that is untouched is added, show checkin
                    $e.find('.checkIn').show();
                    $e.find('.locationSelect').hide();
                    $e.find('.finished').hide();
                    $e.find('.reset').hide();
                }
                if ((msg < 999) && (msg > 0)){ // after hitting "Check In", Checkin button is hidden, and locationSelect is shown
                    $e.find('.checkIn').hide();
                    $e.find('.locationSelect').show();
                    $e.find('.finished').hide();
                    $e.find('.reset').hide();
                    $e.find('.locationSelect').val(msg);
                }
                if (msg == 1000){ //after hitting "Checkout", Option to reset is shown and "Finished!"
                    $e.find('.checkIn').hide();
                    $e.find('.locationSelect').hide();
                    $e.find('.finished').show();
                    $e.find('.reset').show();
                }


            }
       });


    });
  },5000);
});

I tried to comment as much of my code as I could, but basically what the first part does is just upload the $msg to my php page for each type of interaction with form elements (button being clicked, select option being hit, link being clicked). Then the second part is a refresh every 5 seconds to make sure the form element being currently shown on Computer 1 is shown (with a 5 sec lag) on Computer 2.

Thanks for any and all help, and if you need more details/info, just ask! Thanks!

Answer 1

I’m not 100% sure what problem it is you’re experiencing so I’m sorry if this is way off, but it may be that IE is caching your Ajax requests. You can try inserting this before your functions:

$.ajaxSetup({
  cache: false
});

Note: If this works, don’t leave the final code like this. Disabling the Ajax caching for all browsers is not a good idea, but sometimes it needs to be done for older versions of IE. I would recommend utilising IE conditional comments in your HTML, like so:

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie10 lt-ie9 lt-ie8 ie7"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie10 lt-ie9 ie8"> <![endif]-->
<!--[if IE 9]>    <html class="no-js lt-ie10 ie9"> <![endif]-->
<!--[if gt IE 9]><!-->
<html class='no-js'>
  <!--<![endif]-->

Then you can detect IE and the $.ajaxSetup could look like so:

$.ajaxSetup({
  cache: !$('html').hasClass('lt-ie9'); //false if lower than IE9
});