Question 281105 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – dialog not returning true, and as consequence not triggering onClick, because of event occurred

this problem will drive me crazy and i am seeking a solution;

I made a hidden div in my asp.net page, and a JavaScript function to show it as a dialog when a asp.net button is clicked, this JavaScript function is triggered by onClintClick; everything was working fine.

I added some asp.net controls in that div, and here some problems occurred. once the controls is clicked, the whole page makes a postback and the div get hidden, that does not make an interactive session with the user.

in this point I found a solution, which is more useful and makes the dialogue re-usable. I added an iframe into the div and made it show an external page. in that way, the dialog (in this case the popup div) will not make a post back when user interacts with the page in iframe. so far so good.

Now, I need a way in which the internal page speaks to div (in this case, the div is the parent) to close it, either with return-value: true or false (have in mind the div is dialogue, and the returning value is either true or false). fortunately, I found a way to close the div, but the problem it looks end the "thread" of parent. so the div, which looks waiting true/false value, does not get either.

in picture 01.jpg: when [delete] is clicked, an onClientClick function is fired to show the round-corner div which contains an iFrame to show another page:

function MyConfirm2(btn, lcWidth, lcHeight, lcTitle, DivID, frm) {
    result = false;
    myDialog = $(DivID);
    document.getElementById('iframepage').src = frm;

    myDialog.dialog({
        title: lcTitle,
        modal: true,
        // appendTo: 'form',
        classes: { "ui-dialog": "lcDialog" },
        width: lcWidth + 20,
        height: lcHeight - 20,
        open: function () {
            $("#myDialogOverlay").show();
        },
        close: function () {
            //debugger;
            $("#myDialogOverlay").hide();
            document.getElementById('iframepage').src = '';
        }
    })
    return result;
}

now, the user should click either OK or Cancel from the inside page, which should speaks to outer div and inform it to close ..below is the triggered javaScript function to perform the closing:

var receiveMessage = function (event) {
    if (event.data == "close-iframe") {
        myDialog.returnValue = true;
        myDialog.dialog("close");
        return;
    } else {
        myDialog.returnValue = false;
        result = false;
        myDialog.dialog("close");
    }
}
window.addEventListener("message", receiveMessage, false);

the problem here is that although the closing perform its task perfectly, and the return value is true, but it cuts the thread of parent page so it does not response as it should be ; the dialog is getting close; but closing does not trigger OnClick event that should be triggered after assigning ‘true’ and calling myDialog.dialog("close");

in debugging the code, i found out it return to function (event) and resume executing the code after line myDialog.dialog("close"); as it has not relation to close: function () { in opening /closing code

sorry for writing a lot of details; but please give me a hand and advise how to overcome this issue.

enter image description here

I made a lot of debugging and tracing, i even tried to trigger the event ***hardcodedly *** by .click() ;
but this will trigger the onClientClick as well and i ended up with an infinite loop.

I am seeking a way to let the [ok]/[cancel] buttons in the inner page to tell the outer div to close and trigger the the onClick. or a way to trigger the onClick event without triggering onClientEvent.

Tags:

2

Answers


  1. 0

    Let me try to address your initial problem instead of addressing a fix for your workaround with iframes.

    It sounds like your initial problem was that when you click the button, it makes a postback instead of executing your javascript function.

    The reason this happens is because the button is in a form and the button has type="submit"

    To prevent the postback and let the javascript execute the onClick handler, you need to set the button to type="button"

    I would try to avoid using iframes just to show a modal popup.

    Login or Signup to reply.
  2. 0

    Ok, so a few things.

    I strong suggest you don’t bother or use an iFrame for this.

    (The reason of course is that you can’t really have the iFrame "talk" to the page that you placed the iFrame into.).

    So, the next issue of course is that any dialog (you using a jQuery.UI one) that has a post-back will in general cause the dialog to collapse.

    There 2 solutions.

    First, adopt web methods. This so called "ajax" of the buttons and code of course is often the rage today, since the goal here is to NOT have post-backs, and push/have/run as MUCH code as possible in the client-side browser. The reason for this great goal is of course without a post-back (a page round trip), then the resulting web application will respond VERY fast, and in fact respond as good as a desktop application. When you go SUPER far with this design concept, then you can even have a spreadsheet or word processor run inside of a browser.

    So, a lot of the frameworks today are "trying" and "wanting" to move as much code as possible to the client side. And you can avoid post-backs by calling/using web methods.

    However, there is a secret weapon you can adopt with web forms, and that secret weapon is of course adopting an update panel.

    If you place the popup div for the jQuery.UI dialog inside of an update panel, then you find that the pop dialog can withstand and survive post-backs.

    Thus, quite much near all of your issues are solved with this approach.

    So, let’s say I wanted a start date prompt, and an end date prompt. And let’s say I used the calendar control. Well, when you use a calendar control, when selecting a date, a post back occurs. However, we want a start date, and an end date, and we want this inside of our pop dialog.

    So, can have this markup:

    <div id="startend" runat="server" style="display: none">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:HiddenField ID="hStart" runat="server" ClientIDMode="Static" />
        <asp:HiddenField ID="hEnd" runat="server" ClientIDMode="Static" />
        <div style="float: left">
            <h4>Select Start Date</h4>

            <asp:Calendar ID="dtStart" runat="server" Height="200px" Width="300px"
                BorderColor="Black"
                BorderStyle="Solid" BorderWidth="2px">
                <DayHeaderStyle Height="40px" />
                <DayStyle BorderStyle="Solid"
                    BorderColor="Black"
                    BorderWidth="1"
                    HorizontalAlign="Right"
                    VerticalAlign="Top" Height="40px" />
                <OtherMonthDayStyle BackColor="LightSteelBlue" />
                <SelectorStyle CssClass="btn-info" />

                <TitleStyle Height="40px" />

                <TodayDayStyle BackColor="LightSkyBlue" />
                <WeekendDayStyle BackColor="Ivory" Height="30px" />
            </asp:Calendar>
        </div>


        <div style="float: left; margin-left: 30px">
            <h4>Select End Date</h4>

            <asp:Calendar ID="dtEnd" runat="server" Height="200px" Width="300px"
                BorderColor="Black"
                BorderStyle="Solid" BorderWidth="2px">
                <DayHeaderStyle Height="40px" />
                <DayStyle BorderStyle="Solid"
                    BorderColor="Black"
                    BorderWidth="1"
                    HorizontalAlign="Right"
                    VerticalAlign="Top" Height="40px" />
                <OtherMonthDayStyle BackColor="LightSteelBlue" />
                <SelectorStyle CssClass="btn-info" />

                <TitleStyle Height="40px" />

                <TodayDayStyle BackColor="LightSkyBlue" />
                <WeekendDayStyle BackColor="Ivory" Height="30px" />
            </asp:Calendar>
        </div>

    </ContentTemplate>
   </asp:UpdatePanel>
 </div>

    So, just keep in mind the design pattern is this:

     start of your div to pop

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
     <ContentTemplate>

       -- everything in here - including the calendar control


      </ContentTemplate>
  </asp:UpdatePanel>

</div>   --- end of our div

    So, the div we pop has the update panel "inside".

    Right after above, we have our jQuery.UI dialog.

    <script>

    function popdate() {
        console.log("start")
        var myDialog = $("#startend");
        myDialog.dialog({
            title: "Select booking dates",
            modal: true,
            width: "720px",
            resizable: true,
            autoOpen: false,
            appendTo: "form",
            dialogClass: "dialogWithDropShadow",
            buttons: {
                ok: function () {
                    myDialog.dialog('close');
                    $('#txtStartDate').val($('#hStart').val())
                    $('#txtEndDate').val($('#hEnd').val())
                },
                Cancel: function () {
                myDialog.dialog('close');
                }
            }
        });

        myDialog.dialog('open');

    }

</script>

    And the post-backs for the calendar (code behind) is this:

    Protected Sub dtStart_SelectionChanged(sender As Object, e As EventArgs) Handles dtStart.SelectionChanged

    hStart.Value = dtStart.SelectedDate

End Sub

Protected Sub dtEnd_SelectionChanged(sender As Object, e As EventArgs) Handles dtEnd.SelectionChanged

    hEnd.Value = dtEnd.SelectedDate

End Sub

    Keep in mind, since this is an update panel, THEN ONLY controls inside of the panel can be changed by code behind. So, we dropped in 2 hidden fields, and that will allow other code to get/grab/use/enjoy the 2 selected values. And on dialog close, I also have some JavaScript code to copy the 2 values from the selected dates to standard text boxes – this was just for demo purposes, but it gives you multiple ways and multiple options for using the selected dates with client-side code, or you can use server-side code and use the 2 hidden field values.

    So, with above, the result is this popup dialog, and one that can have post-backs.

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search