ajax call checkbox internet explorer - php

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().

Answer 2

In your code fallback function value wont passed for IE.
<input type="checkbox" name="CSQ_DISPLAY" '.$checked .' onchange="changefield(\''.$r ['BC_DOSSIER'].'\',this.checked)">
i.e) in above code onchange="changefield(\''.$r ['BC_DOSSIER'].'\',this.checked)" this.checked will not work for IE, so you can pass as this and get the value in four function, this will work for all the browsers. e.g) like this
<input type="checkbox" name="CSQ_DISPLAY" '.$checked .' onchange="changefield(\''.$r ['BC_DOSSIER'].'\',this)">
and get the checked attribute inside the function.
I hope this will work.