jqueryを使って自動補完しようとしています。
私は編集可能なグリッドを使用しています。このように、ノックアウト js コードなしでオートコンプリートを実装しようとしました。正常に動作します。[ノックアウト js コードなしのマイ コード][http://jsfiddle.net/bhagirathip/WC5P7/2/]
次に、ノックアウト js でオートコンプリートを実装しようとしました。AddMoreボタンをクリックしてテキストボックスを追加すると、オートコンプリートが機能しません。[私のコード :][http://jsfiddle.net/bhagirathip/x6H8s/6/]
KnockOut js クエリなしでオートコンプリートを実行しようとすると正常に動作しますが、ノックアウト js クエリを含めるとオートコンプリートが機能しません。
私がどこで間違いを犯したかを理解してください。
前もって感謝します
実際には、新しく追加されたテストボックスでオートコンプリート イベントを追加していませんでした。つまり、機能していませんでした。
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js" type="text/javascript">
</script>
<div class='liveExample'>
<p>You have asked for <span data-bind='text: gifts().length'> </span> gift(s)</p>
<table data-bind='visible: gifts().length > 0'>
<thead>
<tr>
<th>Gift name</th>
<th>Price</th>
<th />
</tr>
</thead>
<tbody data-bind='foreach: gifts'>
<tr>
<td>
<input data-bind='value: name' class='tags' /></td>
<td>
<input data-bind='value: price' /></td>
<td><a href='#' data-bind='click: $root.removeGift'>Delete</a></td>
</tr>
</tbody>
</table>
<button data-bind='click: addGift'>Add Gift</button>
<button data-bind='enable: gifts().length > 0' type='submit'>Submit</button>
</div>
そしてスクリプトは
//For autocomplete extender genarting members
var GiftModel = function (gifts) {
var self = this;
self.gifts = ko.observableArray(gifts);
self.addGift = function () {
self.gifts.push({
name: "",
price: ""
});
var availableTags2 = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$(".tags").autocomplete({
source: availableTags2
});
};
self.removeGift = function (gift) {
self.gifts.remove(gift);
};
};
var viewModel = new GiftModel([
{ name: "", price: "" }
]);
$(document).ready(function () {
ko.applyBindings(viewModel);
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$(".tags").autocomplete({
source: availableTags
});
});
以下は、サーバーに対して行われる ajax 呼び出しのサンプルです。その完了時に、クライアント側で変数を割り当てることができます。変数がグローバルであることを確認して、異なる関数間でアクセスできるようにしてください。
function getResult() {
var URL = "/Home/GetResult";
var typeJSON = {};
typeJSON["sql"] = $("#sqltext").val();
$.ajax({
type: "POST",
url: URL,
data: typeJSON,//data to be send to server
//omit above data tag if not required to send data to server
success: function (data) {
//on success you can assign your variable here
},
failure: function (data) {
//on faliure of ajax call can show some message here
}
});
}
あなたは一つのことをすることができます：
$(function(){
$.noConflict();
//put all other code here
});