Question

I’m having this little problem with internet explorer and ajax.
So first I used just php, and everything, worked, but because I don’t want to reload the page, I use ajax.

So I have a form with a checkbox. When someone clicks on the checkbox, my ajaex is called and the input is changed in the db. In firefox there is no problem, but It doesn’t work in internet explorer.

Here’s a part of my code:

<script language="javascript" type="text/javascript">
function changefield($doss, $display){
    $.get("update.php",{dossier: $doss, CSQ_DISPLAY:$display});
    alert("test");
}
</script>


echo '<form id="'.$r ['BC_DOSSIER'].'" method="get" action="">
<input type="checkbox" name="CSQ_DISPLAY" '.$checked .' onchange="changefield(\''.$r ['BC_DOSSIER'].'\',this.checked)">
</form>'; 

It seems that in explorer, I only get the alert when the checkbox was checked. (Problem because it first reads the db if it must be checked or not, so you can change it later).

Does someone know where I went wrong?

Thank you very much in advance for the answers.

Answer 1

I would prefer to define it like this, I hate using onclick in my HTML:

edit FIXED (registered to change instead of click)
edit Wrapped in $(document).ready()
edit Added a click event as well

<?php
  echo '<input class="ajax_check" id="check_'.htmlspecialchars($r['BC_DOSSIER']).'" type="checkbox" name="CSQ_DISPLAY" '.$checked .' />';
?>
<script type="text/javascript">
  $(document).ready(function() {
    $('input.ajax_check').click(function() {
      this.blur();
    });
    $('input.ajax_check').change(function() {
      var dossierId = this.id.slice(6);
      var isChecked = (this.checked) ? 1 : 0; // better to explicitly convert bool to int for HTTP requests
      $.get('update.php',{
        dossier: dossierId,
        CSQ_DISPLAY: isChecked
      });
      alert('test');
    });
  });
</script>

This will register that handler to all inputs with the className ‘ajax_check’, without leaving a function cluttering up the window object, and without messing up your HTML. Try it out and see if it fixes the problem – it may not as it does basically the same thing, but it’s a better way of doing it IMHO. If you still have a problem, come back to me and we’ll debug it.

Note that using this approach, it is important that the <script> is executed after the DOM is ready, so it should either be defined in the body after the checkbox or (better) wrapped inside $(window).load() or (best) $(document).ready().