Изменение названия диалогового окна jQuery-UI с помощью другой функции диалогового окна
Почему не меняется второй заголовок диалогового окна jQuery-UI при появлении. В первом диалоговом окне я изменяю заголовок окна с использованием следующего .attr("title", "Confirm")
- он меняет заголовок первого окна на "Подтверждение", как и должно быть. Теперь, когда появляется второе окно, он должен изменить заголовок на "Сообщение", так как сделал то же самое для второго блока - .attr("title", "Message")
. Правильно? Но это не так. Он сохраняет заголовок раньше. Однако сообщение меняется так, как должно быть. Я тестировал в IE8, Chrome и FF3.6.
<div id="dialog-confirm" title=""></div>
< - Это html перед функциями jQuery.
Javascript/jQuery
$('#userDelete').click(function() {
$(function() {
var dialogIcon = "<span class=\"ui-icon ui-icon-alert\"></span>";
var dialogMessage = dialogIcon + "Are you sure you want to delete?";
$("#dialog-confirm").attr("title", "Confirm").html(dialogMessage).dialog({
resizable: false,
height: 125,
width: 300,
modal: true,
buttons: {
'Delete': function() {
$(this).dialog('close');
$.post('user_ajax.php', {action: 'delete',
aId: $('[name=aId]').val()
}, function(data) {
if(data.success){
var dialogIcon = "<span class=\"ui-icon ui-icon-info\"></span>";
var dialogMessage = dialogIcon + data.message;
$('#dialog-confirm').attr("title", "Message");
$('#dialog-confirm').html(dialogMessage);
$('#dialog-confirm').dialog({
resizable: false,
height: 125,
width: 300,
modal: true,
buttons: {
'Okay': function() {
$(this).dialog('close');
var url = $_httpaddress + "admin/index.php"
$(location).attr('href',url);
} // End of Okay Button Function
} //--- End of Dialog Button Script
});//--- End of Dialog Function
} else {
$_messageConsole.slideDown();
$_messageConsole.html(data.message);
}
}, 'json');
}, //--- End of Delete Button Function
'Cancel': function() {
$(this).dialog('close');
} //--- End of Cancel Button Function
} //--- End of Dialog Button Script
}); //--- End of Dialog Script
}); //--- End of Dialog Function
return false;
});
Спасибо вам за помощника, если вы решите помочь.
Ответы
Ответ 1
Без прохождения всего кода. Я полагаю, что $('#dialog-confirm').attr("title", "Message");
не работает во второй раз, потому что jQuery UI Dialog уже внес изменения в фактическую DOM. Поэтому изменение атрибута title
в div не делает ничего. Поскольку фактическое название, вероятно, является некоторым div
/p
или аналогичным, сгенерированным с помощью jQuery UI Dialog.
Второй вызов для вас $('#dialog-confirm').dialog({..})
просто обновляет существующее диалоговое окно с новыми параметрами.
Проверяя документацию jQuery UI Dialog, вы должны были заметить, что вы можете просто передать опцию заголовка. Итак, второй раз вместо
$('#dialog-confirm').attr("title", "Message");
$('#dialog-confirm').html(dialogMessage);
$('#dialog-confirm').dialog({
resizable: false,
height: 125,
width: 300,
...
});
просто используйте
$('#dialog-confirm').html(dialogMessage);
$('#dialog-confirm').dialog({
resizable: false,
height: 125,
width: 300,
...
"title", "Message" //NEW!
});
Ответ 2
jQuery UI Dialog также предоставляет метод "option", который позволяет вам изменять параметр в диалоге без повторной настройки всего этого. Поэтому, если вы хотите снова показать тот же диалог с новым заголовком, вы можете использовать следующее:
$('#dialog-confirm').dialog("option", "title", "Message");
$('#dialog-confirm').dialog("open");
См. документацию jQuery на странице "Диалог" .
Ответ 3
Это сработало для меня (я использовал firebug для получения имени элемента).
document.getElementById("ui-dialog-title-"+formname).innerHTML = "New title";
Ответ 4
Вы можете установить заголовок диалога по id, 100% рабочий пример кода ниже
$( "#json_box" ).dialog({minHeight: 433,minWidth:550,"title":"Json to Template"});