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?
 
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
 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
 
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
 
PanosAuthor Commented:
That is now perfect!!
Thank you
0
 
PanosAuthor Commented:
Thank you for your help and the excellent solution.
regards
panos
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.