Calling Jquery from Button

4 posts, 0 answers
  1. Michael
    Michael avatar
    5 posts
    Member since:
    Nov 2011

    Posted 23 Nov 2011 Link to this post

    Hi, I have a jquery modal popup on my page.

    I can open it fine with a regular asp.net button
    <asp:Button ID="btnQuery" OnClientClick="showDialog('newRecord');return false;" runat="server" Text="Open Modal" />

    but i cannot open it using the RadButton
    <telerik:RadButton ID="btnOpen" runat="server" Text="Open Modal" onclientclicked="showDialog('newRecord');return false;"></telerik:RadButton>

    I am not sure what I am doing wrong here. 
    Thanks for any assistance
  2. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 23 Nov 2011 Link to this post

    Michael,

    You want something like this ...
    <telerik:RadButton ID="btnOpen" runat="server" Text="Open Modal" onclientclicked="showDialog;" CommandName="newRecord" AutoPostBack="false"></telerik:RadButton>

    Then in your javascript code, modify you showDialog function something like this...
    function showDialog(sender, e)
    {
      var arg = e.get_commandName();
      // Your original function code goes here.
    }

    Obviously, if your showDialog method only ever does the one thing, you don't need to bother with the command argument.

    -- 
    Stuart

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael
    Michael avatar
    5 posts
    Member since:
    Nov 2011

    Posted 23 Nov 2011 Link to this post

    Thanks for you response.  I have tried this and could still not get it to work.
    I have provided all code this time.

    ------------------------------------------------------------------------------
    Original Method (Working but not with a Telerik Button)

    <asp:Button ID="btnQuery" OnClientClick="showDialog('newRecord');return false;" runat="server" Text="Open Modal" />
     
     function showDialog(id) {
             $('#' + id).dialog("open");
         }

         function closeDialog(id) {
             $('#' + id).dialog("close");
         }    
                         

    ------------------------------------------------------------------------------
    Suggest Method (Could not get this to work)

     <telerik:RadButton ID="btnOpen" runat="server" Text="Open Modal" onclientclicked="showDialog;" CommandName="newRecord" AutoPostBack="false"></telerik:RadButton>

         function showDialog(sender, e) {
             var arg = e.get_commandName();
             $('#' + arg).dialog("open");
         }

         function closeDialog(sender, e) {
             var arg = e.get_commandName();
             $('#' + arg).dialog("open");
         }    


    ------------------------------------------------------------------------------
    // Jquery Window
    $(document).ready(function () {
    $('#newRecord').dialog({
                 autoOpen: false,
                 modal: true,
                 draggable: true,
                 resizable: false,
                 width: 1000,
                 height: 600,
                 title: "Create SMS",
                 open: function (type, data) {
                     $(this).parent().appendTo("form");
                 }
             });
    });

    Thanks Again
  5. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 25 Nov 2011 Link to this post

    Michael,

    I can't speak to the dialog plugin you have; I have no idea which it is, however, the following code does work....
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <head runat="server">
            <title></title>
        </head>
        <body>
            <form id="form1"
                  runat="server">
                <telerik:RadScriptManager runat="server"
                                          ID="RadScriptManager1"></telerik:RadScriptManager>
                <telerik:RadScriptBlock runat="server"
                                        ID="RadScriptBlock1">
                    <script type="text/javascript">
                        function showDialog(sender, e)
                        {
                            var cmd = e.get_commandName();
                            radalert("Command was '" + cmd + "'", 200, 100, "Information");
                        }
                    </script>
                </telerik:RadScriptBlock>
                <telerik:RadButton runat="server"
                                   ID="RadButton1"
                                   AutoPostBack="false"
                                   Text="OpenModal"
                                   OnClientClicked="showDialog"
                                   CommandName="NewRecord"></telerik:RadButton>
                <telerik:RadWindowManager runat="server"
                                          ID="RadWindowManager1"
                                          Modal="true"></telerik:RadWindowManager>
            </form>
        </body>
    </html>

    Try this. If it works but substituting your dialog plugin for the radalert call doesn't then you may need to look to that.

    Hope this helps.

    -- 
    Stuart
Back to Top