Я создал jQuery UI Модальная форма, и я хочу, чтобы эта форма вызывала обратную передачу, но мне трудно получить он работает.
Я знаю, что существует немало статей, основанных на использовании плагина SimpleModal, и я попытался адаптировать их и переопределить функцию _doPostback, но без радости.
Я думаю, что проблема заключается в вызове моей функции __doPostBack и каковы должны быть параметры. Это тот случай?
Здесь моя форма
<form id="summaryForm" runat="server">
<div id="dialog" title="Quick Booking">
<p>Select user from list or enter name in box</p>
<fieldset>
<p><label>Is machine going out of the office?</label></p>
<asp:RadioButton TextAlign="Left" GroupName="outOfOffice" Text="Yes" ID="optYes" class="radio" runat="server" />
<asp:RadioButton TextAlign="Left" GroupName="outOfOffice" Text="No" ID="optNo" class="radio" runat="server" Checked="true" />
<label for="dropLstUser">User:</label>
<asp:DropDownList ID="dropLstUser" runat="server" />
<input type="text" name="txtUser" id="txtUser" value="" class="text" />
<label for="txtStartDate">Start Date:</label>
<input type="text" id="txtStartDate" name="txtStartDate" class="datepicker" />
<asp:HiddenField ID="assetField" runat="server" />
<%--<button onclick="performPostBack('summaryForm')">Postback</button>--%>
</fieldset>
</div>
//--------------------------------
Вот код JavaScript:
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
bgiframe: true,
height: 300,
modal: true,
buttons: {
'Close': function() {
alert("closing");
$(this).dialog("close");
__doPostBack = newDoPostBack;
__doPostBack("aspnetForm",null);
}
}
});
});
function newDoPostBack(eventTarget, eventArgument)
{
alert("postingback");
var theForm = document.forms[0];
if (!theForm)
{
theForm = document.aspnetForm;
}
if (!theForm.onsubmit || (theForm.onsubmit() != false))
{
document.getElementById("__EVENTTARGET").value = eventTarget;
document.getElementById("__EVENTARGUMENT").value = eventArgument;
theForm.submit();
}
}
</script>
После создания диалога просто переместите диалог обратно в форму. Пример:
$("#divSaveAs").dialog({bgiframe:false,
autoOpen:false,
title:"Save As",
modal:true});
$("#divSaveAs").parent().appendTo($("form:first"));
Это сработало для меня. Результаты поиска обратной связи.
Помните, что в jQuery UI v1.10 есть дополнительная настройка. Добавлен параметр appendTo, чтобы обратиться к обходному методу ASP.NET, который вы используете, чтобы повторно добавить элемент в форму.
Try:
$("#dialog").dialog({ autoOpen: false, height: 280, width: 440, modal: true, appendTo:"form" });
"AppendTo" работает для меня.
$( "# dialog" ). dialog ({..., appendTo: "form" });
Один нахальный хак, который я использовал, - создать нормальную кнопку .NET вместе с текстовыми полями и т.д. внутри div на странице, используя jQuery, получим HTML для этого div, добавьте его в диалог и удалите HTML в исходном div, чтобы избежать id дублирование.
<div id="someDiv" style="display: none">
<p>A standard set of .net controls</p>
<asp:TextBox ID="textBoxl" runat="server" CssClass="required email"></asp:TextBox>
<input id="button1" type="button" value="Confirm" onclick="SomeEvent();" />
</div>
И script:
var html = $("#someDiv").html();
$("#dialog").append(html);
$("#someDiv").remove();
$("#dialog").dialog({
bgiframe: true,
height: 300,
modal: true
});
Большое спасибо за пост csharpdev! Следующий код сделал это для моей страницы:
$("#photouploadbox").dialog({
autoOpen: false,
modal: true,
buttons: { "Ok": function() { $(this).dialog("close"); } },
draggable: false,
minWidth: 400 });
$("#photouploadbox").parent().appendTo($("form#profilform"));
'Close': function() {
alert("closing");
$(this).dialog("close");
__doPostBack = newDoPostBack;
__doPostBack("aspnetForm", null);
}}});});
Функция __doPostBack берет элемент управления, который вызывает посылку и аргумент, если это необходимо. Ваши примеры JavaScript и ваша разметка, похоже, не совпадают. Например, где я цитировал выше, вы ссылаетесь на aspnetForm, измените это на ID формы и повторите попытку.
Убедитесь, что идентификатор, который вы используете для клиента script, совпадает с идентификатором клиента ASP.NET во время выполнения, Если элемент управления находится в INamingContainer, то он будет иметь уникальный идентификатор на основе его родительского контейнера, поэтому YourControlID станет YourINaminContainerID_YourControlID.
Дайте нам знать результат.
Мне удалось решить проблему - возможно, не лучший способ, но вот что я сделал.
Диалог не будет возвращен, потому что jQuery UI принимает кнопку отправки из формы и присоединяет ее к нижней части тега body, поэтому, когда вы пытаетесь отправить назад кнопку, она не знает, что она публикует.
Я обошел это, изменив код пользовательского интерфейса jQuery, изменив это:
uiDialog = (this.uiDialog = $('<div/>'))
.appendTo(document.body)
.hide()
.addClass(
'ui-dialog ' +
'ui-widget ' +
'ui-widget-content ' +
'ui-corner-all ' +
options.dialogClass
)
Для этого:
uiDialog = (this.uiDialog = $('<div/>'))
.appendTo(document.forms[0])
.hide()
.addClass(
'ui-dialog ' +
'ui-widget ' +
'ui-widget-content ' +
'ui-corner-all ' +
options.dialogClass
)
Не рекомендуется изменять исходную библиотеку, но это лучше, чем ничего.
Я могу заставить это работать, если у меня есть один из них. Один div, один script и одна ссылка. В моем случае диалоговое окно позволяет пользователю оставить "заметку" в записи базы данных. У меня нет кнопок в моем диалоговом окне, просто по умолчанию верхний правый "x", чтобы закрыть диалоговое окно.
Но я пытаюсь заставить это работать в цепочке запросов ColdFusion. Несколько записей, каждый из которых имеет свой собственный диалог, связанный script и div. Я меняю идентификаторы динамически, так что они все уникальны (то есть добавление _XX, где XX является первичным ключом записи для всех идентификаторов).
Когда я расширяюсь до этой модели, имея несколько диалогов, скриптов, divs. Если я открываю каждое диалоговое окно для редактирования соответствующей "заметки" для этой записи, оно сохраняет только LAST. Должен ли я делать .parent(). AppendTo при нажатии кнопки автоматически или автоматически? Где-то он путается.
Если я не открываю диалоговое окно (не делаю никаких изменений в диалоговом окне) и запускаю дамп в результатах формы, я вижу, что все поля диалога проходят через сообщение, как ожидалось.
Когда я смотрю на исходный HTML-код... Все идентификаторы уникальны и называются надлежащим образом. Я думал, что я столкнулся с конфликтующим именем /id где-то, но все это выглядит хорошо на этом фронте.
Мой script:
<script type="text/javascript">
// Increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$( "##dialog#getALLFacilityEquipOrders.order_id#" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode",
width: 500,
resizable: false
});
$('.countable2').jqEasyCounter({
'maxChars': 2000,
});
// Dialog Link
$('##dialog_link#getALLFacilityEquipOrders.order_id#').click(function(){
$('##dialog#getALLFacilityEquipOrders.order_id#').dialog('open');
return false;
});
//hover states on the static widgets
$('##dialog_link#getALLFacilityEquipOrders.order_id#, ul##icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
$("##dialog#getALLFacilityEquipOrders.order_id#").parent().appendTo($("form##allequipedit"));
});
</script>
Мой div:
<div id="dialog#getALLFacilityEquipOrders.order_id#"
title="Notes For #getALLFacilityEquipOrders.cLicenseNumber# - Order ID: ORD-#getALLFacilityEquipOrders.order_id#"
style="display:none;">
<cfquery datasource="#a_dsn#" name="getOrderNotes">
select notebody
from QIP_EquipOrders_Notes
where fk_order_id = #getALLFacilityEquipOrders.order_id#
</cfquery>
<fieldset class="qip_menu">
<label><b>Enter/Edit Notes:</b></label>
<textarea class="countable2"
id="notebody_#getALLFacilityEquipOrders.order_id#"
name="notebody_#getALLFacilityEquipOrders.order_id#"
rows="10"
cols="75">#getOrderNotes.notebody#</textarea>
</fieldset>
</div>
Моя кнопка:
<a href="##"
id="dialog_link#getALLFacilityEquipOrders.order_id#"
class="ui-state-default ui-corner-all"
><span class="ui-icon ui-icon-newwin"></span>Notes</a>
Он работает как ожидалось, когда я использовал
$("#divDlg").dialog("destroy");
вместо
$("#divDlg").dialog("close").appendTo($("#Form1")).hide();
Когда мы добавляем к форме и открываем диалог, у меня возникли проблемы с макетами и z-index.