I'm using JQueryFullCaledar and have written a function to hijack the eventclick. By default it just ran this code:
var id = event.id;
$.ajax({
url:"delete.php",
type:"POST",
data:{id:id},
success:function()
{
calendar.fullCalendar('refetchEvents');
//alert("Event Removed");
}
})
I've hijacked this event to instead open a context menu offering three options:
Edit, Delete Close Menu. If they choose delete it runs the same function as before but with an if statement (aided by sweet alerts) to check they're sure.
If they choose close, it just closes the menu
If they choose edit it sends the Id of the appointment over to a PHP file via AJAX so I can update it. I've noticed when updating a bunch of them the appointment isn't correct after the first couple of opens. So, I added a catch to alert the ID of the appointment before runnning AJAX.When I open my first appointment, I get an alert with the first appointment ID. I close that, then open another, at which point I first get an alert with the first ID, then a second with the new ID, then opening another appointment gives me those two alerts and a third with the third appointments ID and so on... I've tried setting the ID to blank on clicking cancel or save on the edit file but no luck.
Here's the whole code for the event click function:
eventClick:function(event)
{
$('.appt_menu').removeClass('hidden').css( {position:"absolute", top:event.pageY, left: event.pageX});
$('a.close_menu').on("click",function(){
$('.appt_menu').addClass('hidden');
})
$('a.edit_appt').on("click",function(){
$('.appt_menu').addClass('hidden');
//show me the ID before sending it via AJAX
alert(event.id);
$('#modalwindow').load("Form_Edit_Appt.php", {id: event.id}, function(data) { calendar.fullCalendar('refetchEvents');});
$('.backdropper, #modalwindow').addClass('show');
}); //end of edit appt function
$('a.delete_appt').on("click",function(){
$('.appt_menu').addClass('hidden');
swal({
title: "Are you sure you want to delete this Appointment?",
text: "Once deleted, you will not be able to recover this imaginary file!",
icon: "warning",
buttons: ["Not that one!", "Yep, delete it!"],
//buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal("Your Appointment has been deleted!", {
icon: "success",
});
var id = event.id;
$.ajax({
url:"delete.php",
type:"POST",
data:{id:id},
success:function()
{
calendar.fullCalendar('refetchEvents');
//alert("Event Removed");
}
})
} else {
swal("Your Appointment has not been removed!");
}
});
})
},
You are binding event handlers every time you do your initial eventClick. Try unbinding with off() every time you set the click handlers so any previously set handlers are removed.
Example:
$('a.edit_appt').off().click(function() {
//your code
});
You're attaching an event handler to the edit_appt on each click of the calendar. When you attach a handler the previous one isn't removed, it stacks up. You should attach it only once (or remove the previous handler before attaching a new one). You could store the event id to a variable and use that in the click handler.
var eventId;
eventClick: function(event) {
$('.appt_menu').removeClass('hidden').css({
position: "absolute",
top: event.pageY,
left: event.pageX
});
eventId = event.id;
}
$('a.close_menu').on("click", function() {
$('.appt_menu').addClass('hidden');
});
$('a.edit_appt').on("click", function() {
if (!eventId)
return;
$('.appt_menu').addClass('hidden');
//show me the ID before sending it via AJAX
alert(eventId);
$('#modalwindow').load("Form_Edit_Appt.php", {
id: eventId
}, function(data) {
calendar.fullCalendar('refetchEvents');
});
$('.backdropper, #modalwindow').addClass('show');
}); //end of edit appt function
$('a.delete_appt').on("click", function() {
if (!eventId)
return;
$('.appt_menu').addClass('hidden');
swal({
title: "Are you sure you want to delete this Appointment?",
text: "Once deleted, you will not be able to recover this imaginary file!",
icon: "warning",
buttons: ["Not that one!", "Yep, delete it!"],
//buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal("Your Appointment has been deleted!", {
icon: "success",
});
var id = eventId;
$.ajax({
url: "delete.php",
type: "POST",
data: {
id: id
},
success: function() {
calendar.fullCalendar('refetchEvents');
//alert("Event Removed");
}
})
} else {
swal("Your Appointment has not been removed!");
}
});
});
Related
i'm using sweetalert in ajax post data, and have a div element that i want to hide after page reload, from the code below what i can do to do that :
$(document).ready(function() {
$(document).on('click', '#approve', function() {
swal.fire({
title: 'Are you sure ?',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes',
cancelButtonText: 'Cancel',
}).then((result) => {
if (result.value) {
$('.leftForms').each(function(e) {
valuesToSend = $(this).serialize();
$.ajax($(this).attr('action'), {
url: 'data.php',
type: 'POST',
method: $(this).attr('method'),
data: valuesToSend
})
.done(function(response) {
swal.fire({
title: 'Data berhasil diupdate!',
text: response.message,
icon: 'success'
}).then(function() {
location.reload();
localStorage.removeItem('leftcontent');
localStorage.getItem('rightcontent', data);
});
})
});
}
})
});
});
i want to hide this, at the moment after location.reload(), is that possible ?
<div id="content1">
<p>blaa..blaa.. bla..</p>
</div>
Why are you reloading the page ? You can hide remove the div using JavaScript instead.
Instead of location.reload(); do $("#content1").remove(); to remove the element or $("#content1").hide() to hide it.
Also localStorage.removeItem('leftcontent'); and localStorage.getItem('rightcontent', data); isn't being executed.
if you want this choice to actually persist you need to save something to a database for clear reasons, you could use local storage but it will be cleared if the user clears the cache, just save the choice to the local storage then just check for that var when the page reloads and remove the element with:
...
.then(function() {
localStorage.setItem('choice','hide');
location.reload();
$(document).ready(function() {
if(localStorage.getItem('choice')=='hide'){
$("#content1").remove();
}
...
but as #Gazmend pointed out you don't even need to reload the page, just remove the element instead of reloading if reloading is not necessary for other reasons
When I use Ajax sweet Alert doesn't show image. I'm working with laravel.
This is my code, if I delete the ajax function or I use a image from another website it works.
I really have no clue, I think laravel need some kind of authetication from a Ajax request. Please help me out!
$(document).ready(function() {
$('.confirmation').click(function(e) {
e.preventDefault(); // Prevent the href from redirecting directly
var linkURL = $(this).attr("href");
warnBeforeRedirect(linkURL);
});
function warnBeforeRedirect(linkURL) {
swal({
title: "Are you sure?",
text: "Once deleted, you will not be able to recover this team!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal({
title: "Checking...",
text: "Please wait",
icon: icons,
button: false,
allowOutsideClick: false
});
$.ajax({
url: linkURL,
type: 'GET',
success: function(result){
swal("The team was deleted!");
}
});
} else {
swal("The team was NOT deleted!");
}
});
}
});
I am using Bootbox for my modals and I am having trouble in showing the form validation errors from an Ajax call to the modal. The callback function for the submit button on my modal calls the add_college function to submit the form via Ajax.
When there are validation errors, the modal is populated with validation errors. The problem is that the modal closes regardless if there are validation errors or not. I want the modal to not close only when there are no validation errors.
I know I can just return false in the callback function on my button when there are validation errors to not close it but I have no way of knowing if there are validation errors since I cannot return a value in the Ajax call since it is asynchronous. What is the proper way of doing it?
Here is my code:
$('#new-college-btn').click(function () {
bootbox.dialog({
title: "New College",
message:
''// <Insert long HTML form here>
,
buttons: {
add: {
label: "Add",
className: "btn btn-primary",
callback: function () {
var form_data = {
college_name: $('#college-name').val(),
college_initials: $('#college-initials').val(),
username: $('#username').val(),
password: $('#password').val(),
confirmation_password: $('#confirmation-password').val()
};
add_college(form_data);
}
},
cancel: {
label: "Cancel",
className: "btn btn-default"
}
}
}); // end bootbox dialog
});
function add_college(form_data) {
console.log(form_data);
$.ajax({
url: 'admin/add_new_college',
type: 'POST',
data: form_data,
dataType: 'JSON',
success: function (response)
{
if (response.error) { // there are form validation errors
// populate modal with validation errors here
} else {
// other data processing here
Result.success('College Successfully Added!');
}
},
error: function () {
console.log("fail");
}
});
}
If you want to control when the dialog closes, make sure the callback for your "submit" button always returns false. Then, in the done() (and probably fail()) callbacks for the ajax function, call bootbox.hideAll() to close the dialog (along with any other dialogs you may have opened).
If you want to only close the current dialog, do something along this line:
var dialog = bootbox.dialog({
/* rest of your options... */,
buttons: {
submit: {
label: "Submit",
callback: function() {
var data = [];
$.post('/url', data)
.done(function(result, status, jqxhr){
// if everything went well...
dialog.modal('hide');
})
.fail(function(jqxhr, status, error){
// etc.
});
return false;
}
}
}
});
Basically, create a reference to the dialog, which you can then use inside of the ajax callback.
My web page deletes a row in a table and save it automatically in database. I need a messageBox after clicking on delete button, with two buttons "save" and "No".
Delete function on jsp is below:
function deleteFileRow(rowCount)
{
$.ajax(
{
url: 'deleteRow.htm?rowIndex='+rowCount+"&action=delete&id="+${id},
success: function(data)
{
document.location.reload();
}
});
}
Please help me in doing this.
Use jquery confirm box to add yes or no.
ConfirmDialog('Are you sure');
function ConfirmDialog(message){
$('<div></div>').appendTo('body')
.html('<div><h6>'+message+'?</h6></div>')
.dialog({
modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
Yes: function () {
// $(obj).removeAttr('onclick');
// $(obj).parents('.Parent').remove();
$(this).dialog("close");
},
No: function () {
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
};
ref http://jsfiddle.net/nM3Zc/
here you can find how to pop a messageBox with yes/no and question in javascript
and you can use that if you aren't determined on "save"/"no"
var nRslt = app.alert ("Press \"yes\" to save\n" + "Press \"No\" to delete";, 2, 2, "Submit Validation");
if(nRslt == 4) { // User Pressed Yes, Do submission
this.submitForm(...);
}
The problem is solved with the following code:
function deleteFileRow(rowCount){
var stay=confirm("Are you sure, You want to delete Row? Click "ok" to confirm, "cancel" Otherwise")
if(stay)
{
$.ajax({
url: 'deleteRow.htm?rowIndex='+rowCount+"&action=delete&testid="+${testid},
success: function(data) {
document.location.reload();
}
});
}
}
Ajax call would be inside "confirm".
I have a table with a list of names, their attributes and comments for each record. I want to be able to display the comments in a tooltip, and also be able to update those comments via Ajax. I would like to show a tooltip or a modal by clicking on a link. This modal will have a textarea with the comments preloaded. The user can modify the comments and submit them to the action page via Ajax. On successful submission the existing tooltip content will also need to be updated.
Any help would be greatly appreciated.
I am using the qtip2 and tipsy plugins.
I am loading the form in the qTip2 tooltip, onclick, through ajax. The link to the form is brought over from the rel tag. Now when I submit the form, it doesn't submit through ajax but directly the action page. This is my JS code:
$('.commentsedit').each(function()
{
// We make use of the .each() loop to gain access to each element via the "this" keyword...
$(this).qtip(
{
content: {
// Set the text to an image HTML string with the correct src URL to the loading image you want to use
text: '<img class="throbber" src="images/throbber.gif" alt="Loading..." />',
ajax: {
url: $(this).attr('rel') // Use the rel attribute of each element for the url to load
},
title: {
text: $(this).attr('title'), // Give the tooltip a title using each elements text
button: true
}
},
position: {
at: 'bottom center', // Position the tooltip above the link
my: 'top right',
viewport: $(window), // Keep the tooltip on-screen at all times
effect: false // Disable positioning animation
},
show: {
event: 'click',
solo: true // Only show one tooltip at a time
},
hide: 'unfocus',
style: {
classes: 'my_width_setting_class qtip-wiki qtip-light qtip-shadow'
},
events: {
render: function(event, api) {
// Capture the form submission
$('form', this).bind('submit', function(event) {
// Grab and store input elements
var inputs = $(':textarea', this);
// Common ajax error handler
function errorHandler(jqXHR, message) {
// Set the error and show/hide it
$('.error', api.elements.tooltip).html(message || '').toggle(!!message);
}
// Setup AJAX request
$.ajax({
url: 'commentsform.cfm',
data: $(this).serialize(),
type: 'post',
dataType: 'json',
success: function(data, status, jqXHR) {
// On success, show message and refresh after 2 seconds
if(data.status === 'success'){
api.set('content.text', data.message + ' Redirecting...');
setTimeout(function(){ window.location.reload() }, 2000);
}
// Call error handler on error status too.
else { errorHandler(jqXHR, data.message); }
},
error: errorHandler,
// Disable/Enable input elements
beforeSend: function() { inputs.attr('disabled', 'disabled'); },
complete: function() { inputs.removeAttr('disabled'); inputs[0].focus(); }
});
// Prevent normal form submission
event.preventDefault();
});
}
}
})
})
Although an old question, I think that someone will find useful the solution proposed to a similar problem in the qtip2 developer's site and specifically in
http://craigsworks.com/projects/forums/showthread.php?tid=3680
Edit: in response to a comment I reproduce the main part of the answer as a reference:
$('a[class=qTipForm][rel]').each(function(){
var formName = $(this).attr('name');
$(this).qtip({
content: {
//text: '<iframe src="'+$(this).attr('rel')+'" height="400px" width="700px" frameborder="0"></iframe>',
text: 'Loading...',
ajax: {
url: $(this).attr('rel'),
success: function(data) {
// Set the tooltip contents
this.set('content.text', data);
// Bind the form submit event
$('#' + formName).bind('submit', function(event) {
// Grab and store input elements
var inputs = $(':input','#' + formName);
// Common ajax error handler
function errorHandler(jqXHR, message) {
// Set the error and show/hide it
$('.error', api.elements.tooltip).html(message || '').toggle(!!message);
}
// Setup AJAX request
$.ajax({
url: $('#' + formName).attr('action'),
data: $('#' + formName).serialize(),
type: 'post',
dataType: 'json',
success: function(data, status, jqXHR) {
// On success, show message and refresh after 2 seconds
if(data.status === 'success'){
api.set('content.text', ' Redirecting...');
setTimeout(function(){ window.location.reload() }, 2000);
}
// Call error handler on error status too.
else { errorHandler(jqXHR, data.message); }
},
error: errorHandler,
// Disable/Enable input elements
beforeSend: function() { inputs.attr('disabled', 'disabled'); },
complete: function() { inputs.removeAttr('disabled'); inputs[0].focus(); }
});
// Prevent normal form submission
event.preventDefault();
})
}
},
title: {
text: $(this).attr('title'),
button: true
}
},
position: {
my: 'center',
at: 'center', // Position the tooltip above the link
target:$(window),
effect: false // Disable positioning animation
},
show: {
event: 'click',
solo: true, // Only show one tooltip at a time
modal: true
},
hide: false,
style: {
classes: 'viewTipForm ui-tooltip-rounded ui-tooltip-light',
tip: false
}
})
.click(function(event) { event.preventDefault(); });
})