---
title: "Loading image within ajax model poup"  
description: "Loading image within ajax model poup"  
author: "alexander sabato"  
published: 2013-02-11  
updated: 2013-02-11  
canonical: https://www.mindstick.com/forum/583/loading-image-within-ajax-model-poup  
category: "jquery"  
tags: ["jquery"]  
reading_time: 2 minutes  

---

# Loading image within ajax model poup

Hi Everyone!

I have using an AJAX [Model popup](https://www.mindstick.com/forum/34333/how-i-can-call-a-model-popup-with-data-by-using-jquery-in-mvc). Before [content](https://www.mindstick.com/articles/13019/get-the-best-content-marketing-pricing-packages-for-your-brand) loading I want to display loading image if content take time to loading.

My model popup code as below

<script type="text/[javascript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript)">\
$([document](https://www.mindstick.com/articles/328642/what-to-consider-while-choosing-a-software-documentation-tool)).ready([function](https://www.mindstick.com/articles/13001/multi-statement-table-valued-user-defined-function-in-sql-server) () {\
$.ajaxSetup({ cache: false });\
$("#openDialog").live("click", function (e) {\
e.preventDefault(); \
var url = $(this).attr('href');\
$("#dialog-edit").dialog({\
title: '[Download](https://www.mindstick.com/articles/188403/website-to-download-photos-from-instagram)',\
autoOpen: false,\
resizable: false,\
height: 250,\
width: 400,\
show: { [effect](https://yourviews.mindstick.com/view/81363/coronavirus-effect-on-american-farms-is-severe): 'drop', [direction](https://yourviews.mindstick.com/story/5034/10-animals-with-the-best-sense-of-direction): "up" },\
modal: true,\
[draggable](https://www.mindstick.com/blog/31/creating-draggable-content-with-html-5-is-very-simple): 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](https://www.mindstick.com/blog/33258/jee-mains-and-jee-advance-exams)

## Replies

### Reply by AVADHESH PATEL

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


---

Original Source: https://www.mindstick.com/forum/583/loading-image-within-ajax-model-poup

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.