Проблема модального диалогового окна Jquery UI с триггером кнопки панели обновления - PullRequest
Новая
       20

Проблема модального диалогового окна Jquery UI с триггером кнопки панели обновления

0 голосов
/ 11 октября 2011

Я столкнулся с глупой проблемой, но изо всех сил стараюсь ее решить ..

У меня есть элемент управления Checkbox на панели обновлений .. 

<asp:UpdatePanel ID="UpdateCheckEdit" runat="server"><ContentTemplate>
<asp:CheckBox ID="ChkEdit" Text="Edit" Enabled="true" onCheckedChanged="ChkEdit_CheckedChanged" Visible="false" AutoPostBack="true" runat="server" />
    <asp:TextBox ID="txtDbInterviewComments" CssClass="user_textarea" TextMode="MultiLine" Visible="false" runat="server" />
    <asp:Button ID="btnEdit" Visible="false" CssClass="create_btn" OnClientClick="javascript: $('#ConfirmDiv').dialog('open');return false;" OnClick="btnEdit_Click" Text="Edit" runat="server" />
</ContentTemplate></asp:UpdatePanel>

При проверке измените текстовое поле и кнопку редактирования.становятся видимыми, и после нажатия кнопки редактирования появляется модальное диалоговое окно с запросом подтверждения, и div для поля выглядит следующим образом .. 

<div id="ConfirmDiv" title="Confirm">
<p><span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>Do you want to save the changes?<br />These changes CANT be reversed.</p>
</div>

Сценарий для Jquery записывается как 

<script type="text/javascript">
        $().ready(function () {
            $("#ConfirmDiv").dialog(
            { autoOpen: false,
              modal: true,
              bgiframe: true,
              resizable: false, 
              height: 'auto', 
              open: function (event, ui) { jQuery('.ui-dialog-titlebar-close').hide();},
              buttons: {'Yes': function () { <%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.btnEdit))%>; },'Cancel': function () { $(this).dialog('close'); }}
            })
        });

    </script>

Этот скрипт написан в теге BODY, и нажатие кнопки Да вызывает событие post back кнопки Edit (btnEdit)

В исходном коде все работает нормально, но после выполнения модальное окно по-прежнему отображается,Мне нужно закрыть это диалоговое окно после кода за выполнением ..

Если я удаляю панель обновления, все работает абсолютно нормально, но на той же странице есть столбец переключателя HTML в сетке, который теряет свою проверку, еслиполный пост возвращается ..

Пожалуйста, помогите мне с возможными решениями ..

Ответы [ 2 ]

1 голос
/ 11 октября 2011

Основная проблема, с которой вы столкнетесь, заключается в том, что document.ready не запускается при частичной обратной передаче. Чтобы обойти эту проблему, вы можете обновить ваш объект jquery в функции JavaScript под названием PageLoad: 

<script type="text/javascript"> 
    $().ready(function () { 
         // Only happens on first page load, not on partial postbacks
         SetupDialog();
    }); 

    function pageLoad(){
        // Happens on every partial postback
        $("#ConfirmDiv").dialog("close")
    }

    function SetupDialog(){
        $("#ConfirmDiv").dialog( 
        { autoOpen: false, 
          modal: true, 
          bgiframe: true, 
          resizable: false,  
          height: 'auto',  
          open: function (event, ui) { jQuery('.ui-dialog-titlebar-close').hide();}, 
          buttons: {'Yes': function () { <%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.btnEdit))%>; },'Cancel': function () { $(this).dialog('close'); }} 
        })
    }

</script>

Я считаю, что он чувствителен к регистру.

0 голосов
/ 11 октября 2011

Видите, панель обновления уничтожит весь код jQuery на странице. Попробуйте использовать PageRequestManager.

...