locked
Not able to show message RRS feed

  • Question

  • User364663285 posted

    Dear,
    In js file, I have

    function ShowMessage(msg0) {
        $.alert({
            title: '信息',
            content: msg0,
            buttons: {
                OK: {
                    text: 'OK',
                    btnClass: 'btn-green',
                    keys: ['enter'],
                    action: function () {
                        //$.alert('You clicked OK!');
                    }
                }
            }
        });
        return false;
    };
    

    but I cannot show the message by this. Why?

                    Page.ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowMessage('记录已经储存好。');", true);
    

    Saturday, September 29, 2018 12:52 PM

Answers

  • User283571144 posted

    Hi wmec,

    According to your description, I suggest you could modify the jconfirm-buttons class in the page.

    More details, you could refer to below codes:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestForAlertScript.aspx.cs" Inherits="AspNetNormalIssue.TestForAlertScript" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
           <link rel="stylesheet" type="text/css" href="StyleSheet1.css"/>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
        <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css"/> 
        <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
        <script type="text/javascript"  src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>    
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=474OwxLkambWRwf8oWjOOECwD5j0ntj5"></script>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
        <script>
            function ShowMessage(msg0) {
                $.alert({
                    title: '信息',
                    useBootstrap: false,
                    content: msg0,
                    buttons: {
                        OK: {
                            text: 'OK',
                            btnClass: 'btn-green',
                            keys: ['enter'],
                            action: function () {
                                //$.alert('You clicked OK!');
                            }
                        }
                    }
                });
                return false;
            };
        </script>
        <style>
            .jconfirm-buttons {
        float: left;
        left: -50%;
        ;
    }
        </style>
    </head>
    <body>
    
        <form id="form1" runat="server">
            <div>
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
             </div>
        </form>
    </body>
    </html>
    

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 2, 2018 6:06 AM

All replies

  • User-369506445 posted

    do you add the jquery <g class="gr_ gr_14 gr-alert gr_spell gr_inline_cards gr_disable_anim_appear ContextualSpelling ins-del multiReplace" id="14" data-gr-id="14">refernce</g>?

    you have to add below <g class="gr_ gr_71 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="71" data-gr-id="71">referenceto</g> your HTML code

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
    <script> function ShowMessage(msg0) { $.alert({ title: '信息', content: msg0, buttons: { OK: { text: 'OK', btnClass: 'btn-green', keys: ['enter'], action: function () { //$.alert('You clicked OK!'); } } } }); return false; }; </script>

    Saturday, September 29, 2018 1:00 PM
  • User364663285 posted

    I already have such codes (as the scripts)

        <link rel="stylesheet" type="text/css" href="StyleSheet1.css"/>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
        <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css"/>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
        <script type="text/javascript"  src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>    
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=474OwxLkambWRwf8oWjOOECwD5j0ntj5"></script>
    

    why can't I show the message?

    Saturday, September 29, 2018 3:30 PM
  • User-369506445 posted

    I tried it and worked for me, please put here your complete code, HTML and code behind

    Saturday, September 29, 2018 4:24 PM
  • User753101303 posted

    Hi,

    Use F12 to see what happens (such as 404 not found or a JavaScript error).

    Sunday, September 30, 2018 11:53 AM
  • Sunday, September 30, 2018 3:09 PM
  • User753101303 posted

    So $.alert is not defined at all. It seems to comes from jquery-confirm ? Have you tried to include jquery-confirm as suggested already by vahid ?

    Sunday, September 30, 2018 4:03 PM
  • User364663285 posted

    I have put

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
    

    but now the prompt is too big like

    https://1drv.ms/u/s!Ai8CrEskdewXmzvwT0UD40HY24Y2

    Monday, October 1, 2018 2:25 AM
  • User-369506445 posted

    I suggest First, you create a new project and try my code and if it works then check it with your main project what it is different if it doesn't work then put your error here 

    you can try below

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
        <script src="JavaScript1.js"></script>
         
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
            </div>
        </form>
    </body>
    </html>

    code behind

    protected void Page_Load(object sender, EventArgs e)
            {
                Page.ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowMessage('记录已经储存好。');", true);
            }

    Monday, October 1, 2018 6:25 AM
  • User753101303 posted

    According to the documentation it seems you should be able to customze the width using https://craftpip.github.io/jquery-confirm/#custom-width-without-bootstrap 

    Start with siomething simple and test as you are looking at the documentation to enhance the default behavior..

    Monday, October 1, 2018 7:07 AM
  • User283571144 posted

    Hi wmec,

    As @PatriceSc says, you should customze the alert box to disable the Bootstrap, then it will work well.

    More details ,you could refer to below codes:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestForAlertScript.aspx.cs" Inherits="AspNetNormalIssue.TestForAlertScript" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
           <link rel="stylesheet" type="text/css" href="StyleSheet1.css"/>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
        <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css"/> 
        <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
        <script type="text/javascript"  src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>    
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=474OwxLkambWRwf8oWjOOECwD5j0ntj5"></script>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
        <script>
            function ShowMessage(msg0) {
                $.alert({
                    title: '信息',
                    useBootstrap: false,
                    content: msg0,
                    buttons: {
                        OK: {
                            text: 'OK',
                            btnClass: 'btn-green',
                            keys: ['enter'],
                            action: function () {
                                //$.alert('You clicked OK!');
                            }
                        }
                    }
                });
                return false;
            };
        </script>
    </head>
    <body>
    
        <form id="form1" runat="server">
            <div>
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
             </div>
        </form>
    </body>
    </html>
    

    Result:

    Best Regards,

    Brando

    Monday, October 1, 2018 7:59 AM
  • User364663285 posted

    Thanks to all.

    Is there one way to adjust to put OK button in the middle of prompt below?
    https://1drv.ms/u/s!Ai8CrEskdewXmzyx0XoRrJTM8-ST

    Monday, October 1, 2018 9:51 AM
  • User283571144 posted

    Hi wmec,

    According to your description, I suggest you could modify the jconfirm-buttons class in the page.

    More details, you could refer to below codes:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestForAlertScript.aspx.cs" Inherits="AspNetNormalIssue.TestForAlertScript" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
           <link rel="stylesheet" type="text/css" href="StyleSheet1.css"/>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
        <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css"/> 
        <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
        <script type="text/javascript"  src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>    
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=474OwxLkambWRwf8oWjOOECwD5j0ntj5"></script>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
        <script>
            function ShowMessage(msg0) {
                $.alert({
                    title: '信息',
                    useBootstrap: false,
                    content: msg0,
                    buttons: {
                        OK: {
                            text: 'OK',
                            btnClass: 'btn-green',
                            keys: ['enter'],
                            action: function () {
                                //$.alert('You clicked OK!');
                            }
                        }
                    }
                });
                return false;
            };
        </script>
        <style>
            .jconfirm-buttons {
        float: left;
        left: -50%;
        ;
    }
        </style>
    </head>
    <body>
    
        <form id="form1" runat="server">
            <div>
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
             </div>
        </form>
    </body>
    </html>
    

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 2, 2018 6:06 AM