How to show/hide modal popup before and after send message to clients using jquery in asp.net c#

Question

How to show/hide modal popup before and after send message to clients using jquery in asp.net c#

Ashok Kumar 221

I want to show a modal popup message before sending the messages to clients and hide that modal popup after sent messages to clients (show/hide) to achieve this concept I have written below logic. Note(my logic should work like this):- While sending the messages to clients the modal popup should show like "you will receive messages shortly please wait a moment once done popup will close" and once all messages sent to clients the modal popup should hide.


Modal popup logic:-

<div class="modal fade " id="modal_loader" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-bs-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-body">
                            <div class="form-group row">
                                <div class="loader"> <img src="assets/images/loding_animation.gif" /></div>
                                <p> <center>you will receive messages shortly please wait a moment once done popup will close</center></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

HTML logic is:-

<a href="javascript://" title="Export to Whatsapp" id="plrepobulkwhatsapp" onclick="plreportexportexcel_pdftoemail()" class="btn btn-success">Email</a>

And jquery logic is:-

function plreportexportexcel_pdftoemail() {

$("#modal_loader").modal('show');

var msg = Successmessage("abc");
if (msg != "")
        {
            $("#modal_loader").modal('hide');
            alert(bulkexcelpdfmsg);
        }

}

In Successmessage(code) method I written the ajax logic to execute the GenerateCustomPDF_ExcelBulk method and getting the msg return data.

aspx.cs:-

[WebMethod]
public static string GenerateCustomPDF_ExcelBulk(string clientcode)
{    
        string msg = "";

       //Here I written my required logic and returned the success message 
       //msg = "success";
        return msg;
}

Here my requirement is if I click the <a> tag my plreportexportexcel_pdftoemail() method will execute and should show the modal_loader popup message and once I receive the msg response from backend GenerateCustomPDF_ExcelBulk method the modal_loader popup message should hide like this I have written logic but it is not executing properly.

Suggest me where I did the mistake in my code to show/hide the popup msg?

Sorry for my bad English.

New:- Added Successmessage Function Loigic :-

function Successmessage(clientcode) {

//$("#modal_loader").modal('show');

var sus = "";
var param = { clientcode: clientcode };

var res = $.ajax({

    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "reports.aspx/GenerateCustomPDF_ExcelBulk",
    dataType: "json",
    //data: "{}",
    data: JSON.stringify(param),
    success: function (response) {


        //$("#modal_loader").modal('hide');

        sus = response.d;

    },
    async: false,
    error: function (err) {
        console.log("eror is ==> .. " + err);
    }

});



return sus;
}

1 answer

Your answer

Answer 1

Hi @Ashok Kumar,

I tested your code and I think it's because of the version of the library you are using.

You can use the following libraries.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
   <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' />

and delete the code circled below.

User's image

All Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
   <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' />
    <script>
        function plreportexportexcel_pdftoemail() {

            $("#modal_loader").modal('show');

            var msg = Successmessage("abc");
            if (msg != "") {
                $("#modal_loader").modal('hide');
              
            }

        }
        function Successmessage(clientcode) {

            //$("#modal_loader").modal('show');

            var sus = "";
            var param = { clientcode: clientcode };

            var res = $.ajax({

                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "reports.aspx/GenerateCustomPDF_ExcelBulk",
                dataType: "json",
                //data: "{}",
                data: JSON.stringify(param),
                success: function (response) {


                    //$("#modal_loader").modal('hide');

                    sus = response.d;

                },
                async: false,
                error: function (err) {
                    console.log("eror is ==> .. " + err);
                }

            });



            return sus;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
      <div class="modal fade " id="modal_loader" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-bs-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-body">
                            <div class="form-group row">
                                <div class="loader"> <img src="8.gif" /></div>
                                <p> <center>you will receive messages shortly please wait a moment once done popup will close</center></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <a href="javascript://" title="Export to Whatsapp" id="plrepobulkwhatsapp" onclick="plreportexportexcel_pdftoemail()" class="btn btn-success">Email</a>
    </form>
</body>
</html>

 [WebMethod]
        public static string GenerateCustomPDF_ExcelBulk(string clientcode)
        {
            string msg = "aaa";

            //Here I written my required logic and returned the success message 
            //msg = "success";
            return msg;
        }

Here are my test results:

enter image description here Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Ashok Kumar 221 Reputation points

2023-07-22T08:33:24.1366667+00:00

Hi @Lan Huang-MSFT thanks for your answer post and I have used you provided CDN links and executed logic and my entire page went like this below image (screen styles are not applied properly )

I'm using these links and my screen is working fne

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Share via

How to show/hide modal popup before and after send message to clients using jquery in asp.net c#

1 answer

Your answer