LOADING IMAGE WITHIN AJAX MODEL POUP

alexander sabato

Total Post:4

Points:28
Posted by  alexander sabato
JQuery 
 1541  View(s)
Ratings:
Rate this:

Hi Everyone!

I have using an AJAX Model popup. Before content loading I want to display loading image if content take time to loading.

My model popup code as below

<script type="text/javascript">
        $(document).ready(function () {
            $.ajaxSetup({ cache: false });
            $("#openDialog").live("click", function (e) {
                e.preventDefault();               
                var url = $(this).attr('href');
                $("#dialog-edit").dialog({
                    title: 'Download',
                    autoOpen: false,
                    resizable: false,
                    height: 250,
                    width: 400,
                    show: { effect: 'drop', direction: "up" },
                    modal: true,
                    draggable: true,
                    open: function (event, ui) {
                        $(this).load(url);
                    },
                    close: function (event, ui) {
                        $(this).dialog('close');
                    }
                });
                $("#dialog-edit").dialog('open');
                return false;
            });
</script>

Please help me!

Thanks in advance 

  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: Loading image within ajax model poup

    Hi Alexander!


    Try below line of code

    $("#dialog-edit").ajaxStart(function () {
                        $(this).html("<img src='../../Content/images/ajaxLoading.gif' style='margin-top:20%; margin-

    left:45%;' />");
                    });

    Implementation method

    <script type="text/javascript">
            $(document).ready(function () {
                $.ajaxSetup({ cache: false });
                $("#openDialog").live("click", function (e) {
                    e.preventDefault(); 
    $("#dialog-edit").ajaxStart(function () {
                        $(this).html("<img src='../../Content/images/ajaxLoading.gif' style='margin-top:20%; margin-

    left:45%;' />");
                    });               
                    var url = $(this).attr('href');
                    $("#dialog-edit").dialog({
                        title: 'Download',
                        autoOpen: false,
                        resizable: false,
                        height: 250,
                        width: 400,
                        show: { effect: 'drop', direction: "up" },
                        modal: true,
                        draggable: true,
                        open: function (event, ui) {
                            $(this).load(url);
                        },
                        close: function (event, ui) {
                            $(this).dialog('close');
                        }
                    });
                    $("#dialog-edit").dialog('open');
                    return false;
                });
    </script>

    Note: <style> tag used for set loading image in model center

      Modified On Feb-11-2013 06:58:05 AM

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!