Вставка html-данных в список SharePoint с использованием JavaScript - PullRequest
Новая
       13

Вставка html-данных в список SharePoint с использованием JavaScript

0 голосов
/ 06 ноября 2018

Я попытался вставить свои данные в мой список SharePoint безрезультатно, любезно помогите с тем, что может быть не так с моим кодом .. Я новичок в SharePoint.

Когда вы нажимаете кнопку Отправить, ничего не появляется, вместо этого, он добавляет # в конце URL. В разделе Реквестер, он должен автоматически выбирать, когда пользователь вошел в ofiice365.

В разделе «Начальник отдела» следует выбирать руководителей отделов в зависимости от того, где я работаю, т. Е. Если я работаю инженером, должен появиться только мой начальник, в противном случае должны появиться продажи, только начальник отдела продаж, а в случае безопасности - только мой начальник. 

<script type="text/javascript">

    function save() {
      var siteUrl = 'https://mysite.sharepoint.com/sites/';
      //receiving inputs
      var pcv = document.getElementById('pcv').value;
      var amountFigures = document.getElementById('amountFigures').value;
      var amountWords = document.getElementById('amountWords').value;
      var reason = document.getElementById('reason').value;
      var requester = document.getElementById('requester').value;
      var phone = document.getElementById('phone').value;      
      var approver = document.getElementById('approver').value;
                
      var clientContext = new SP.ClientContext(siteUrl);
      var oList = clientContext.get_web().get_lists().getByTitle('myListName');
      var itemCreateInfo = new SP.ListItemCreationInformation();
      this.oListItem = oList.addItem(itemCreateInfo);
      
      //Field list Sharepoint
      oListItem.set_item('pcv', Title);
      oListItem.set_item('amountFigures', amountFigures);
      oListItem.set_item('amountWords', amountWords);
      oListItem.set_item('reason', reason);
      oListItem.set_item('requester', requester);
      oListItem.set_item('phone', phone);
      oListItem.set_item('approver', approver);
      oListItem.update();
      clientContext.load(oListItem);
      clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
      }
      
      function onQuerySucceeded() {
        alert('The record was created successfully');
      }
      function onQueryFailed(sender, args) {
        alert('Request failed.');
      }
      
function randomNumber(len) {
    var randomNumber;
    var n = '';

    for(var count = 0; count < len; count++) {
        randomNumber = Math.floor(Math.random() * 10);
        n += randomNumber.toString();
    }
    return n;
}

document.getElementById("pcv").value = randomNumber(9);
</script>
[data-list-name]{
  min-height: 100px; 
    overflow: hidden;
    clear: both;
background_color: red;
}
[data-list-name] input[type="file"] {
    border:none;
    box-shadow:none;
    padding-left: 0;
    padding-right: 0;
}
[data-list-name].loading{
    background:url('spinner.gif') no-repeat center center #fff;    
}
[data-list-name] .error-msg, 
[data-list-name] .success-message {
  background: #f9d3d3;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid #dfabab;
    border-radius: 4px;
  font-size: 12px;
    font-style: italic;
    color: #5f5f5f;
    margin-bottom: 20px;
    margin-top: 5px;
}
[data-list-name] .success-message {
    background: #dff8e6;
    border: 1px solid #b9eac6;
}


[data-list-name] .error {
    color: #ef0000;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 12px;
}
[data-list-name] .btn-submit { 
    background-color: #5cb85c;
    border-color: #4cae4c;
    padding: 7px 10px;
    clear: both;
    display: block;
    width: 72px;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;     
}

[data-list-name] .btn-submit:hover {
    color: #fff;
    background-color: #449d44;
    border-color: #398439;
    text-decoration: none;
    cursor: pointer;
}
[data-list-name] h5 {
    margin-bottom: 15px;
    font-weight: 700;
}

::-webkit-input-placeholder {
    color: #ababab !important;
    font-size: 12px !important;        
 } 
:-moz-placeholder { /* Firefox 18- */
     color: #ababab !important;
     font-size: 12px !important;         
}
::-moz-placeholder {
    color: #ababab !important;
    font-size: 12px !important;        
 }
:-ms-input-placeholder {  
    color: #ababab!important;
    font-size: 12px !important;        
 }
 
input:focus::-webkit-input-placeholder { color:transparent !important; }
input:focus:-moz-placeholder { color:transparent  !important; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent  !important; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent  !important; } /* IE 10+ */

.btn-submit {
    color:#fff !important;
    clear:both;
}
#h3{
  text-align: center;
  background-color: #272940;
  color: red;
  height: 100px; 
  padding-top: 30px;
}
#id{
  text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
       
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery.SPServices-0.7.2.js "></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script src=http://ajax.aspnetcdn.com/ajax/jquery-2.1.1.js> </script>
    <script src=https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js></script>
<!--CHANGE THE SRC AND HREF OF THE JS AND CSS HERE!!!-->
<script src=http://ajax.aspnetcdn.com/ajax/jquery-2.1.1.js> </script>
    <script src=https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js></script>
<div class="container" style="border: 2px solid black">
<!--ENTER YOUR LIST NAME HERE!!! INSIDE data-list-name-->
<div class="row" data-list-name="Petty Cash" id="form">
<h3 id="h3">PETTY CASH VOUCHER</h3> <br><br>
      <div class="col-sm-6">
      <table id="tableData" class="tableData" type="hidden">
          <tr><thead>
            <th>Account</th>
            <th>Cost Centre</th>
            <th>Amount</th></thead>
          </tr>
          <tr>
            <td><input type="text" name="" size="12"></td>
            <td><input type="text" name="" size="12"></td>
            <td><input type="text" name="" size="9.5"></td>
          </tr>
          <tr>
            <td><input type="text" name="" size="12"></td>
            <td><input type="text" name="" size="12"></td>
            <td><input type="text" name="" size="9.5"></td>
          </tr>
          <tr>
            <td><input type="text" name="" size="12"></td>
            <td><input type="text" name="" size="12"></td>
            <td><input type="text" name="" size="9.5"></td>
          </tr>
          <tr>
            <td><input type="text" name="" size="12"></td>
            <td><input type="text" name="" size="12"></td>
            <td><input type="text" name="" size="9.5"></td>
          </tr>
          <tr>
            <td><input type="text" name="" size="12"></td>
            <td><input type="text" name="" size="12"></td>
            <td><input type="text" name="" size="9.5"></td>
          </tr>
          <tr>
            <td><input type="text" name="" size="12"></td>
            <td><input type="text" name="" size="12"></td>
            <td><input type="text" name="" size="9.5"></td>
          </tr>
          <tr>
            <td><input type="text" name="" size="12"></td>
            <td><input type="text" name="" size="12"></td>
            <td><input type="text" name="" size="9.5"></td>
          </tr>
          <tr>
            <td><input type="text" name="" size="12" value="Total"></td>
            <td><input type="text" name="" size="12"></td>
            <td><input type="text" name="" size="9.5"></td>
          </tr> 
          <tr>
            <td><input type="text" name="" size="12"></td>
            <td><input type="text" name="" size="12"></td>
            <td><input type="submit" name="" size="9.5" value="Submit"></td>
          </tr>          

        </table>
  </div>
<div class="col-sm-6" id="col2">
        <div class="success-message" style="display:none;">
            Thank you for your submission. Click <a href="#" id="addAnother">Here</a> to another. 
        </div>
        <div class="form-group">
            <label for="countries">VOUCHER No:</label>
            <input name="pcv" class="form-control input-sm"  id="pcv" " data-rules="required|email" autocomplete="off" maxlength="16" readonly/>
            
        </div>
        <div class="form-group">
<label for="countries">CASH Received</label>
            <input name="amountFigures" class="form-control input-sm" placeholder="Enter here..." data-rules="required|email" autocomplete="off"/>
             </div>
            <div class="form-group">
<label for="countries">AMOUNT IN WORDS</label>
            <textarea name="amountWords" class="form-control input-sm" placeholder="Enter here..." data-rules="required|email" autocomplete="off"/></textarea>
             </div>
<div class="form-group">
<label for="countries">Reason for Request</label>
            <textarea name="reason" class="form-control input-sm" placeholder="Enter here..." data-rules="required|email" autocomplete="off"/></textarea>
             </div>
<div class="form-group">
<label for="countries">Requested By</label>
            <input name="requester" class="form-control input-sm" placeholder="Enter here..." data-rules="required|email" autocomplete="off"/>
            <!--PICKS YOUR NAME WHEN YOU ARE LOGGED IN-->
             </div>
<div class="form-group">
            <!--START OF A CHECKBOX-->
<label for="countries">Phone Number</label>
            <input name="phone" class="form-control input-sm" placeholder="Enter here..." data-rules="required|email" autocomplete="off"/>
             </div>
         <div class="form-group">
            <label for="countries">Who is your approver </label>
            <select class="form-control input-sm" name="approver" data-rules="required"> 
                <option value="">-Your department head-</option> 
                <!--PICK FROM THE ACTIVE DIRECTORY, LIST OF ALL MANAGERS-->                                 
            </select>
        </div>
        <input type="submit" name="submit" class="submit" onclick="save()" id="submit"> <br><br>
</div>
</div>
</div>

1 Ответ

0 голосов
/ 07 ноября 2018

Я проверил ваш код и вижу много ссылок на библиотеку jquery, которые не требуются и должны быть удалены. Достаточно одной ссылки на библиотеку jquery.

Я вижу, вы используете библиотеку jquery SPServices. Если вы новичок в SharePoint, я бы порекомендовал вам просмотреть статью по адресу https://www.c -sharpcorner.com / blogs / crud-operation-on-list-in-sharepoint-using-jquery-and-spservices

Это поможет вам с легкостью реализовать CRUD-операции, чем использовать JSOM-скрипт. Также вы можете обратиться к этой статье, чтобы узнать, как она использовала ссылки на библиотеки jquery и SPServices.

Надеюсь, это поможет вам.

...