我正在努力的一个小应用程序让我头疼。我终于让它自动完成一个具有在不同字段中输入的相同值的字段。现在我正在尝试将它与AJAX请求结合起来。这是脚本应该做的事情。
当在输入框中输入某些单词时,旁边的输入框应自动以不同的语言包含该单词。我正在使用一个小PHP脚本,这与我面临的问题无关。 PHP脚本输出“bonjour”一词。当我输入“你好”这个词时,我输入的旁边的输入框应该使用ajax请求自动自动完成'bonjour'。知道此输入框是包含数千个输入对的表单的一部分可能很重要。自动完成的部分可以工作,但是当我尝试将它与AJAX请求结合使用时,成功返回数据仍为空。有没有人知道为什么这个请求数据仍然是空的?当第一个输入值发生变化时,我会尝试提醒它。
var handleData = function (data) {
alert(data);
}
var word = '';
$("table").on('change', '.master', function () {
$.ajax({
url : '<?php echo site_url('wordsuggestion'); ?>/hello/english/french',
type: 'GET',
success : handleData
});
});
$(document).ready(function() {
var max_fields = 1000; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<tr><td><div class="form-group"><input type="text" class="master" name="or['+x+']"></div></td><td> </td><td><div class="form-group"><input type="text" class="slave" name="tr['+x+']"></div></td></tr>'); //add input box
}
});
});
这将是使用的形式。
<form method="POST">
<table width="100%" class="input_fields_wrap">
<tr>
<td>
<div class="form-group"><input type="text" class="master" name="or[0]"></div>
</td>
<td> </td>
<td>
<div class="form-group"><input type="text" class="slave" name="tr[0]"></div>
</td>
</tr>
</table>
<button type="submit" id="save" class="btn btn-success pull-right">Save</button>
</form>
<button class="add_field_button btn btn-default">Add more fields</button>
提前致谢!
答案 0 :(得分:0)
我解决了。这是一个非常简单(愚蠢)的错误,我刚刚开始使用JS。出于某种原因,该函数需要由$(function () {})
包装。
$(function () {
$("table").on('change', '.master', function () {
$.ajax({
url : '<?php echo site_url('wordsuggestion'); ?>/hello/english/french',
type: 'GET',
success : handleData
});
});
});