#javascript #php #ajax #dialog
#javascript #php #ajax #диалоговое окно
Вопрос:
У меня есть кнопка добавления виджета, и при нажатии я хочу отобразить диалоговое окно, в котором у меня есть поле выбора и кнопка сохранения. Но после нажатия кнопки Добавить виджет мое диалоговое окно не появляется. У меня есть конфигурация по умолчанию для кнопки. И когда я нажимаю кнопку «Добавить виджет» и проверяю firebug, мое событие кнопки запускается правильно, но не знаю, где я допускаю небольшую ошибку, поскольку мое диалоговое окно не отображается.Я использовал вызов ajax для отображения диалогового окна.Вот jsfiddle без вызова ajax, и он работает нормально: demo Но я должен передать идентификатор виджета, который я получаю через Ajax, и почему диалоговое окно не появляется при использовании ajax, не знаю. Вот мой php-код:
dashboard.php
$page['button'] = array(
1 => array( 'Save','pfeil2r','',"'#'",'','','savewidgetId'),
);
<table width="538" cellspacing="0" cellpadding="0" border="0">
<tr>
<td id="widget">
<br /><br/>
<div id="output"></div>
<div id="overlay" class="web_dialog_overlay"></div>
<div id="dialog" class="web_dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="web_dialog_title">Widget</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b>Add Widget</b>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<div id="widgets"> ';
while($row = mysql_fetch_array($sql_results)){
$widget=$row['ID'];
$widget_name=$row['name'];
$html .= '
<select name="addwidgets" id="addwidgets" >
<option value='.$widget.'>'.$widget_name.'</option>
</select>';
}
$html .= '</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
'.CreateButton($page['button']).'
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
dashboard.js
function getaddwidget()
{
$.ajax({
type: "POST",
url: "ajax/dashboard.php",
dataType : 'json',
cache: false,
data: {'aktion' : 'add-new-widget'},
success: function(data){
$('#widget').html(data.html);
},
error: function(data){
alert('error');
//$('#news').html(data.html);
}
});
}
function saveaddwidget()
{
var widgets = $('#widgets select[name="addwidgets"]').val();
$.ajax({
type: "POST",
url: "ajax/dashboard.php",
dataType : 'json',
cache: false,
data: {'aktion' : 'save-add-widget','widget':widgets},
success: function(data){
$('#widget').html(data.html);
},
error: function(data){
alert('error');
//$('#news').html(data.html);
}
});
}
$("#widget .butt-rahmen").click(function (e){
if($(this).attr('id') == 'addwidgetId')
{
ShowDialog(false);
e.preventDefault();
getaddwidget();
}
});
$("#widget .butt-rahmen").click(function (e){
if($(this).attr('id') == 'saveaddwidgetId')
{
HideDialog();
e.preventDefault();
saveaddwidget();
}
});
function ShowDialog(modal)
{
$("#overlay").show();
$("#dialog").fadeIn(300);
}
function HideDialog()
{
$("#overlay").hide();
$("#dialog").fadeOut(300);
}
Комментарии:
1. ну, ваш td id = «widget», похоже, все это будет перезаписано вашей функцией ajax для одного …. но помимо этого. Вы уверены, что не хотите добавлять () к #widgets, в отличие от html() к #widget?
2. когда я нажимаю на кнопку, я вижу в firebug, и там появляется окно выбора и кнопка ynd save, но почему диалоговое окно не отображается, я не знаю почему… да, я уверен, что добавлю #widget
3. Это может показаться глупым вопросом, но как насчет
php
тегов? Вы удалили их с целью этого вопроса?4. чувак, я не могу опубликовать свой полный код, я публикую только необходимый код, требуемый здесь…
5. Пожалуйста, проверьте обновленный вопрос … я также добавил fiddle
Ответ №1:
Веб-формы и подключаемый модуль диалогового окна пользовательского интерфейса j-Query плохо работают вместе. Это потому, что элементы, используемые для диалогового окна, удаляются из DOM страницы и помещаются в новый элемент. Более чем вероятно, что здесь происходит то, что ваши элементы управления удаляются из формы, поэтому нажатие кнопки отправки ничего не сделает.