0
Der folgende Code funktioniert, aber ich muss das keyup-Ereignis an jede einzelne Eingabe auf Dokument bereit binden. Gibt es eine Möglichkeit, es zu ändern, so dass jeder Eingabetext automatisch aktualisiert wird, indem er seine eigene ID bei der Schlüsseleingabe angibt? Wie eine Klasse vielleicht?AJAX Anruf. Wie man es dynamischer macht?
Der folgende Code funktioniert, aber ich muss das keyup -Ereignis an jede einzelne Eingabe auf Dokument bereit binden. Gibt es eine Möglichkeit, es zu ändern, so dass jeder Eingabetext automatisch aktualisiert wird, indem er seine eigene ID bei der Schlüsseleingabe angibt? Wie eine Klasse vielleicht?
Ich habe auch den Code für einige Klarheit kommentiert.
Hier ist, was ich bisher habe:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://pingendo.github.io/templates/blank/theme.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
// Create global timer outside keyup scope.
var timer;
var client_id = '#CLIENT_ID';
var project_id = '#PROJECT_ID';
var mainsheet_id = '#MAINSHEET_ID';
// Random target html element id we want to bind.
var target_id = '#WTRESRVD';
// Bind keyup event to target html element id.
$(target_id).keyup(function() {
// If timer has been set but user still typing...
if (timer) {
// Reset timer and abort function call.
clearTimeout(timer);
}
// Set timer to tick in 1 second for 1 second then call function and stop.
timer = setTimeout(function(event) {
autoSave(client_id, project_id, mainsheet_id, target_id);
}, 1000); //wait 1000 milliseconds before triggering event.
});
function autoSave(client_id, project_id, mainsheet_id, target_id) {
var client_id = $(client_id).val();
var project_id = $(project_id).val();
var mainsheet_id = $(mainsheet_id).val();
// Create variable for input text value by id to get all text up to last entered keystroke.
var target_element = $(target_id).val();
// Trim it to avoid triggering AJAX call for pressing space bar eg.(nothing to save..)
var target_element = $.trim(target_element);
// If there is something other than nothing typed in...
// This pretty much triggers on every single keyup stroke NOT including spaces, etc..
// Maybe sanitize sanitize it some more???
if (target_element != '') {
// AJAX POST request to run MySQL UPDATE query on this database field (WTRESRVD).
$.ajax({
url: "processor.php",
method: "POST",
data: {
postCLIENT_ID: client_id,
postPROJECT_ID: project_id,
postMAINSHEET_ID: mainsheet_id,
postTARGETELEMENT: target_element
},
dataType: "text",
beforeSend: function() {
// setting a timeout
$('#status').text('Please wait...');
},
success: function(data) {
// If data return after a successful request isn't an empty string..
if (data != '') {
// DO something.
}
// Create variable time to reference later.
var time = showTime();
// Update div status with last saved time stamp then..
$('#status').text("Draft Autosaved " + time).show();
// ..fadeOut over 3 seconds.
$('#status').fadeOut(3000);
}
});
}
}
});
function showTime() {
var timeNow = new Date();
var hours = timeNow.getHours();
var minutes = timeNow.getMinutes();
var seconds = timeNow.getSeconds();
var timeString = "" + ((hours > 12) ? hours - 12 : hours);
timeString += ((minutes < 10) ? ":0" : ":") + minutes;
timeString += ((seconds < 10) ? ":0" : ":") + seconds;
timeString += (hours >= 12) ? " P.M." : " A.M.";
return timeString;
}
</script>
<div class="py-2">
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="">Autosave 4.0 - Cat 2 - Main Sheet</h3>
</div>
</div>
</div>
</div>
<div class="p-2">
<div class="container">
<div class="row">
<div class="col-md-12">
<form action="tab5_processor.php" class="text-muted">
<div class="row">
<div class="col-md-4">
<div class="form-group"> <label class="control-label">CLIENT ID</label>
<input class="form-control" id="CLIENT_ID" name="CLIENT_ID" placeholder="input_text_value" type="text" value="111"> </div>
</div>
<div class="col-md-4">
<div class="form-group"> <label class="control-label">PROJECT ID</label>
<input class="form-control" id="PROJECT_ID" name="PROJECT_ID" placeholder="input_text_value" type="text" value="222"> </div>
</div>
<div class="col-md-4">
<div class="form-group"> <label class="control-label">MAINSHEET ID</label>
<input class="form-control" id="MAINSHEET_ID" name="MAINSHEET_ID" placeholder="input_text_value" type="text" value="333"> </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-striped">
<colgroup>
<col width="50">
<col width="100">
<col width="100"> </colgroup>
<thead>
<tr>
<th> </th>
<th>QTY</th>
<th>CODE</th>
<th>DESCRIPTION</th>
</tr>
</thead>
<tbody>
<tr>
<td>EA</td>
<td>
<input class="form-control" id="WTRESRVD" name="WTRESRVD" placeholder="" type="text" value="" maxlength="4"> </td>
<td>WTRESRVD</td>
<td>EMERGENCY SERVICE CALL</td>
</tr>
<tr>
<td>EA</td>
<td>
<input class="form-control" id="WTRESRV" name="WTRESRV" placeholder="" type="text" value="" maxlength="4"> </td>
<td>WTRESRV</td>
<td>EMERGENCY SERVICE CALL AFTER HRS</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="" id="status">Update Status...</p>
</div>
</div>
</div>
</div>
</body>
</html>
Zeigen Sie Beispiel für die Wiederholung von HTML. Verwenden Sie im Allgemeinen nur eine Klasse, um den Ereignis-Listener zu initialisieren und die entsprechenden Daten entweder vom aktuellen Element, anderen Elementen in seiner Gruppe oder von Datenattributen abzurufen. 'this' im Ereignishandler verweist auf das Element, bei dem das Ereignis aufgetreten ist – charlietfl
Original Post aktualisiert, um HTML einzuschließen. Hier ist eine Live-Version. http://nexlevel.org/autosave4/ – ASPiRE