[英]AJAX call. How to make it more dynamic?
以下代碼有效,但是,我必須將keyup事件綁定到文檔就緒的每個單獨輸入。 有沒有一種方法可以更改它,以便每個輸入類型的文本都可以通過在keyup上提供自己的ID來自動更新? 也許像上課?
以下代碼有效,但是,我必須將keyup事件綁定到文檔就緒的每個單獨輸入。 有沒有一種方法可以更改它,以便每個輸入類型的文本都可以通過在keyup上提供自己的ID來自動更新? 也許像上課?
我也對代碼進行了注釋,以使其更加清晰。
這是到目前為止我得到的:
<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>
有沒有一種方法可以更改它,以便每個輸入類型的文本都可以通過在keyup上提供自己的ID來自動更新?
您可以將keyup事件處理程序附加到每個輸入類型的文本,例如:
$('input[type="text"]').on('keyup', function(e) {
.....
})
我必須在准備好文檔時將keyup事件綁定到每個輸入。 有沒有一種方法可以更改它,以便每個輸入類型的文本通過在keyup上提供自己的id來自動更新
我建議在文檔中添加一個事件作為所有輸入的鍵:
$(document).on('keyup', 'input[type="text"]', function(){
// whatever you want here
});
這樣,即使您動態添加新輸入,它們也將觸發事件鍵入。
向您要收聽的所有輸入添加一個通用類,或使用更通用的名稱,例如$('tbody input')
$('tbody input').on('keyup', function(){
// `this` is input event occured on
var id = this.id;
});
似乎您不需要在autosave()
大多數參數,因為您可以從函數中已經存在的其他固定元素獲取除輸入ID之外的所有參數
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.