新しいオブジェクト「dialogBox」を作成し、AJAX リクエストを実行してボタンを追加/削除する機能があります。この関数は、次のコードを使用してメイン HTML ページの一部として正常に動作します。
var dialog1 = new dialogBox(500, 250, "Add Note","dialog_add_note.php?job_id=" + jobdetails[1]);
dialog1.addButton("Save","Right");
多数の (20 以上の) ダイアログ ボックスがあるため、ボックスが初期化された後にボタンの内容を更新したいと考えています。
ダイアログ ボックス内の HTML を更新する AJAX 要求を実行します。このリクエストの一部として、次のスクリプトが返されます。
dialog1.addButton("Save","Right");
dialog1 が現在未定義であることを示すエラーが表示されます。
AJAX リクエストによって渡された JavaScript コードを使用してオブジェクトを更新し続ける方法はありますか? 以前はオブジェクトを使用せずにこれを行っていましたが、手に負えなくなっていました。
前もって感謝します
オブジェクトが初期化されると、AJAX 要求が実行されます。以下の機能を参照してください。
function dialogBox(w, h, title, link) {
this.w=w;
this.h=h;
this.title=title;
this.link=link;
//Strip spaces from title to form ID
var id = 'dialog_' + title.replace(" ","_");
//Add dialog box div
$( "body" ).append( "<div id='" + id + "' title='" + title + "'></div>");
//Create dialog box
$( '#' + id ).dialog({
autoOpen: true,
height: h,
width: w,
modal: true,
resizable: false,
buttons: {
Cancel: function() {
$('#' + id).remove();
}
},
close: function() {
$('#' + id).remove();
}
});
//Set buttonSet and remove all buttons
this.buttonSet = $('#' + id).parent().find('.ui-dialog-buttonset');
this.buttonSet.empty();
//Loading icon
$('#' + id).html("<div style='text-align:center;'><br><img src='../images/ajaxloader.gif' alt='Loading...'></div>");
//Set initial content of dialog box
$.get('ajax/' + link, function(data) {
$('#' + id).html(data);
});
//Function to update content of dialog box
this.update=update;
function update(link) {
$.get('ajax/' + link, function(data) {
$('#' + id).html(data);
});
}
//Clear button
this.clearButton = clearButton
function clearButton(name) {
var tempName = name.replace(" ","_");
$('#' + id + '_button_' + tempName).remove();
}
//Clear buttons
this.clearButtons = clearButtons
function clearButtons() {
this.buttonSet.empty();
}
//Add Button
this.addButton = addButton
function addButton(name, position) {
var tempName = name.replace(" ","_");
newButton = $("<button id='" + tempName + "' style='float:" + position + ";'>" + name + "</button>");
newButton.button();
this.buttonSet.append(newButton);
}
//Close Dialog
this.close=close
function close() {
$('#' + id).remove();
}
}