Bouton radio dans une table créée par jquery mobile

J'essaie de remplir un tableau avec les boutons radio de la base de données par jquery mobile. La table est ok quand je le fais directement en HTML, mais en faisant la même table par jscript le résultat n'est pas du tout le même. Dans cet exemple, il n'y a qu'une ligne par table, mais mon but est de créer des lignes de table à partir de la base de données.Bouton radio dans une table créée par jquery mobile

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Page Title</title> 
 

 
    <meta name="viewport" content="width=device-width, initial-scale=1" , charset="utf-8"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
 
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
    <script> 
 
    $(document).on("pageshow", "#page1", function() { 
 
     // Create table 
 
     var retServiceName = 'James Smith by jquery'; 
 

 
     var service_table = $('<table data-role="table" data-mode="columntoggle" class="ui-responsive table-stroke" id="service" data-column-btn-text="Columns..."></table>'); 
 

 
     var service_tr_th = $("<thead><tr><th data-priority='1'>Name</th><th data-priority='2'>Vote</th></tr></thead>"); 
 
     var service_tbody = $('<tbody></tbody>'); 
 
     var service_tr = $('<tr></tr>'); 
 
     var servicefieldset = '<fieldset> data-role="controlgroup" data-type="horizontal" data-mini="false"'; 
 
     var serviceradio0 = '<input type="radio" name="radio-choice-b1" id="radio-choice-c1" value="0"><label for="radio-choice-c1">Yes</label>'; 
 
     var serviceradio1 = '<input type="radio" name="radio-choice-b1" id="radio-choice-d1" value="1"><label for="radio-choice-d1">No</label>'; 
 
     var serviceradio2 = '<input type="radio" name="radio-choice-b1" id="radio-choice-e1" value="2"><label for="radio-choice-e1">Null</label>'; 
 

 
     var service_name_td = $('<td>' + retServiceName + '</td>'); 
 
     var service_name_td2 = $('<td>' + servicefieldset + serviceradio0 + serviceradio1 + serviceradio2 + '</fieldset></td>'); 
 
     service_name_td.appendTo(service_tr); 
 
     service_name_td2.appendTo(service_tr); 
 
     service_tr_th.appendTo(service_table); 
 
     service_tr.appendTo(service_tbody); 
 
     service_tbody.appendTo(service_table); 
 
     service_table.appendTo($("#categories")); 
 

 
     service_table.table(); 
 

 
    }); 
 
    </script> 
 
    <div data-role="page" id="page1"> 
 
    <div data-role="header" data-theme="b"> 
 
     <h1>Voting</h1> 
 
    </div> 
 
    <div role="main" class="ui-content"> 
 

 
     <table data-role="table" data-mode="columntoggle" class="ui-responsive table-stroke" id="service" data-column-btn-text="Columns..."> 
 
     <thead> 
 
      <tr> 
 
      <th data-priority='1'>Name</th> 
 
      <th data-priority='2'>Vote</th> 
 
      </tr> 
 
     </thead> 
 
     <td>James Smith by HTML</td> 
 
     <td> 
 
      <fieldset data-role="controlgroup" data-type="horizontal" data-mini="false"> 
 
      <input type="radio" name="radio-choice-b2" id="radio-choice-c2" value="0"> 
 
      <label for="radio-choice-c2">Yes</label> 
 
      <input type="radio" name="radio-choice-b2" id="radio-choice-d2" value="1"> 
 
      <label for="radio-choice-d2">No</label> 
 
      <input type="radio" name="radio-choice-b2" id="radio-choice-e2" value="2"> 
 
      <label for="radio-choice-e2">Null</label> 
 
      </fieldset> 
 
     </td> 
 
     </table> 
 
     <div id="categories"></div> 
 
    </div> 
 
    </div>

Source

2017-10-13 jopola

Vous pouvez facilement savoir si dans votre code HTML sont des problèmes de copier et la coller dans certains outils en ligne, par exemple Plunker ou Fiddle:

La première chose et la plus évidente à faire attention si vous composez du HTML à partir de données de base de données, est de garder un identifiant unique pour vos éléments HTML. Le reste n'est qu'une question de patience et de persévérance. À mon humble avis le moyen le plus facile d'accomplir une telle tâche ennuyeuse est de composer le code HTML dans une chaîne que vous pouvez toujours vérifier dans un outil en ligne ("Tidy"). À la fin, vous pouvez insérer et améliorer l'intégralité du code HTML dans une seule prise de vue. Pour le nouveau contenu inséré, JQM .enhanceWithin() sur le conteneur suffira, pas besoin de tous les trucs append ici.

$(document).on("pageshow", "#page1", function() { 
 
    var html = ""; 
 
    $("#categories").html(html); // clean-up 
 

 
    // start the tables loop 
 
    var sectionId = "service-1"; // compose unique id's 
 
    html += '<table data-role="table" data-mode="columntoggle" class="ui-responsive table-stroke" id="' + sectionId + '" data-column-btn-text="Columns...">'; 
 
    html += '<thead><tr><th data-priority="1">Name</th><th data-priority="2">Vote</th></tr></thead>'; 
 
    html += '<tbody>'; 
 

 
    // start the rows loop 
 
    html += '<tr>'; 
 
    var retServiceName = 'James Smith by jquery'; 
 
    html += '<td>' + retServiceName + '</td>'; 
 
    html += '<td>'; 
 
    html += '<fieldset data-role="controlgroup" data-type="horizontal" data-mini="false">'; 
 
    var rowId = "radio-choice-b1"; // compose unique id's 
 

 
    // start the choices loop, compose unique id's 
 
    var choiceVal = "0"; 
 
    var choiceId = rowId + "-" + choiceVal; 
 
    var choiceLabel = "Yes"; 
 
    html += '<input type="radio" name="' + rowId + '" id="' + choiceId + '" value="' + choiceVal + '"><label for="' + choiceId + '">' + choiceLabel + '</label>'; 
 

 
    var choiceVal = "1"; 
 
    var choiceLabel = "No"; 
 
    var choiceId = rowId + "-" + choiceVal; 
 
    html += '<input type="radio" name="' + rowId + '" id="' + choiceId + '" value="' + choiceVal + '"><label for="' + choiceId + '">' + choiceLabel + '</label>'; 
 

 
    var choiceVal = "2"; 
 
    var choiceLabel = "Null"; 
 
    var choiceId = rowId + "-" + choiceVal; 
 
    html += '<input type="radio" name="' + rowId + '" id="' + choiceId + '" value="' + choiceVal + '"><label for="' + choiceId + '">' + choiceLabel + '</label>'; 
 

 
    html += '</fieldset>'; 
 
    html += '</td>'; 
 
    html += '</tr>'; 
 

 
    html += '</tbody>'; 
 
    html += '</table>'; 
 
    console.log(html); // check the whole html 
 

 
    $("#categories").html(html); 
 
    $("#categories").enhanceWithin(); 
 

 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Login</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> 
 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div data-role="page" id="page1" data-theme="a"> 
 
    <div data-role="header" data-theme="b"> 
 
     <h1>Voting</h1> 
 
    </div> 
 
    <div role="main" class="ui-content"> 
 
     <table data-role="table" data-mode="columntoggle" class="ui-responsive table-stroke" id="service" data-column-btn-text="Columns..."> 
 
     <thead> 
 
      <tr> 
 
      <th data-priority='1'>Name</th> 
 
      <th data-priority='2'>Vote</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td>James Smith by HTML</td> 
 
      <td> 
 
       <fieldset data-role="controlgroup" data-type="horizontal" data-mini="false"> 
 
       <input type="radio" name="radio-choice-b2" id="radio-choice-c2" value="0"> 
 
       <label for="radio-choice-c2">Yes</label> 
 
       <input type="radio" name="radio-choice-b2" id="radio-choice-d2" value="1"> 
 
       <label for="radio-choice-d2">No</label> 
 
       <input type="radio" name="radio-choice-b2" id="radio-choice-e2" value="2"> 
 
       <label for="radio-choice-e2">Null</label> 
 
       </fieldset> 
 
      </td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
     <div id="categories"></div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Source

2017-10-15 08:11:44 deblocker

Merci artefacts et! La clé du problème était $ ("# categories"). EnhanceWithin(); – jopola

Bouton radio dans une table créée par jquery mobile

Répondre

Questions connexes