jQuery ui dialog loading status indicator in dialog title bar

[nath2099]

Hi, I'm using the following code for a jQuery ui dialog login box located at www[dot]testsite[dot]freelance[hyphen]crew[dot]com

 

$('body').append('<div id="dialogPopup"></div>');

function updateTips( t ) {
tips
	.text( t )
	.addClass( "ui-state-highlight" );
}

function checkInput(email,password) {
$.ajax({
	url: 'path/formProcess.php',
	dataType: 'json',
	type: 'POST',
	async: 'false',
	data: "email=" + email.val() + "&password=" + password.val(),
	success: function(data) {
		if (data.status == "success") {
			$('#dialogPopup').dialog('close');
			location.reload(true);
		} else {
			$('#' + data.div).addClass( "ui-state-error" );
			updateTips( data.message );
		}
	},
});	
}

$('#dialogPopup').dialog({
  autoOpen: false,
  modal: true,
  width: 400,
  height: 300,

});

$('#ajaxLogin').live('click', function(e) {
e.preventDefault();
var obj = $(this);
var dia = $('#dialogPopup');
dia.html('');
dia.load(obj.attr('href'))
.dialog({title: obj.attr('title')})
.dialog('open');
			var options = {
    			buttons: {
				"Log In": function(){
					email = $( "#email" ),
					password = $( "#password" ),
					allFields = $( [] ).add( email ).add( password ),
					tips = $( ".validateTips" );
					tips.removeClass( "ui-state-highlight");
					tips.text("");
					allFields.removeClass( "ui-state-error" );
					checkInput( email, password);
				},
				"Reset Password": function() { 
					$(this).html("");
					$(this).load("path/resetPassword.html"); 
					var options = {
						buttons: {
							'Reset Password': function () {
								$(this).dialog('close');
								// add code here
							}
						},
						title: "Reset Password"
					};
					$(this).dialog('option', options);
				},
				"Register": function(){}
			}
		};
dia.dialog('option', options);
});

click login.

 

I'm wondering if there is a way to display a loading.gif beside the close "X" in the title bar of the dialog while performing ajax calls?

I'm guessing I need to extend a class or something... if someone can point me in the right direction that would be great!

[AyKay47]

you will need to edit how the dialogue box is constructed, should be in the css file that you were given during the install..im not exactly sure what classes are given to the dialogue box..shouldn't be too hard to find though