2016-07-14 4 views
0

dynamisch die Eingabe von Text-ID erstellen und es in JavaScript und Belastungswerte in UI

osapi.XXXX.XXXXXX.people.get({id: userID}).execute(function (person) { 
 
     var profile = person.jive.profile; 
 
     var profileName = person.name; 
 
     var profilePhNumber = person.phoneNumbers; 
 
     profile.forEach(function (obj) { 
 
      if (obj.jive_label === 'Department') { 
 
       console.log('department value is: ' + obj.value); 
 
       document.getElementById("getDepartmentValue").value = obj.value; 
 
      } 
 
      if (obj.jive_label === 'Office') { 
 
       console.log('Office location is: ' + obj.value); 
 
       document.getElementById("getLocationValue").value = obj.value; 
 
      } 
 
      if (obj.jive_label === 'Languages') { 
 
       console.log('Languages known are: ' + JSON.stringify(obj.values)); 
 
       document.getElementById("getLanguagesValue").value = JSON.stringify(obj.values); 
 
      } 
 
     }); 
 

 
     for(var profileFormatName in profileName){ 
 
      if(profileFormatName === 'formatted'){ 
 
       console.log('profile name: ' +profileName[profileFormatName]); 
 
       document.getElementById("getPersonNameValue").value = profileName[profileFormatName]; 
 
      } 
 
     } 
 
     profilePhNumber.forEach(function (obj) { 
 
      if (obj.jive_label === 'Phone Number') { 
 
       console.log('Phone number is: ' + obj.value); 
 
       document.getElementById("getPhoneNumberValue").value = obj.value; 
 
      } 
 
     }); 
 
    });
<button id="target_people_picker" class="btn btn-primary" autofocus>getUser</button> 
 
        <table border="1"> 
 
         <tr> 
 
          <td>Name:</td> <td><input type="text" id="getPersonNameValue" value="" /></td> 
 
         </tr> 
 
         <tr> 
 
          <td>Department:</td> <td><input type="text" id="getDepartmentValue" value="" /></td> 
 
         </tr> 
 
         <tr> 
 
          <td>Location:</td> <td><input type="text" id="getLocationValue" value="" /></td> 
 
         </tr> 
 
         <tr> 
 
          <td>Phone Number:</td> <td><input type="text" id="getPhoneNumberValue" value="" /></td> 
 
         </tr> 
 
         <tr> 
 
          <td>Languages:</td> <td><input type="text" id="getLanguagesValue" value="" /></td> 
 
         </tr> 
 
        </table>

Above bekommen, ist mein JS und HTML-Schnipsel.

Der obige Code funktioniert, wenn im obigen Fall nur eine Benutzer-ID wie 100 übergeben wird. Wenn ich das gleiche Code-Snippet wiederholen möchte, wenn es 10 Benutzer gibt, dann muss ich sicherstellen, dass eine neue dynamisch eingegebene Textfelder erstellt und ihre ID von document.getElement an javascript übergeben wird, damit JS Wert an die UI senden kann .
Wie kann ich sicherstellen, dass für alle 10/20/40 Benutzer den gleichen Code-Schnipsel laufen, aber es sollte neue Felder

Beispiel erstellen: -

Antwort

0

bekam die Antwort, ich bin Entsendung hier so, dass, wenn jemand will es versuchen.

$(function() { 
 
    var scntDiv = $('#divID'); 
 
    var i = $('#divID p').size() + 1; 
 

 
    $('#clickHereID').live('click', function() { 
 
     $('<p><input type="text" id="getPersonNameValue" size="20" name="inputTextFieldName_' + i +'" /></label></p>').appendTo(scntDiv); 
 
     $('<p><input type="text" id="getDepartmentValue" size="20" name="inputTextFieldName_' + i +'" /></label></p>').appendTo(scntDiv); 
 
     $('<p><input type="text" id="getLocationValue" size="20" name="inputTextFieldName_' + i +'" /></label></p>').appendTo(scntDiv); 
 
     $('<p><input type="text" id="getPhoneNumberValue" size="20" name="inputTextFieldName_' + i +'" /></label></p>').appendTo(scntDiv); 
 
     $('<p><input type="text" id="getLanguagesValue" size="20" name="inputTextFieldName_' + i +'" /></label></p>').appendTo(scntDiv); 
 

 
     i++; 
 
     return false; 
 
    }); 
 
});
<html> 
 
<header><title>This is title</title></header> 
 
<body> 
 
<form id="move-content" action=""> 
 
    <button id="clickHereID" class="btn btn-primary">getUser</button> 
 

 
    <div id="divID" class="emp-attr-dis"> 
 
      <input type="text" id="getPersonNameValue" value="" /> 
 
      <input type="text" id="getDepartmentValue" value="" /> 
 
      <input type="text" id="getLocationValue" value="" /> 
 
      <input type="text" id="getPhoneNumberValue" value="" /> 
 
      <input type="text" id="getLanguagesValue" value="" /> 
 
    </div> 
 

 
</form> 
 
<script type="text/javascript" charset="utf-8" src="javascripts/app/getpeople.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
</body> 
 
</html>

Verwandte Themen