Showing posts with label jQuery UI Dialog. Show all posts
Showing posts with label jQuery UI Dialog. Show all posts

Friday, November 2, 2012

jQuery UI Dialog with ASP.NET button postback issue


Issue:
When we use Asp.Net buttons in a panel, which is displayed as a Dialog using jQuery UI, the
post back events of the buttons do not fire.

Cause:
The cause of the issue it that, jQuery pulls the controls which are used in the dialog out of the form control, hence the post back events of these controls will not fire.

Resolution:
The solution for this issue is to add the controls back to the form, this can be done by adding the following line of code after the dialog script.

var promptDlg = $('#plnConfirm').dialog({ modal: true });
promptDlg.parent().appendTo(jQuery("form:first"));

Full Example
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery Dialog</title>
    <script type="text/javascript"
      src="javascript/jquery-1.7.2.js"></script>
    <script type="text/javascript"
      src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
    <link
      type="text/css"
      href="styles/smoothness/jquery-ui-1.8.21.custom.css"
      rel="Stylesheet" />
    <script language="JavaScript"
      type="text/javascript">
        $(document).ready(function() {
           var promptDlg = $('#plnConfirm').dialog({ modal: true });
           promptDlg.parent().appendTo(jQuery("form:first"));
        });
    </script>
<body id="bodyimg" onload="javascript:setSegOfferOptions();">
    <form id="form1" runat="server">
      <asp:Panel
            ID="plnConfirm"
            style="border:0 double #000000;">
      <br />
      <asp:Label 
            ID="lblConfirm"
            runat="server"
            ForeColor="Maroon">Do you wish to                       
            continue?</asp:Label><br />
      <asp:Button
            ID="cmdYes"
            runat="server"
            Text="Yes"
            onclick="cmdYes_Click" />  
      <asp:Button
            ID="cmdNo"
            runat="server"
            Text="No"
            onclick="cmdNo_Click" />
      </asp:Panel>   
      </form>
</body>
</html>
Posted by at 0 comments
Labels: ,

Monday, August 6, 2012

jQuery UI Dialog

Posted by at 0 comments
Labels: ,

Monday, July 2, 2012

ASP.NET jQueryUI Button: server side event not firing


While using a jQuery UI button inside a Dialog, the button’s click event will not get fired, this is because while adding the control to the Dialog it is moved out of the form hence the click event will not get fired.

To make the click event to get fired, we have 3 options.



The first 2 options will trigger the server side event, but the values entered in the dialog controls will not be available in the server side code.

In the 3rd option, the event will get triggered and the values entered in the dialog controls will be available in the server side code.

1. Setting the UseSubmitBehavior property of the button to false.
    Refer Post: Asp.net jQuery Dialog buttons do Post back using UseSubmitBehavior

2. Adding the post back reference to the button using jQuery.
    Refer Post: Asp.net jQuery Dialog buttons do Post back.

3. Appending the dialog controls back to the form using jQuery.
    Refer Post: Asp.net jQuery Dialog control events not firing

Related Post

Posted by at 0 comments
Labels: , , , ,

Asp.net jQuery Dialog buttons do Post back using UseSubmitBehavior


When you display a DIV tag with Asp.Net server side controls, in a jQuery Dialog the server side events will get disabled and the events will not get fired, this happens because the controls are moved out of the form to display them as a Dialog box.

If you want the fire the click events of the buttons in the Dialog, we can do so by setting the usesubmitbehavior property of the button to false.


<asp:Button ID="cmdSave"
runat="server"
Text="Save"
usesubmitbehavior="false"
      onclick="cmdSave_Click" />

By default this property is set to true, hence the button will depend on the forms submit mechanism to trigger the post-back, when the value is set to false, Asp.Net adds custom code to trigger the buttons postback, without depending on the forms submission.

One drawback of this approach is that the values of the controls in the div tag will not be available in the code-behind, as we are just triggering a post-back and not actually submitting the form, if you want the updated values of the controls to be available in the code-behind then you have to add the elements back to the form, refer the post  Asp.net jQuery Dialog control events not firing to see on how this can be achieved.






Related Post
Asp.net jQuery UI Simple Button Example
jQuery UI Buttons with Icons
Asp.Net jQuery UI Buttons with Icons
Asp.net jQuery button icons - Using a Proxy/Hidden Asp.net button
Asp.net jQuery button icons - Converting Submit types to Button types
Asp.Net jQuery UI Button icons not displaying
Asp.net jQuery Dialog buttons do Post back using UseSubmitBehavior
Asp.Net jQuery UI button change icons
ASP.NET jQueryUI Button: server side event not firing
Asp.net jQuery UI Style Radio Buttons
Asp.net jQuery UI Style Check Boxes
Asp.net jQuery UI Change Button Size / Button Text Font Size
Posted by at 0 comments
Labels: , , , ,

Wednesday, June 27, 2012

Show jQuery UI Dialog is mouse position


In the post Open jQuery dialog on aspnet Button click, we have seen on how to show and hide a jQuery Dialog when an Asp.Net button is clicked, what if we want to display the dialog in the mouse positions, when the user hovers over a link, we shall see on how to get this working.

This feature is useful to display help text information in WebPages, display a help icon or text and when the user hovers the same, display a dialog with the help information.

We can show the dialog in mouse position, by tracking the page X/Y positions.


Here is a full example.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>jQuery Dialog Fading Effect</title>
    <script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
    <link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
        <script type="text/javascript">
            $(document).ready(function()
            {
                $('#lnkShowHere').mouseenter(function(e) {
                    $('#myDialog').dialog(
                    {
                        show: "fade",
                        hide: "fade",
                        position: [e.pageX + 15, e.pageY + 15] 
                    });
                });
                $('#lnkShowHere').mouseleave(function() {
                    $('#myDialog').dialog('close');
                });
            });
    </script>
</head>
<body>
    <form id="frmDialogFading" runat="server">
    <div id="myDialog" style="display:none;" title="Help Test">
        Enter the Zip-Code range in this box
    </div>
    <div>
        Enter Range:
  <asp:TextBox
ID="txtCode"
runat="server">
      </asp:TextBox>  
        <a id="lnkShowHere" href="#">What is this?</a>
    </div>
    </form>
</body>
</html>

Run the application, place the mouse cursor on the What is this? Link, you will see that the Dialog opens near the link, and the Dialog fades out when you remove the mouse cursor from the link.





Posted by at 0 comments
Labels: , , , , , ,

Show Asp.net jQuery Dialog on mouse over


In the post Open jQuery dialog on aspnet Button click, we have seen on how to show and hide a jQuery Dialog when an Asp.Net button is clicked, what if we want to display the dialog when the user hovers over a link, we shall see on how to get this working.

We can show the dialog on mouseover, by tracking the events mouseenter/ mouseleave.


Here is a full example.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>jQuery Dialog Fading Effect</title>
    <script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
    <link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
        <script type="text/javascript">
            $(document).ready(function()
            {
                $('#lnkShow').mouseenter(function() {
                    $('#myDialog').dialog({ show: "fade", hide: "fade" });
                });
                $('#lnkShow').mouseleave(function() {
                    $('#myDialog').dialog('close');
                });
            });
    </script>
</head>
<body>
    <form id="frmDialogFading" runat="server">
    <div id="myDialog" style="display:none;" title="Fading Dialog">
        This is a Fading Dialog
    </div>
    <div>
        <a id="lnkShow" href="#">Show Dialog</a>
    </div>
    </form>
</body>
</html>

Run the application, place the mouse cursor on the Show Dialog link, you will see that the Dialog opens and the Dialog fades out when you remove the mouse cursor from the link.




Posted by at 0 comments
Labels: , , , , , ,
Subscribe to: Posts (Atom)