The user, upon clicking a button(delete) is given the option to delete his account-he must enter his password also to do that.
So I am describing above the 1st ajax request which is made.WHat is returned from the server is a response if there are still bookings(it is a booking web app) made from the user and if he should reconsider-a message appears.
If he insists deleting his account then he must click the delete button again.
The problem(if you have not noticed) is that by clicking again the delete button the above procedure is repeated while the aim now-after the warning message appears-is that the click of the delete button means "yes, despite the bookings I want to delete my account".
So, this delete button must have dual role, one before the warning appear and one after the warning.
What can I do in a situation like this?I was thinking implementing a confirm box but the above are all taking place in a modal box.So a confirm box over a modal I do not think is the correct solution.
Here is the ajax request that is sent when the user first clicks the delete button:
$('.deactivate').click(function(){
event.preventDefault();
var trimmeddelpass=$.trim($('input#del_password').val());
if(trimmeddelpass!=="")
{ $.ajax({
type: "POST",
url: "delaccountajax.php",
data: {"delpass":trimmeddelpass},
success:function(data){
if(data==2)
{$('#warning').html('You have still bookings pending');
$('#warning').show();
}
else if(data==3)
{ window.location.href = "../Frontend/login.php";//proceed deleting the account
}
error:function(jxhr){
alert(jxhr.responseText);}
});
}
Here is the server code:
$output=delete_account($conn,$delpass,$sessionml);
if($output=='2')
{$success='2';}
elseif($output=='3')
{logout();
$success='3';}
echo $success;
Both of the codes above are simplified versions involved since some other stuff were in them too,-they are not needed though for the issue we are dealing.
I have problem implementing the code you propose...it is the right solution of course but...look what is going on,here is the code:
$('.deactivate').click(function(){
event.preventDefault();
deletestate=0;
if(deletestate==0)
{ $.ajax({
type: "POST",
url: "delaccountajax.php",
data: {"delpass":trimmeddelpass},
success:function(data){
if(data==2)
{$('#warning').html('You have booking pending');
$('#warning').show();
deletestate=1
}....
if(deletestate==1){....}
The code above always set the global deletestate to 0,setting it to 1 later has no effect whatsoever...how can i do this?
Related
I have a page that will generate details of a record. When the user comes to this page, he/she will have to press a 'generate' button to create the details of the record. Since it will take some time to generate the record, the moment the user clicks the button, it will trigger an ajax request.
$("#generate_record_button").on("click", function() {
$(this).addClass('disabled');
// Show some loading messages, and spinner
$.ajax({
url: "<generate-record-url/>",
method: 'get',
data: {id: <recordID>},
cache: false
}).success(function (data) {
// Do something on success
// Show some success messages
// Remove spinner
}).fail(function (data) {
// Do something on failure
// Show some error messages
// Remove spinner
$(this).removeClass('disabled');
});
});
In the code, currently when the user presses the button, the button will be disabled to prevent from potential multiple ajax requests being triggered if user keeps pressing the button. By right, user should only press the button once and just let the ajax handles the request accordingly.
My question is, is there a way to check if the ajax request is still running in the event when the user leaves the page? (Eg: refresh the page, navigate to other page, etc etc). What I would hope to achieve is that if the user re-visits back this page while the ajax is still processing the record (for that particular record ID), the button will remain disabled so that user can't press it and will see some loading messages. Is this possible?
Your user should not leave the page while ajax is running since it will be cancelled.
How about
$(window).on('beforeunload', function(){
if ($("#generate_record_button").hasClass("disabled"))
return 'Are you sure you want to leave?';
})
I have been working with JQuery and Bootstrap 3. On my Login form I have and option where user can click on forgot password link. That will open Modal box where they can enter their email and submit that form. However, this all works fine but I have one thing that I really don't like. So let's say user enter the email and send request, if email is incorrect they will see the message eon the screen with alert box in red. I have set this to show for 15 seconds and then disappear. So if user foes right away and try to enter email again and message returns back timer is not reset. They will see that message for lets say 5 seconds since timer counted 10 seconds from the previous message already. I'm not sure what would be the best option to work around this problem. I use JQuery delay() to set the timer and fade() to add effect on the element. Here is example of my code:
$('#Forgot-Form').on('submit', function(e){
e.preventDefault();
var frmEmail = $.trim($('#user-email').val());
$.ajax({
type: 'POST',
url: 'Functions.cfc?method=checkAccount',
data: {'email':frmEmail},
dataType: 'json'
}).done(function(obj){
if(obj.STATUS == "200"){
$('#accountBox').removeClass().addClass('alert alert-success').show().html('<stron>Success!</strong>').delay(15000).fadeOut('slow').queue(function(){
$(this).removeClass('alert alert-success').dequeue();
});
}else{
$('#accountBox').removeClass().addClass('alert alert-danger').show().html('<strong>Error!</strong>').delay(15000).fadeOut('slow').queue(function(){
$(this).removeClass('alert alert-danger').dequeue();
});
}
}).fail(function(jqXHR, textStatus, errorThrown){
alert("Error: "+errorThrown);
});
});
I use .dequeue() to remove the class but that will happen after delay is timed out. If anyone knows what is the better option to handle these situations please let me know.
I have to admit that I don't really know how to explain this "problem" that I have nor was I able to find a good title for this thread. Anyway, I will try to be clear because I'm not sure if I could add a JSFiddle or code snippet.
Let's start with the project. I'm working on some kind of DVD Library to be used on a local network only. There's a page that allow a user to add new films to the database. To do this, I use the Allocine API (A French equivalent to IMDB) to gather films informations. The user can enter a film title (Or part of it) and perform a search. All the corresponding films from Allocine will then appear.
If the user click on one of them, a modal window opens embedding a form that will allow the user to add the needed informations before sending the form. The form is then sent using AJAX and the result appear in the same modal window.
The problem come when I want to add a second film. If I don't reload the page before trying to submit the form another time, the value from the first film will be sent instead of them from the second one and that is driving me crazy.
Here's the javascript code used to send the form.
$("body").on( "click", "#AddFilmButton", function() {
var formDatas = $('#FormAjoutFilm').serialize();
$.ajax({
url : 'Functions.php',
type : 'POST',
data : 'Action=AddFilm&' + formDatas,
cache: false,
dataType : 'html',
success : function(result, statut){
$(result).modal();
},
});
});
You may notice that I'm watching a button click event instead of a form submit event. That's because when I used the form submit event, the page was refreshed all the time, no matter if I was using preventDefault or not.
I'm starting to wonder if the sent value are not reset exactly because I have used this workaround. Could it be just that ?
What other piece of code would be useful to help you understand my problem ?
EDIT : just like #intale suggested, I have multiple form in the DOM because of this modal system. I made some progress with it. First, I can now use a proper event handler and I'm watching the form submit event as preventDefault now works.
In the success function, I have added this line : $('#FormAjoutFilm').remove();
It works almost as intended in that the datas are submitted only every other time. :p
Still, it's better than the previous behavior and I need to fix it now.
Thanks for anyone who contributed so far. If you know why I need to send the form two times to get it work, let me know. This is what I have now. :)
$("body").on( "submit", "#FormAjoutFilm", function(e) {
e.preventDefault();
var formDatas = $('#FormAjoutFilm').serialize();
alert(formDatas);
$.ajax({
url : 'Functions.php',
type : 'POST',
data : 'Action=AddFilm&' + formDatas,
cache: false,
dataType : 'html',
success : function(result, statut){
$('#FormAjoutFilm').remove();
$(result).modal();
},
});
});
Second Edit : It looks like it's finally solved after a cache clearing. Thanks for everyone who contributed. :)
Try reseting the form after the data is sent:
success : function(result, statut){
$('#FormAjoutFilm')[0].reset();
$(result).modal();
}
This will prevent your serialize function from getting the first submit data
I have a menu bar which contains links for web pages. Now I want to add a login form with username and password with submit button in dilaogue box with locked screen on clicking of particular web pages. Its a kind of double login authentication.. As soon as log in submit button is clicked it should go to database to check the entered credentials and if it is correct will lead or show the clicked link..
To check the credentials I have made ajax call to server side code.. but I dont know how to add dialogue box and after success lead to required clicked page...
Here is my ajax call code..
$.ajax({
type: 'GET',
url: 'logincredit',
async:false,
dataType: "text",
success: function(data) {
}
});
Please guys help me ..
Thanks in advance..
You can add dialog script inside the success function.
like this
success: function(data){
if(data.d==true)
//show dialog code
else
//show something else
}
I'm designing a rather long form that will auto-save every couple minutes (i.e., using Ajax, the form data will be inserted or updated into the MySQL database). However, if the user decides to exit the page before submitting the form, I want to make sure I delete the row that was inserted into the database. This is easily do-able if the user simply clicks another link or the form's Cancel button. But I'm concerned about what happens when the user: 1) closes the page, 2) reloads the page, or 3) hits the browser's back (or forward) button. I know how to use the unload event to create a confirmation dialog asking the user to confirm they want to leave the page. But what I don't know is how to make an Ajax call (to delete that row from the database) if the user clicks OK ("Press OK to Continue"). Is there any way to call a function if a user clicks the OK button during the unload event?
window.onbeforeunload = function() {
if ($('#changes_made').val() == 'yes') //if user (partially) filled out the form
{
return "Are you sure?"
if (/*user clicks OK */) //What should the if statement evaluate here?
{
//make Ajax call
}
}
};
$(document).ready(function() {
$(':input',document.myForm).bind("change", function() {
setConfirmUnload(true);
}); // Prevent accidental navigation away
});
function setConfirmUnload(on) {
// To avoid IE7 and prior jQuery version issues
// we are directly using window.onbeforeunload event
window.onbeforeunload = (on) ? unloadMessage : null;
}
function unloadMessage() {
if(Confirm('You have entered new data on this page. If you navigate away from this page without first saving your data, the changes will be lost.')) {
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
}
}
Make sure you have upgraded version of jQuery. jQuery version 1.3.2 had a bug:
Ticket #4418: beforeunload doenst work correctly
Or use native function:
window.onbeforeunload = function() {....}