How to get waiting popup in place of a button

[Shalini]

On click of a button till a particular message is sent i want to show waiting popup instead of a button and after few seconds i want the waiting popup to go

and again replace it with button.

this is the html tag for button where i even want my waiting popup

   input id="target" style="width:70%" type="button" class="btn btn-primary" value="Invite" onclick="invite('{{:id}}')" 

   

I have attached the file below.

Attachment: Screenshot_(16)_e4d6c494.rar

[Keerthana Rajendran]

Hi Shalini,   

   

Thank you for contacting Syncfusion Support.   

   

We have prepared a sample based on your scenario by passing a message to Controller on button click through AJAX post and shown waiting popup till the message is sent. Please refer to the below given code.   

   

<div id="ControlRegion">   

  <input id="target" style="width:70%" type="button" class="btn btn-primary" value="Invite" onclick="send()" />   

  @Html.EJ().WaitingPopup("target").ShowOnInit(false)   

   

    <script>   

        function send() {   

            var obj = $("#target").ejWaitingPopup("instance");   

            obj.show(); //show waitingpopup   

            $.ajax({   

                url: '@Url.Action("SendMessage")',   

                data: { 'Message':"Message passed from View to Controller" },   

                type: "post",   

                success: function (result) {   

                    setTimeout(function () { obj.hide() }, 500);  //hide waitingpopup   

                }   

            });   

        }   

    </script>   <style type="text/css" class="cssStyles">   

         #target_WaitingPopup {   

            z-index: 5 !important;   

        }   

   

            #target_WaitingPopup .e-image {   

                display: block;   

                height: 50px;   

            }   

    </style>   

</div>   

   

You can set showOnInit property to false to hide the WaitingPopup during page load. You can show or hide this popup using show and hide methods of WaitingPopup.    

   

We have attached a sample for your reference which can be downloaded from the below link.   

   

http://www.syncfusion.com/downloads/support/forum/136830/ze/WaitingPopup92238960   

   

Please refer the below UG for customization of WaitingPopup   

   

https://help.syncfusion.com/aspnetmvc/waitingpopup/appearance-and-styling   

   

Note: We have used setTimeout just to show the WaitingPopup for few seconds. You can remove this while including in your sample.   

   

Regards,                                                                        

Keerthana.