テンプレート (jsRender) からレンダリングされた次の html があります。
<div class="noteActions top" style="z-index: 3;">
<span onclick="noteAction('add', 13808, 0 );"></span>
<span onclick="noteAction('update',13808, 106344 );"></span>
<span onclick="noteAction('delete', 13808, 106344 );"></span>
</div>
私の問題は、ドキュメントの外部にデータ配列を設定する関数が用意されていることです。後で、jquery ダイアログ ウィンドウが ajax を介してハンドラーに送信され、データベースが更新されます。
何が起こっているのかというと、データ配列はクラス セレクター (pr-body、pr-title) によって jquery vals を除くすべてを正しく渡し、それらは NULL として渡されます。
javascript - 外部ドキュメント (準備完了)
var updateUrl = 'handlers/Poster.ashx',
data;
function noteAction(action, prospectID, noteID){
data = {
'operation': action,
'prospectid':prospectID,
'note-body' : $('.pr-body').val(),
'note-title' : $('.pr-title').val(),
'note-id':noteID,
};
if (action == 'add'){
$( "#dialogPostIt" ).dialog("open", "option", "title", "Add Post It");
} else if (action == 'update'){
$( "#dialogPostIt" ).dialog("open", "option", "title", "Edit Post It");
} else if (action == 'delete'){
if (!confirm('Are you sure you want to delete')) return false;
$.post(updateUrl+"?operation=delete¬eid="+noteID, function(data) {
$('#stickyNote-'+noteID).remove();
});
}
}
jquery - ドキュメント対応
$(document).ready(function() {
$( "#dialogPostIt" ).dialog({autoOpen: false, modal:true,
buttons: {
'Save': function() {
$.ajax({
url: updateUrl,
data: data,
success: function(json, textStatus, jqXHR){
.....
html
<div id="dialogPostIt" >
<form id="postItNow" action="" method="post" class="note-form">
<label for="note-title">Title (description)</label>
<input type="text" name="note-title" id="note-title" class="pr-title" value="" />
<label for="note-body">Text of the note</label>
<textarea name="note-body" id="note-body" class="pr-body" cols="30" rows="6"> </textarea>
</form></div>
以前は、ダイアログの保存ボタン function() 内でデータ配列を設定していましたが、これは正常に機能しましたが、イベントに基づいて配列要素の一部を動的にする必要がありました
配列は私の要件からグローバルである必要はありません。これを行う別の方法を考えることができませんでした
いつものように、どんな助けも大歓迎です