Loading bar while submitting jquery ajax post, don't show up - javascript

I'm using jQuery UI dialog modal form.
All works great, but I send an ajax post, so I added this code:
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 500,
width: 550,
modal: true,
buttons: {
"Create an account": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
if ( bValid ) {
$.ajax({ url: 'about.php',
data: {name: name.val(), email: email.val()},
type: 'post',
async: false
});
}
}
}
});
The $.ajax part is what I added.
I want to show a Loading bar while processing the post, I added this code:
$('#progress')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});
But it doesn't work, my post goes to a php script which one have 2 seconds waiting time.
It just don't show the #progress div, so the .hide is working.
Also, for example if I add $( "#dialog-form" ).dialog({ hide: "slide" }); before the $.ajax it doesn't work, it hides once all button function is finished.
Thanks.

If your #progress div is only show during this ajax call, why don't you put the show/hide action on your button action ?
Like this :
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 500,
width: 550,
modal: true,
buttons: {
"Create an account": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
if ( bValid ) {
// show before ajax call
$('#progress').show();
$.ajax({ url: 'about.php',
data: {name: name.val(), email: email.val()},
type: 'post',
async: true,
complete: function() {
//hide on complete
$('#progress').hide();
}
});
}
}
}
});
Hope this will help.

Related

Sending a form to a php script using jQuery dialog

I am attempting to send an email using a php script which is sent through the jquery dialog box when the user clicks the 'submit' button but I cant get this script to work. I have the dialog box in html:
<div id="join-dialog" class="join-dialog">
<p>Please fill in your details to join the mailing list</p>
<table>
<form action="" method="post">
<tr><td><label for="name">NAME</label></td><td><input id='form-name' type="text" name="name"/></td></tr>
<tr><td><label for="email">EMAIL</label></td><td><input id='form-email' type="email" name="email"/></td></tr>
<tr><td><label for="email">POSTCODE</label></td><td><input id='form-post' type="text" name="postcode"/></td></tr>
</form>
</table>
</div>
and I have this jQuery:
$(function() {
function addUser(){
var name = document.getElementById("#form-name");
var email = document.getElementById('#form-email');
var post = document.getElementById('#form-post');
if(name !==0 || email!==0 || post!==0){
$.ajax({
url: 'sendemail.php',
type: 'POST',
data: ('name, email, post'),
success: function(){
document.getElementById('#join-dialog').innerHTML("<h2>Thank you for joining the mailing list</h2>");
}
});
}else{
document.getElementById('#join-dialog').append = "There was an error with your form details";
}
};
$( ".join-dialog" ).dialog({
dialogClass: "no-close",
autoOpen: false,
show: {
effect: "fade",
duration: 300
},
hide: {
effect: "fade",
duration: 300
},
modal: true,
buttons:{
'SUBMIT': addUser,
'CLOSE': function(){
$(this).dialog('close');
}
}
});
$( "#open1" ).click(function() {
$( ".join-dialog" ).dialog( "open" );
});
});
which adds the dialog buttons and executes code in order to fire off an email using the sendemail.php which is here:
<?php
$name= $_POST['name'];
$postcode = $_POST['post'];
$email = $_POST['email'];
$email_to = 'xyz123#hotmail.com';
$email_subject = 'New mailing list subscriber';
$email_message = "Your new subscriber is: ".$name."\n"."Postcode: ".$postcode."\n"."Email: ".$email."\n";
mail($email_to, $email_subject, $email_message);
echo '<p style=\'font-size: 16px;\'>You have been added to Kaylee\'s mailing list!</p>';
echo '<br />';
echo '<br />';
?>
there seems to be a problem and I can't figure out what it is, if anyone can point me in the right direction that would be great thanks.
Your html and css looks good, but the js has some errors, it might still have some:
function addUser() {
var name = $("#form-name").val(),
email = $('#form-email').val(),
post = $('#form-post').val();
if (name !== 0 || email !==0 || post !== 0) {
$.ajax({
url: 'sendemail.php',
type: 'post',
data: {
'name': name,
'email': email,
'post': post
},
success: function() {
$('#join-dialog').html("<h2>Thank you for joining the mailing list</h2>");
}
});
} else {
$('#join-dialog').append("There was an error with your form details");
}
}
$( ".join-dialog" ).dialog({
'dialogClass': "no-close",
'autoOpen': false,
'show': {
'effect': "fade",
'duration': 300
},
'hide': {
'effect': "fade",
'duration': 300
},
'modal': true,
'buttons': {
'submit': addUser,
'close': function() {
$(this).dialog('close');
}
}
});
$( "#open1" ).click(function() {
$( ".join-dialog" ).dialog("open");
});

jquery dialog add button after ajax call

I have a dialog window that has some confirmation stuff in it as the result of a form submit:
$('#newUserDialog').dialog({
autoOpen: false,
width: 600,
modal: true,
resizable: false,
close: function() {
window.location.reload(true);
},
buttons: {
"Complete": function() {
$.ajax({
type: "POST",
url: "checkData.php",
data: formData+"&complete=1",
success: function(result){
alert(result);
$('#newUserDialog').html('User has been built');
}
});
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
when the user clicks complete, it fires off the ajax call and does checkdata.php stuff. when that is complete I want to remove "Complete" and "Cancel" and add a button "Continue". The continue button will reload the page. how can i accomplish this?
currently in this code, it works as desired but if the user doesn't like what he sees in confirmation window before he clicks Complete, if he clicks cancel, it reloads page. I only want to reload page after the ajax call.
You can use following for adding new button in ajax callback;
var buttonSet = $('#newUserDialog').parent().find('.ui-dialog-buttonset');
var newButton = $('<button>Continue</button>');
newButton.button().click(function () {
window.location.reload(true);
});
buttonSet.html(newButton);
You can see demo here: jsfiddle
<script>
var myModalExample;
$(function() {
myModalExample = $( "#newUserDialog" ).dialog({
autoOpen: true,
width: 600,
modal: true,
resizable: false,
close: function() {
window.location.reload(true);
},
buttons: {
"Complete": function() {
$.ajax({
type: "POST",
url: "checkData.php",
data: formData+"&complete=1",
success: function(result){
myModalExample.dialog({ buttons: [ { text: "Continue", click: function() { $( this ).dialog( "close" ); } } ] });
}
});
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
</script>

Custom confirm pop

I'm trying to customize confirm message using plugins. I have php tables records that has delete button every row. How I can customize the confirm pop up just like in jquery plugins below?
<?php echo'
<tr class="record">
<td align="center"><img src="images/del.png"></td></tr>';
?>
<script>
$(function() {
$(".delbutton").click(function(){
var element = $(this);
var del_id = element.attr("id");
var info = 'id=' + del_id;
if(confirm("Are you want to continue ?"))
{
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function(){
}
});
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
}
return false;
});
});
</script>
Jquery Plugins
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
</head>
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
Hope this helps:
<?php echo'
<tr class="record">
<td align="center"><img src="images/del.png"></td></tr>';
?>
<script>
$(function() {
$(".delbutton").click(function(){
var element = $(this);
var del_id = element.attr("id");
var info = 'id=' + del_id;
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function(){
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast").animate({ opacity: "hide" }, "slow");
}
});
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
return false;
}
}
}); // end Dialog
return false;
}); // end .delbtn
}); // end jquery load
</script>
If you need more help, just ask.
"Delete all items": function() {
// insert your ajax here
$( this ).dialog( "close" );
},
Reference: .dialog()

JQuery UI Multiple Dialog Issue

I have functionality where I dynamically create Dialog. Some time I require Modal or Confirm Dialog
So I created to Function
function createDialogWithOutClose()
{
jQuery('#divPopup').dialog('destroy');
var dialog = jQuery('#divPopup').dialog({
autoOpen: false,
height: 450,
width: 650,
modal: true,
open: function(event, ui){
jQuery('body').css('overflow','hidden');
}
});
jQuery('#divPopup').dialog('open');
}
and
function createConfirmDialog(url,params)
{
jQuery('#divPopup').dialog('destroy');
var dialog = jQuery('#divPopup').dialog({
autoOpen: false,
resizable: false,
modal: true,
show: "blind",
hide: "explode",
open: function(event, ui){
jQuery('body').css('overflow','hidden');
},
buttons: {
Ok: function() {
jQuery( this ).dialog( "close" );
jQuery.ajax({
type: "POST",
url: url,
data: params
});
},
Cancel: function() {
jQuery( this ).dialog( "close" );
}
}
});
jQuery('#divPopup').dialog('open');
}
Problem here is when I give call to this function, It opens previously opened Dialog.
I guess previous instance is not get removed.It doesnt dynamically create Dialog
Any solution??
Have a look at http://docs.jquery.com/UI/Dialog/dialog#method-destroy
jquery: How to completely remove a dialog on close
http://groups.google.com/group/jquery-ui/browse_thread/thread/4f9804ccb01c1bc8/5b1971d1f0abf1fa?pli=1
Simply use a flag to check dialog state (close/open)
var Open = false;
$('button').click(function () {
if (!Open) {
Open = true;
$(newDiv).dialog({
close: function (event, ui) {
Open = false;
}
});
} else {
alert("Close opened dialog first");
}
});

JQuery Dialog that calls remote script via ajax

I'm trying to get JQuery's dialog to send data to a remote script whenever the 'Add' Button is clicked in the dialog button, but my script seems to die at the .ajax and nothing is showing up in my console to give me a clue as to the error:
$( "#button" ).dialog({
resizable: false,
title: "Confirm",
height:140,
modal: true,
autoOpen: false,
buttons: {
"Add": function() {
var data = $('.part1').serialize()
$.ajax({
url: "/www/htdocs/test.pl",
type: "GET",
data: data,
cache: false,
success: function {
$('#div1').fadeOut('slow');
$('#div2').fadeIn('slow');
}
});
return false;
},
Cancel: function() {
$(this).dialog( "close" );
}
}
});
<div id="div1">
<input class="part1" type="hidden" value="Jon" name="fname">
<input class="part1" type="hidden" value="Doe" name="lname">
<input class="part1" type="hidden" value="jon#doe.com" name="email">
<input id="button" type="button" value="button">
</div>
<div id="div2">Complete</div>
You got a few syntax errors (which do show up in FireBug):
Add ; at the end of:
var data = $('.part1').serialize()
like:
var data = $('.part1').serialize();
Add () after success: function
like:
success: function()
Making the full code like this:
$( "#button" ).dialog({
resizable: false,
title: "Confirm",
height:140,
modal: true,
autoOpen: false,
buttons: {
"Add": function() {
var data = $('.part1').serialize();
$.ajax({
url: "/www/htdocs/test.pl",
type: "GET",
data: data,
cache: false,
success: function()
{
$('#div1').fadeOut('slow');
$('#div2').fadeIn('slow');
}
});
return false;
},
Cancel: function() {
$(this).dialog( "close" );
}
}
});
with those fixes, working fine here:
http://jsfiddle.net/YzhG9/10/

Categories