So bearbeiten Sie die Dateneigenschaft eines Elements in Jquery

Question

Ich habe eine Listenansicht, in der ich einige Dateneigenschaften habe.

Beispiel wie folgt

<li class="dd-item alert mar action" data-id=3 data-name="pushNotify" data-api="/api/v1/mailZoh" data-url="http://google.com" data-json="[{'data':'sss'}]"> 
    <div class="dd-handle">Push Notofication <span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span> &nbsp; <span class="edit cust-close" data-toggle="modal" data-target="#editAction"><i class="fa fa-pencil"></i></span></div> 
</li> 

Hinweis ich eindeutige ID nicht für die <li> Tag haben, nur id ihrer Eltern haben, die eine <ol></ol> ist.

Onclick des Bleistift-Symbol ich ein Modal bin Öffnen und Benutzer bearbeiten zu lassen, dass

$('body').on('click', '.edit', function() { 

    var li = $(this).parent().parent(); 
    $('#action_url').val(li.data('url')); 
    $('#action_api').val(li.data('api')); 
    $('#action_json').val(li.data('json')); 
    $('.action_name').html(li.data('name')); 
    $('#action_id').val(li.data('id')); 

}) 

Modal

<div class="modal fade" id="editAction" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
    <form action="{{ route('wfengine/addWorkFlow') }}" method="POST"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="exampleModalLabel">Edit <span class="action_name" style="text-transform: capitalize"></span></h4> 
     </div> 
     <div class="modal-body"> 
      <input type="hidden" name="action_id" value="" /> 
      <div class="form-group"> 
      <label for="message-text" class="control-label">Api</label> 
      <input type="text" class="form-control" id="action_api" value='' /> 
      </div> 
      <div class="form-group"> 
      <label for="message-text" class="control-label">Url</label> 
      <input type="text" class="form-control" id="action_url" value='' /> 
      </div> 
      <div class="form-group"> 
      <label for="message-text" class="control-label">Json</label> 
      <input type="text" class="form-control" id="action_json" value='' /> 
      </div> 

     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="submit" class="btn btn-primary">Save Action</button> 
     </div> 
     </form> 
    </div> 
    </div> 
</div> 

Im modal eine Taste speichern ist. Wie kann ich diese Daten in der Listenansicht speichern?

Dank

Nun würde Ich mag wissen, wie ich, dass die Daten wieder in der Liste zu speichern. Verwendung wie diese li.data('url', $actionUrl.val())

Answer 1

können Sie die Daten speichern Wie einige darauf hindeutet, die zwischengespeicherte li in aussetzt globalen Bereich keine gute Idee ist.

Else können Sie wie var li = $(this).parent().parent();

$('[data-id="'+$actionid+'"]').data('url', $actionUrl.val()).data('api', $actionApi.val()).data('json', $actionJson.val()); 

tun, aber meine Haupt Antwort bleiben gleiche

var li; 
 
var $actionUrl = $('#action_url'); 
 
var $actionApi = $('#action_api'); 
 
var $actionJson = $('#action_json'); 
 
var $actionName = $('.action_name'); 
 
var $actionid = $('#action_id'); 
 
$('body').on('click', '.edit', function() { 
 

 
    li = $(this).parent().parent(); 
 
    $actionUrl.val(li.data('url')); 
 
    $actionApi.val(li.data('api')); 
 
    $actionJson.val(li.data('json')); 
 
    $actionName.html(li.data('name')); 
 
    $actionid.val(li.data('id')); 
 

 
}) 
 

 
$('button[type="submit"]').on('click', function() { 
 

 
    li.data('url', $actionUrl.val()).data('api', $actionApi.val()).data('json', $actionJson.val()); 
 

 
})

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<ul> 
 
    <li class="dd-item alert mar action" data-id=3 data-name="pushNotify" data-api="/api/v1/mailZoh" data-url="http://google.com" data-json="[{'data':'sss'}]"> 
 
    <div class="dd-handle">Push Notofication <span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span> &nbsp; <span class="edit cust-close" data-toggle="modal" data-target="#editAction"><i class="fa fa-pencil"></i></span> 
 
    </div> 
 
    </li> 
 
</ul> 
 

 
<div class="modal fade" id="editAction" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="display: none"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <form action="{{ route('wfengine/addWorkFlow') }}" method="POST"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
      </button> 
 
      <h4 class="modal-title" id="exampleModalLabel">Edit <span class="action_name" style="text-transform: capitalize"></span></h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <input type="hidden" name="action_id" value="" /> 
 
      <div class="form-group"> 
 
      <label for="message-text" class="control-label">Api</label> 
 
      <input type="text" class="form-control" id="action_api" value='' /> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="message-text" class="control-label">Url</label> 
 
      <input type="text" class="form-control" id="action_url" value='' /> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="message-text" class="control-label">Json</label> 
 
      <input type="text" class="form-control" id="action_json" value='' /> 
 
      </div> 
 

 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      <button type="submit" data-toggle="modal" data-target="#editAction" class="btn btn-primary">Save Action</button> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>