Проблемы с обратной передачей в диалоговом окне модальной формы jQuery

Question

Я создал модальную форму 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>

Answer 1

После создания вашего диалога просто переместите диалог обратно в форму. Пример:

 $("#divSaveAs").dialog({bgiframe:false,
                            autoOpen:false,
                            title:"Save As",
                            modal:true});
    $("#divSaveAs").parent().appendTo($("form:first"));

Это сработало для меня. Постбэк работает найди.

Answer 2

Имейте в виду, что в jQuery UI v1.10 есть дополнительная настройка. Был добавлен параметр appendTo, который используется для решения проблемы ASP.NET , которую вы используете для повторного добавления элемента в форму.

Попытка:

$("#dialog").dialog({ autoOpen: false, height: 280, width: 440, modal: true, appendTo:"form" });

Answer 3

Мне нравится опция «AppendTo».

$ ("# dialog"). Dialog ({..., appendTo: "form"});

См .: http://api.jqueryui.com/dialog/#option-appendTo

Answer 4

Большое спасибо за пост csharpdev! Следующий код сделал это для моей страницы:

$("#photouploadbox").dialog({
    autoOpen: false,
    modal: true,
    buttons: { "Ok": function() { $(this).dialog("close"); } },
    draggable: false,
    minWidth: 400 });

$("#photouploadbox").parent().appendTo($("form#profilform"));

Answer 5

Один нахальный взлом, который я использовал, - это создание обычной кнопки .NET вместе с текстовыми полями и т. Д. Внутри div на странице, с помощью jQuery получить HTML для этого div добавьте его в диалоговое окно, а затем удалите HTML-код в исходном элементе div, чтобы избежать дублирования идентификатора.

<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>

И сценарий:

var html = $("#someDiv").html();
$("#dialog").append(html);
$("#someDiv").remove();
$("#dialog").dialog({
        bgiframe: true,
        height: 300,
        modal: true
});

Answer 6

Работает, как и ожидалось, когда я использовал

$("#divDlg").dialog("destroy");

вместо

$("#divDlg").dialog("close").appendTo($("#Form1")).hide();

Когда мы добавляем форму и снова открываем диалоговое окно, у меня возникают проблемы с макетами и z-index.

Answer 7

Я могу заставить это работать, если у меня есть один из каждого. Один div, один скрипт и одна ссылка. В моем случае диалоговое окно позволяет пользователю оставлять «заметки» для каждой записи базы данных. У меня нет никаких кнопок в диалоговом окне, только верхнее правое «x» по умолчанию, чтобы закрыть диалоговое окно.

Но я пытаюсь заставить это работать в цикле запросов ColdFusion . Несколько записей, каждая из которых имеет свою собственную диалоговую кнопку, связанный скрипт и div. Я динамически меняю идентификаторы, чтобы они все были уникальными (то есть добавляю _XX, где XX - первичный ключ записи ко всем идентификаторам).

Когда я расширяюсь до этой модели, имея несколько диалогов, сценариев, элементов div. Если я открою каждое диалоговое окно, чтобы отредактировать соответствующую «заметку» для этой записи, она сохранит только последнюю. Должен ли я делать .parent (). AppendTo на нажатие кнопки против автоматически? Где-то это запутывается.

Если я не открою какой-либо диалог (не делаю никаких изменений с помощью диалога) и не выполню дамп результатов поиска, я вижу все диалоговые поля, проходящие в сообщении, как и ожидалось.

Когда я смотрю на необработанный HTML, созданный ... Все идентификаторы уникальны и вызываются соответствующим образом. Я думал, что где-то столкнулся с конфликтующим именем / идентификатором, но на этом фронте все выглядит хорошо.

Мой сценарий:

<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>

Answer 8

Мне удалось решить проблему - возможно, не лучшим образом, но вот что я сделал.

Диалоговое окно не будет отправлено обратно, потому что 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
               )

Не идеально модифицировать исходную библиотеку, но лучше, чем ничего.

Answer 9

'Close': function() {
             alert("closing"); 
             $(this).dialog("close"); 
             __doPostBack = newDoPostBack; 
             __doPostBack("aspnetForm", null); 
         }}});}); 

Функция __doPostBack принимает элемент управления, который вызывает обратную передачу, и аргумент, если требуется. Ваши примеры JavaScript и ваша разметка не совпадают. Например, где я цитировал выше, вы ссылаетесь на aspnetForm, меняете его на идентификатор формы и попробуйте снова.

Убедитесь, что идентификатор, используемый для сценария клиента, совпадает с идентификатором клиента элемента управления ASP.NET во время выполнения. Если элемент управления находится в INamingContainer, он будет иметь уникальный идентификатор на основе своего родительского контейнера, поэтому YourControlID станет YourINaminContainerID_YourControlID.

Дайте нам знать результат.