Discussion :

[boboss123]

Bonjour,

J'envoie des requêtes ajax pour rafraichir une page web en récupérant un fichier .json.
Lorsqu'une requêtes ajax à réussie, j’exécute le code suivant pour mettre à jour ma page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function succcess(jsonObj){
    if(jsonObj.checkbox1 === "ENABLE"){
        $("#checkbox1").attr("checked", true);
    } else {
        $("#checkbox1").removeAttr("checked");    
    }
    $("#inputbox1").val(jsonObj.inputbox);
}

Code html de la checkbox :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input id="checkbox1" type="checkbox" value="1">

Pour mes tests, j'ai figé la valeur de jsonObj.checkbox1 : il vaut toujours "ENABLE".

A l'ouverture de ma page .html, une première requête ajax est envoyée : la checkbox est bien cochée.
Ensuite, si je click sur ma checkbox pour la décocher et que j'appuie sur un bouton qui envoie une requete ajax pour rafraichir ma page, la checkbox n'est pas cochée à la réception du .json.
=> pourtant le code est bien exécuté car #inputbox1 est bien mis à jour.

Ce que je trouve bizarre, c'est que lorsque je click manuellement sur ma checkbox et que je regarde le code html sous firebug, le code html est toujours (que la checkbox soit cochée ou non) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input id="checkbox1" type="checkbox" checked="checked" value="1">

=> c'est normal ?


D'ou peut venir le problème ?

Merci d'avance

[Bovino]

Tu confonds .attr() et .prop(), c'est-à-dire une propriété HTML et une propriété de l'objet JavaScript associé.

Ton code force la propriété HTML, mais comme des modifications sont survenues au niveau de la propriété JavaScript, elle n'est logiquement pas prise en compte. C'est donc sur la propriété JavaScript qu'il faut agir.

[boboss123]

merci ça fonctionne mieux comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
function succcess(jsonObj){
    if(jsonObj.checkbox1 === "ENABLE"){
        $("#checkbox1").prop("checked", true).change();
    } else {
        $("#checkbox1").prop("checked", false).change();    
    }
    $("#inputbox1").val(jsonObj.inputbox);
}

A noter qu'il faut lancer .change() après modification de la valeur car l’événement n'est pas automatiquement lancé