Jquery UI dialog and - loader

Hello experts.
I use the open dialog function with jquery ui and i want to add a loader  to show that something is going on until the pop up wndow opens.
Below is my code.
Any help?
<div id="dialog2" title="Set your profi">
</div>
<script type="text/javascript">
$(function(){
        // Dialog			
				$('#dialog2').dialog({
					bgiframe:true,
					modal:true,
					autoOpen: false,
					width: 600,
					buttons: {
						"Ok": function() { 
							$(this).dialog("close"); 
						}, 
						"Cancel": function() { 
							$(this).dialog("close"); 
						} 
					}
				});
				
				// Dialog Link
				$('#dialog_link2').click(function(){
					$('#dialog2').dialog('open');
					$('#dialog2').load("Includes/register/setProfession.cfm");
					return false;
				});
				 //hover states on the static widgets
        $('#dialog_link2, ul#icons li').hover(
                function() { $(this).addClass('ui-state-hover'); }, 
                function() { $(this).removeClass('ui-state-hover'); }
        );
	});
</script>

Open in new window

LVL 2
PanosAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Albert Van HalenAnalyst developerCommented:
Is this usable?
$('#dialog_link2').click(function(){
    var img = $("<img></img>").attr("src", "pathtoyourajaxloaderimage");
    $('#dialog2').append(img).dialog('open');
    $('#dialog2').load("Includes/register/setProfession.cfm");
    return false;
});

Open in new window

0
PanosAuthor Commented:
Hi AlbertVanHalen:
The code is working fine when i open the dialog only the first time.From that point if i will try to open it again  i have to wait until it has the full code downloaded and than  the dialog opens with the loader in it  for a second in the bottom at the same time.
That was the problem i had in the first place and so i did decide to add a loader.Even if i'm not loading the setProfession.cfm page and instead of that add the code in the div dialog2 i have the same problem
0
PanosAuthor Commented:
Hi AlbertVanhalen.
I did change all my code and split my function in steps instead of using the pop up windows and fill there the forms.Now i have no problem.
Your code is working and before i will accept your answer please help me to place the loader in the center of the pop up window because now it appears on the left.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Albert Van HalenAnalyst developerCommented:
The dialog is always the same width isn't it.
Is the dialog always the same height as well?

If so you can take the height and width of the image, subtract it from the height and width of the dialog and divide it to two.
Position the image absolute within the dialog and set top and left respectively to the values calculated.

Another thing which you can try is the specify the margin-top and margin-left without having to absolute position the image.

Post code if further assistance is needed so I can help you implement it.
0
PanosAuthor Commented:
Hi
I send you another example because i have changed the  first one completely.
the div:
<div id="dialogcalc" title="My pop up"></div>
the image loader:
<img id="loader2" src="../img/ajax-loader3.gif" width="100" height="100"  alt=""/>
and the script:
<script type="text/javascript">
$(function(){
        // Dialog                      
        $('#dialogcalc').dialog({
                autoOpen: false,
            bgiframe:true,
            modal:true,
                width: 400,
                height: 240,
            modal: true,
             
                buttons: {
                        "OK": function() {
                                           
                                $(this).dialog("close");
                        },
                        "Cancel": function() {
                                $(this).dialog("close");
                        }
                }
        });
          // Dialog Link
             $('#dialog_link').click(function(){
               $('#dialogcalc').dialog('open');
               $('#dialogcalc').load("../Includes/calculator/MLKMCalculator.cfm");
                   return false;
                });
 });
</script>
0
Albert Van HalenAnalyst developerCommented:
Sorry panosms, had some issues here...
Check this link : maybe it's usefull for you : http://jsbin.com/ogoru/2
0
PanosAuthor Commented:
Hi again.
it seems to be what i'm looking for.I will be able to check this  late in the afternoon today.
0
PanosAuthor Commented:
Hi AlbertVanHalen.
Here i'm back.
Only one  thing to change
In your example the dialog is loadig the html code in the script.I need here to load an external page (like in my example: $('#dialogcalc').load("../Includes/calculator/MLKMCalculator.cfm");).
0
Albert Van HalenAnalyst developerCommented:
Hi panosms
You can do it like that.
I wanted to load some content into the dialog but cannot do that from other domains.
Loading other content from jsbin (which is iframed content gave me errors)
However, I just updated the code to load the help into the dialog (via load method)

Check it here : http://jsbin.com/ogoru/5
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
PanosAuthor Commented:
That is now perfect!!
Thank you
0
PanosAuthor Commented:
Thank you for your help and the excellent solution.
regards
panos
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Programming Theory

From novice to tech pro — start learning today.