Ajout d'un bouton qui ouvre une boîte de dialogue

-2

Je voudrais obtenir de l'aide pour ajouter un bouton qui ouvre une boîte de dialogue. Probablement c'est facile à faire, mais je n'ai pas réussi à l'implémenter jusqu'ici.Ajout d'un bouton qui ouvre une boîte de dialogue

J'ai la fonction javascript suivante:

function extract_results(jsonDataRaw){ 
    jsonResultSect = jsonDataRaw['result'] 
    retTable = "" 
    retText = "ret text <br/>" 
    for(key in jsonResultSect){ 
     myJ = jsonResultSect[key] 

     a = myJ['a'] 
     b = myJ['b'] 
     c = myJ['c'] 
     init = myJ['INIT1'] + myJ['INIT2'] 
     r = myJ['RUNNING'] 

     retTable += "<tr><td><td>" + key + "</td><td>" +a + "</td><td>" + b + "</td><td>" + c + "</td><td>" + init + "</td><td>" + r + "</td></tr>" 

    } 
    return retTable 
}

En outre, j'ai la forme suivante:

 <div id="contactdiv"> 
       <form class="form" action="#" id="contact"> 
        <img src="images/button_cancel.png" class="img" id="cancel" /> 
        <h3>Contact Form</h3> 
        <hr/> 
        <br/> 
        <label>Name: <span>*</span> 
        </label> 
        <br/> 
        <input type="text" id="name" placeholder="Name" /> 
        <br/> 
        <br/> 
        <label>Email: <span>*</span> 
        </label> 
        <br/> 
        <input type="text" id="email" placeholder="Email" /> 
        <br/> 
        <br/> 
        <label>Contact No: <span>*</span> 
        </label> 
        <br/> 
        <input type="text" id="contactno" placeholder="10 digit Mobile no." /> 
        <br/> 
        <br/> 
        <label>Message:</label> 
        <br/> 
        <textarea id="message" placeholder="Message......."></textarea> 
        <br/> 
        <br/> 
        <input type="button" id="send" value="Send" /> 
        <input type="button" id="cancel" value="Cancel" /> 
        <br/> 
       </form> 
      </div>

I'v a pris cette forme de la link suivante.

Pour chaque ligne de retTable, je veux ajouter une colonne supplémentaire avec un simple bouton qui va faire apparaître une boîte de dialogue avec le formulaire ci-dessus, et envoyer key en tant que paramètre.

Malheureusement, je n'ai pas réussi à combiner cet exemple dans mon code. J'ai été en mesure de créer une fenêtre contextuelle simple qui comprend le formulaire, mais je veux juste la boîte de dialogue, et envoyer key en paramètre.

Source

2015-12-25 Omri

des points-virgules peuvent être en option dans certains cas, en javascript (tant que personne ne « use strict » est utilisé), mais ils ne devraient pas être les inclure pour garder votre code propre et structuré et pour éviter un comportement inattendu ... – Icepickle

Ma solution proposée affiche une fenêtre contextuelle div - que vous pouvez, bien sûr, appeler comme un dialogue. Un bouton a été ajouté à une nouvelle colonne pour chaque ligne de votre objet de données. En cliquant sur le bouton affiche la fenêtre contextuelle, en passant dans l'index clé. Espérons que cela suffise pour vous lancer. Mon exemple passe juste la clé, comme vous l'avez demandé, mais peut-être que vous voulez la valeur à la place. Quoi qu'il en soit, j'espère que cela aidera.

<head> 
 
    <style> 
 
    popup { 
 
     background-color: #eee; 
 
     display: none; 
 
     width: 300px; 
 
     height: 400px; 
 
     margin: 0 auto; 
 
     border-style: solid; 
 
     border-width: 2px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body onload="start()"> 
 
    <div> 
 
    <table id='table'> 
 

 
    </table> 
 
    </div> 
 
    <popup id='popup'> 
 
    <div id="contactdiv"> 
 
     <form class="form" action="#" id="contact"> 
 
     <img src="images/button_cancel.png" class="img" id="cancel" /> 
 
     <h3>Contact Form</h3> 
 
     <h3 id='the-key'>Key: </h3> 
 
     <hr/> 
 
     <br/> 
 
     <label>Name: <span>*</span> 
 
     </label> 
 
     <br/> 
 
     <input type="text" id="name" placeholder="Name" /> 
 
     <br/> 
 
     <br/> 
 
     <label>Email: <span>*</span> 
 
     </label> 
 
     <br/> 
 
     <input type="text" id="email" placeholder="Email" /> 
 
     <br/> 
 
     <br/> 
 
     <label>Contact No: <span>*</span> 
 
     </label> 
 
     <br/> 
 
     <input type="text" id="contactno" placeholder="10 digit Mobile no." /> 
 
     <br/> 
 
     <br/> 
 
     <label>Message:</label> 
 
     <br/> 
 
     <textarea id="message" placeholder="Message......."></textarea> 
 
     <br/> 
 
     <br/> 
 
     <input type="button" id="send" value="Send" /> 
 
     <input type="button" id="cancel" value="Cancel" /> 
 
     <br/> 
 
     </form> 
 
    </div> 
 
    </popup> 
 
</body> 
 

 
<script> 
 
    function start() { 
 
    var data = { 
 
     'result': [{ 
 
     'a': 'a', 
 
     'b': 'b', 
 
     'c': 'c', 
 
     'INIT1': 3, 
 
     'INIT2': 5, 
 
     'RUNNING': 'YES' 
 
     }, { 
 
     'a': 'a', 
 
     'b': 'b', 
 
     'c': 'c', 
 
     'INIT1': 3, 
 
     'INIT2': 5, 
 
     'RUNNING': 'NO' 
 
     }] 
 
    }; 
 
    extract_results(data); 
 
    } 
 

 
    function extract_results(jsonDataRaw) { 
 
    var jsonResultSect = jsonDataRaw['result']; 
 
    var retTable = ""; 
 
    var retText = "ret text <br/>"; 
 
    for (key in jsonResultSect) { 
 
     var myJ = jsonResultSect[key] 
 

 
     var a = myJ['a'] 
 
     var b = myJ['b'] 
 
     var c = myJ['c'] 
 
     var init = myJ['INIT1'] + myJ['INIT2'] 
 
     var r = myJ['RUNNING'] 
 

 
     table.innerHTML += "<tr><td><td>" + key + "</td><td>" + a + "</td><td>" + b + "</td><td>" + c + "</td><td>" + init + "</td><td>" + r + "</td><td><button onclick='openDialogue(" + key + ")'>Show Key</button></td></tr>" 
 

 
    } 
 
    return retTable 
 
    } 
 

 
    function openDialogue(key) { 
 
    document.getElementById('popup').style.display = 'block'; 
 
    document.getElementById('the-key').innerHTML = 'Key: ' + key; 
 
    } 
 
</script>

Source

2015-12-26 00:44:30

Ajout d'un bouton qui ouvre une boîte de dialogue

Répondre

Questions connexes