locked
Linking update action to the close button of jquery dialog. RRS feed

  • Question

  • User1294399168 posted

    Dear,

    I would like to link an event to the jquery dialog closing button.
    I'll do my best to describe the situation:
    I have a kind of agenda with 5 days (monday to friday) each day can have 20 rows.
    When you click on a rox of a specific day, a jquery dialog appears which contains an iFrame (linking to agenda_lestijd.aspx)
    where the user can put data and save it by means of a button in the page (agenda_lestijd.aspx).
    When I close the jQuery dialog I like to launch the event of btnUpdate which means that only the row op the specific day will be updated and not whole the page.
    At this moment I put the btnUpdate button on the page and it works perfectly ....but I hope that there is a way to use the close-button of the jquery dialog box.

    HTML code + jquery:
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js"></script>
    <link type="text/css" rel="Stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/smoothness/jquery-ui.css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js"></script>
    <link type="text/css" rel="Stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/smoothness/jquery-ui.css"/>
    <script type="text/javascript">
    $(document).ready(function () {
    $('a#pop').live('click', function (e) {
    e.preventDefault();
    var page = $(this).attr("href")
    var pagetitle = $(this).attr("title")
    var $dialog = $('<div></div>')
    .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
    .dialog({
    autoOpen: false,
    modal: true,
    height: 800,
    width: 1200,
    title: pagetitle,
    close: ReloadPage,
    position: ["center", 20]
    });
    $dialog.dialog('open');
    });
    });
    function ReloadPage() {
    alert('test');
    }
    </script>

    this is one of the updatepanels:
    <asp:UpdatePanel ID="UpdatePanel2" runat="Server" UpdateMode="Conditional">
    <ContentTemplate>
    <tr>
    <asp:Button ID="btnUpdate" UseSubmitBehavior="false" runat="server" onClick="btnUpdate_Click" Text ="Update" />
    <asp:Label ID="labWeekOverzichtLestijd1_2" runat="server" Text=""></asp:Label>
    <asp:Label ID="labWeekOverzichtLestijd2_2" runat="server" Text=""></asp:Label>
    <asp:Label ID="labWeekOverzichtLestijd3_2" runat="server" Text=""></asp:Label>
    <asp:Label ID="labWeekOverzichtLestijd4_2" runat="server" Text=""></asp:Label>
    <asp:Label ID="labWeekOverzichtLestijd5_2" runat="server" Text=""></asp:Label>
    </tr>
    </ContentTemplate>
    </asp:UpdatePanel>

    I fill the agenda with a function in the codebehind:

    For i = 1 To 20
    fillLestijd(lestijd_index:=i, lestijden:=lestijden)
    Next

    Private Sub fillLestijd(ByVal lestijd_index As Integer, ByVal lestijden As Array) //here is also the link for activating the jquery dialog
    labWeekOverzichtLestijd = "<td class='" + Session("dagkleur") + "'><span class='" + titelkleur + "'><a id='pop' href='agenda_lestijd.aspx?" & Session("weeknummer") & "&datum=" & datum & "&lestijd=" & var & "' title='Lestijden'><img src= 'graphics/edit1.png'></a>"
    end sub

    This is the code for the update of just one row:
    Protected Sub btnUpdate_Click(sender As Object, e As EventArgs)
    fillLestijd(lestijd_index:=aantal, lestijden:=lestijden)
    Select Case aantal
    Case 1
    UpdatePanel1.Update()
    Case 2
    UpdatePanel2.Update()
    Case 3
    UpdatePanel3.Update()
    Case 4
    UpdatePanel4.Update()
    Case 5
    UpdatePanel5.Update()
    Case 6
    UpdatePanel6.Update()
    Case 7
    UpdatePanel7.Update()
    Case 8
    UpdatePanel8.Update()
    Case 9
    UpdatePanel9.Update()
    Case 10
    UpdatePanel10.Update()
    Case 11
    UpdatePanel11.Update()
    Case 12
    UpdatePanel12.Update()
    Case 13
    UpdatePanel13.Update()
    Case 14
    UpdatePanel14.Update()
    Case 15
    UpdatePanel15.Update()
    Case 16
    UpdatePanel16.Update()
    Case 17
    UpdatePanel17.Update()
    Case 18
    UpdatePanel18.Update()
    Case 19
    UpdatePanel19.Update()
    Case 20
    UpdatePanel20.Update()
    End Select
    End Sub

    Can I get help for this topic?? Thxs

    Tuesday, March 24, 2020 8:45 AM

All replies

  • User-1330468790 posted

    Hi resource18,

     

    I understand that you want to attach an event to the close button of jquery dialog which will be able to call the code behind method to do the following things :

    1.Assign/change the content of the label controls inside the update panel control

    2.Update the update panel control to display the change.

     

    That way, I just provide you with an approach without thinking your actual logic.

    Solution:

    Use the __doPostBack function of the .net framework to pass the parameters to server and call the method from the code behind.

      

    More details, you can refer to below code:

    .aspx Page:  Ignore the content inside the iframe

    <head runat="server">
        <title></title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="https://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js"></script>
        <link type="text/css" rel="Stylesheet" href="https://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/smoothness/jquery-ui.css" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js"></script>
        <link type="text/css" rel="Stylesheet" href="https://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/smoothness/jquery-ui.css" />
    
        <script type="text/javascript">
            $(document).ready(function () {
                $('a#pop').live('click', function (e) {
                    e.preventDefault();
                    var page = $(this).attr("href")
                    var pagetitle = $(this).attr("title")
                    var $dialog = $('<div></div>')
                        .html('<iframe style="border: 0px; " src="GridViewJquery.aspx" width="100%" height="100%"></iframe>')
                        .dialog({
                            autoOpen: false,
                            modal: true,
                            height: 800,
                            width: 1200,
                            title: pagetitle,
                            close: ReloadPage,
                            position: ["center", 20]
                        });
                    $dialog.dialog('open');
                });
            });
            function ReloadPage() {
                //First argument:EventTarget, Second Argument:EventArgument
                //you can design the target by your self
                __doPostBack("UpdatePanel", 2);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <a id="pop" href="xxxxxx.page">Click me to get pop up</a>
                <asp:UpdatePanel ID="UpdatePanel2" runat="Server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <tr>
                            
                            <asp:Label ID="labWeekOverzichtLestijd1_2" runat="server" Text=""></asp:Label>
                            <asp:Label ID="labWeekOverzichtLestijd2_2" runat="server" Text=""></asp:Label>
                            <asp:Label ID="labWeekOverzichtLestijd3_2" runat="server" Text=""></asp:Label>
                            <asp:Label ID="labWeekOverzichtLestijd4_2" runat="server" Text=""></asp:Label>
                            <asp:Label ID="labWeekOverzichtLestijd5_2" runat="server" Text=""></asp:Label>
                        </tr>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </form>
    </body>

    Code behind:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    ' You can use IsPostBack for your conditions Dim parameter As Integer = Convert.ToInt32(Request("__EVENTARGUMENT")) Dim target As String = Request("__EVENTTARGET") If target = "UpdatePanel" Then UpdatePanel(parameter) End If End Sub Private Sub fillLestijd() labWeekOverzichtLestijd1_2.Text = "Success1" labWeekOverzichtLestijd2_2.Text = "Success2" labWeekOverzichtLestijd3_2.Text = "Success3" labWeekOverzichtLestijd4_2.Text = "Success4" labWeekOverzichtLestijd5_2.Text = "Success5" End Sub Protected Sub UpdatePanel(ByVal panelNo As Integer) fillLestijd() If panelNo = 2 Then UpdatePanel2.Update() End If End Sub

    Demo:

     

    Hope this can help you.

    Best regards,

    Sean

    Wednesday, March 25, 2020 2:41 AM
  • User1294399168 posted

    Dear Sean,

    Thank you for the reply and the effort you made in finding a solution for my problem.
    I tried in the way you suggested, but it did not work. The page reloads completely.
    I spend much time in solving this problem and I deceided to start from scratch again in building all the stuff.

    Anyway, I thank you for you effort. Have a nice day and keep it healthy !!

    Serge

    Friday, March 27, 2020 7:34 AM