3
votes

Commutateur BootstrapToggle changer d'état conditionnellement

J'essaie d'utiliser bootstraptoggle dans l'une de mes pages. L'état initial est désactivé / désactivé.

La page charge plusieurs valeurs booléennes et les stocke sous forme de texte masqué. Ensuite, j'ai un script qui les recherche via leurs identifiants. Sur ce texte caché, il devrait faire basculer le curseur.

J'ai pu obtenir le texte masqué et faire la vérification conditionnelle mais je ne suis pas en mesure de basculer le curseur pour une raison quelconque.

Voici mon code:

    <p id="activeFlag_@user1">@item.activeFlag</p>
    <div class="checkbox">
        <label>
            <input id="activeToggle_user1" type="checkbox" data-toggle="toggle" data-on="Enabled" data-off="Disabled">
        </label>
    </div>

Et voici le code html avec lequel je dois travailler:

$(document).ready(function () {
  var flags = [];
  var userID = '',
      toggleSlider = '';

  flags = document.querySelectorAll('*[id^="activeFlag_"]');

  flags.forEach(function (flag) {
    userID = flag.id.split('_')[1];

    // This is where i search for the hidden text
    if (flag.firstChild.data == 'True') {
      // Nothing works here.
      $('#activeToggle_' + userID).bootstrapToggle('toggle');
    }
  });
});

javascript jquery

4 commentaires

Souhaitez-vous essayer d'ajouter console.log à l'intérieur du bloc if (flag.firstChild.data == 'True') et voir si cela fonctionne?

BTW vous avez déjà chargé jQuery , pourquoi avez-vous mélangé du JS ordinaire avec lui? Je pense que vous devriez prendre votre décision, vous en tenir à jQuery ou à JS.

Je suis capable d'entrer dans le bloc if sans aucun problème. J'ajouterai la journalisation dans le bloc if 2morrow puisque je suis à la maison maintenant. Je suis encore au stade de l'apprentissage par la pratique, alors excusez mon mélange de javascript et de jquery. Pourriez-vous préciser quelles lignes sont jquery et lesquelles sont javascript?

Par exemple, JS: document.querySelectorAll ( et flag.firstChild , jQuery: partout où vous avez utilisé $

3 Réponses :

2
votes

Votre code est trop opaque sans aucun exemple de données. Cependant, une chose pourrait être la cause de son problème:

userID = flag.id.split('_@')[1];

Essayez de le remplacer par:

userID = flag.id.split('_')[1];

Ici vous pouvez trouver une explication:

La propriété firstChild renvoie le premier nœud enfant du nœud spécifié, sous la forme d'un objet Node.

La différence entre cette propriété et firstElementChild, est que firstChild renvoie le premier nœud enfant en tant que nœud d'élément, nœud de texte ou nœud de commentaire (selon celui qui est le premier), tandis que firstElementChild renvoie le premier nœud enfant comme nœud d'élément (ignore les nœuds de texte et de commentaire).

Remarque : les espaces à l'intérieur des éléments sont considérés comme du texte et le texte est considéré comme des nœuds (voir "Plus d'exemples").

Mise à jour après l'ajout de l'exemple de code

Pour l'exemple de code que vous avez fourni, vous devez changer l'argument de fractionnement:

if (flag.firstElementChild.data == 'True') {

en :

if (flag.firstChild.data == 'True') {

Merci à twain pour le jsfiddle initial. Je l'ai mis à jour en conséquence: jsfiddle

1 commentaires

flag.firstElementChild a renvoyé null, donc les données sont également nulles.

2
votes

Je suppose que le problème est que la partie suivante n'utilise pas l'ID correct pour la bascule $ ('# activeToggle_' + userID) .bootstrapToggle ('toggle');

Votre identifiant html est activeToggle_user1 , mais la partie js ci-dessus se résoudra probablement en # activeToggle_1 . Le texte user est donc absent ici.

J'ai créé un violon fonctionnel ici: https://jsfiddle.net/pbcrh5d2/

6 commentaires

J'ai copié votre code et remplacé le mien, et j'ai toujours obtenu le même résultat. Ce qui est drôle, c'est que j'ai fait: var sliders = document.querySelectorAll ('* [id ^ = "# activeToggle_"]'); En gros, dites-moi obtenir tous les éléments dont l'id commence par activeToggle_ et a obtenu un tableau rempli.

Je n'ai pas ajusté votre code js, juste votre partie html. Le p-tag contient maintenant activeFlag_user1 au lieu de activeFlag_1 . Je suppose que votre @ user1 contient juste l'identifiant?

C'est vrai, je pensais avoir fait une faute de frappe quelque part mais tout est correct. Je déboguais la section où j'appelle bootstrapToggle ('toggle') `$ ('# activeToggle_' + userID) .bootstrapToggle ('toggle');` Où userID And watchted $ ('# activeToggle_' + userID) et cela m'a donné i.fn.init (0) avec une longueur égale à 0. Wierd!

Quand j'entre dans la console: document.getElementById ('activeToggle_user1') j'obtiens null ...

que contient votre userID dans le forEach ? Juste l'ID (par exemple 1) ou la chaîne entière (par exemple user1). S'il ne s'agit que de l'ID, vous devez simplement changer $ ('# activeToggle_' + userID) .bootstrapToggle ('toggle'); en $ ('# activeToggle_user' + userID) .bootstrapToggle ('bascule');

il contient une chaîne entière comme user1

0
votes

Ok, pour une raison quelconque, asp.net et javascript ont un problème à faire face ensemble. J'ai utilisé asp.net pour fournir du javascript pour créer les chaînes. Je suis donc passé à l'identifiant brut utilisé dans le tableau.

0 commentaires