Home > DeveloperSection > Forums > Loading image within ajax model poup
alexander sabato
alexander sabato

Total Post:4

Points:28
Posted on    February-11-2013 1:33 AM

 JQuery JQuery 
Ratings:


 1 Reply(s)
 1102  View(s)
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 



AVADHESH PATEL

Total Post:604

Points:4228
Posted on    February-11-2013 6:43 AM

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

Don't want to miss updates? Please click the below button!

Follow MindStick