attr() or removeAttr() doesn't work anymore when in ajax success instructions

Question

I try to achieve a simple coding, but for some reason I can't understand, attributes doesn't work anymore in ajax success function.

$('#modaleCalendarEvent #tbPrenomPatient, #modaleCalendarEvent 
    #tbNomPatient').change(function(){
    CheckNomEtPrenom();
});

....

function CheckNomEtPrenom(){
    var prenom = $('#modaleCalendarEvent #tbPrenomPatient').val();
    var nom = $('#modaleCalendarEvent #tbNomPatient').val();

    ......

    $.ajax({
        type: "POST",
        url: "actions/blahblah.php",
        data: params,                  
        dataType: "json",
        dataFilter: function(data, type){ 
            return data;
        },
        error: function(xhj, statut, thrown){
            alert('Erreur: '+xhj.responseText);
        },
        success: function(resultat){
            if(resultat.Valeur == -1 || resultat.Valeur == 1)
            {
                $('#modaleCalendarEvent #cbxModalePatients').val(resultat.PatientID);
                $('#modaleCalendarEvent #tbManuel').removeAttr('checked'); // HERE
                $('#modaleCalendarEvent #tbManuel').trigger('change');
                Notify("info", prenom + " " + nom + " already exists. Selection updated");
            }
            else // -2 existe pas en base
            {
                VerifieMetier();
            }

            HideLoaderPage();
        }
    });
}

Before I call ajax, I can (even by console) add or remove the attribute 'checked' on #tbManuel successfully. But when I'm in my success ajax section, remove or add attribute doesn't work. Graphically it doesn't check or uncheck the checkbox. and no event raised.

I can trigger it manually, but still the checked atttribute is not set or deleted and I can't test it.

A timer with instruction laucnhed after some seconds doesn't work neither. And I go in my if inside success instructions, my "resultat.Valeur" is correctly set. In debug in chrome I can see step by step.

Does someone has an explaination? and maybe a solution ? It's a simple case but really weird. Like the ajax success instructions are in another context or something like that.

Thanks a lot

um, is it a checkbox? you should not be removing attributes... https://stackoverflow.com/questions/17420534/check-uncheck-checkbox-using-jquery — epascarello, Oct 03 '17 at 14:21
Assuming `#tbManuel` is a checkbox, don't use `removeAttr()`. Use `prop('checked', false)` instead. Also, make sure you've not duplicated any `id` attributes in your page — Rory McCrossan, Oct 03 '17 at 14:21
I will check all these points, And will use 'prop' instead of removeAttr. I'll keep you informed. — Iainh, Oct 03 '17 at 14:24
Free link: https://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery — Pierre Tassel, Oct 03 '17 at 14:28

score 1 · Accepted Answer · answered Oct 03 '17 at 14:25

As Rory McCrossan wrote, don't use attributes to check/unckeck as it will produce an unknown behaviour.

Please use $('[selection]').prop('checked', false) if you want to force the input to be unchecked, or $('[selection]').click() if you only want to toggle its state.

score 0 · Answer 2 · answered Oct 03 '17 at 14:52

0

Ok it's working. Just by trigering click on the checkbox , it does the trick.

Thanks a lot all for help and fast answers ! I learn also to use prop() instead of removeattr() and attr()

Have a nice day !

answered Oct 03 '17 at 14:52

Iainh

33
4

attr() or removeAttr() doesn't work anymore when in ajax success instructions

2 Answers2