Let the user see something

[Carsten Wuttke]

Hi,

i have some tabs with ajax-content. But as that Ajax-Content is very intense, I'd like to show the viewer something like a waiting-icon. But I can't put it inside an update-panel (if that would even work) because page1 is standard-content. Is there a solution know/possible?

[Prince Oliver]

Hi Carsten,   

  

Thank you for contacting Syncfusion support.   

  

We can use waiting popup control with tab control and display it when tab contents are being loaded. We have prepared a simple sample as per your requirement, kindly refer to the following link for the sample: http://www.syncfusion.com/downloads/support/forum/131013/ze/tabwithwaitingpopup1256650883 

  

Please refer to the following KB link for showing waiting popup during postback: https://www.syncfusion.com/kb/3721/how-to-show-the-ejwaitingpopup-control-during-postback 

  

Regards,   

Prince   

[Carsten Wuttke]

Hey Prince,

thx in the first. But I can't put it my use somehow. To be more precise:

I have one page with 3 tabs. The first tab is loaded by default within the page (could be changed if needed). The other two have an URL-Parameter which loads when the tab is selected. Can you follow me and help please?

[Prince Oliver]

Hi Carsten,    

Thank you for your update. 

In the sample provided previously, we have also added a tab with first tab item loaded by default and another tab item using URL. In order to display waiting popup control we need have used ClientSideOnActive event on tab to fetch the data of the URL instead of giving the URL directly in the URL property of tab item. Kindly refer to the following code snippet. 

<script> 

    var dataLoaded = false, popupObj; 

    function active() { 

        if (!dataLoaded) {      // To check the ajax data is already loaded or not 

            $.ajax({ 

                type: "GET", 

                url: "http://localhost:57773/Content/samplecontent/mvccontent.html", 

                dataType: "html", 

                beforeSend: function () { 

                    if (!popupObj) { 

                        $("#MVC").ejWaitingPopup({ 

                            showOnInit: true 

                        });     // Creating the WaitingPopup to the tab content div before Ajax Send. 

                    } 

                    else { 

                        popupObj.refresh(); 

                        popupObj.show(); 

                    } 

                }, 

                success: function (data) { 

                    setTimeout(function () {                 // Data is retrieved from the local page not from Online. So that, here setTimeOut used to show the WaitingPopup 

                            

                        $("#MVC").ejWaitingPopup('hide'); 

                        $('#MVC').html(data); 

                        dataLoaded = true; 

                    }, 3000); 

                }, 

            }); 

        } 

    } 

 

</script> 

When the tab item is active, active() method is triggered. There we check if the data is already loaded and created an ajax request to get the contents of the URL. In the ajax beforeSend method we create an waiting popup for the tab item. On the ajax success method, we append the data into the tab item’s content and hide the waiting popup. 

If you have any issues, please provide us a sample replicating your scenario. It will help us provide you solution. 

Regards, 

Prince