I add the event to fullcalendar somewhere in far future. after that I refetchEvents() to have it displayed. Unfortunately fullcalendar goes back to current day, week or month and do not stay in edited day, week or month.
Is there any way to prevent it? Thanks.
I am not sure if that will be sufficient part of code:
if (deleteEvent){
$.ajax({
type: 'POST',
url: 'reservation-delete.php',
data: {
id: eventId
},
success: function (feedbackJsonString){
const feedbackJson = JSON.parse(feedbackJsonString);
calendar.refetchEvents();
}
});
} else {
if (eventId == 0) {
$.ajax({
type: 'POST',
url: 'reservation-add.php',
data: {
id: eventId,
start: eventStartDateTime,
end: eventEndDateTime,
title: eventTitle
},
success: function (feedbackJsonString){
const feedbackJson = JSON.parse(feedbackJsonString);
calendar.refetchEvents();
}
});
} else {
$.ajax({
type: 'POST',
url: 'reservation-edit.php',
data: {
id: eventId,
start: eventStartDateTime,
end: eventEndDateTime,
title: eventTitle
},
success: function (feedbackJsonString){
const feedbackJson = JSON.parse(feedbackJsonString);
calendar.refetchEvents();
}
});
}
}
If some specific part of code would be needed pls let me know.
Related
I'm trying to figure out the proper way to refetch one single event (when I add an event and when I update an event)
I'm currently using calendar.refetchEvents(); which will refetch all the events after adding/updating an event but it would be better if I could only refetch that single event.
I use events as a function like so
eventSources: [
{
events:function(fetchinfo, successCallback, failureCallback) {
$.ajax({
type:'GET',
url: '/rdv/data',
data:{
start:moment(fetchinfo.start).format('YYYY-MM-DD HH:mm'),
end:moment(fetchinfo.end).format('YYYY-MM-DD HH:mm'),
},
success: function(data) {
let arrayEvents = [];
$.each(data, function (key) {
arrayEvents.push( {
title: "title",
start: data[key].date_debut_rdv,
end: data[key].date_fin_rdv,
extendedProps: {
id: data[key].id,
nom_client: data[key].animal.client.nom_client,
prenom_client: data[key].animal.client.prenom_client,
id_client: data[key].animal.client.id,
nom_animal: data[key].animal.nom_animal,
},
});
});
successCallback(arrayEvents);
},
error: function(data){
//
}
})
}
}
]
Add an event inside a dateClick
$.ajax({
type: "POST",
url: "/rdvs/ajoutRdv",
data: {
_token: "{{ csrf_token() }}",
client_id: client_id,
animal_id: animal_id,
date_debut_rdv: date_debut_rdv,
statut_rdv_id: statut_rdv_id,
prestations: prestations,
tvas: tvas,
supplements: supplements,
},
success: function () {
calendar.refetchEvents();
$('#modalEditRdv').modal('hide');
},
error: function(data) {
//
});
}
})
Update an event inside an eventClick
$.ajax({
type: "POST",
url: "/rdvs/click/"+id,
data: {
_token: "{{ csrf_token() }}",
rdv_id: event.event.extendedProps.id,
client_id: client_id,
animal_id: animal_id,
date_debut_rdv: date_debut_rdv,
statut_rdv_id: statut_rdv_id,
prestations: prestations,
tvas: tvas,
supplements: supplements,
},
success: function (data) {
calendar.refetchEvents();
//I could do something like this without making a request to the server
//but is there another way ?
//event.event.setExtendedProp("nom_animal", data[0].nom_animal);
//event.event.setStart(data[1]);
//event.event.setEnd(data[2]);
$('#modalEditRdv').modal('hide');
},
error: function(data) {
//
}
})
I see there is EventSource::refetch but it would refetch all the events as well if I'm correct ?
A little help would be very appreciated,
Thank you !
I have a webshop, where user can order products only 1 piece/product. I need to check if that user already has same product in cart and if is, alert that and not add that product to cart again. If product is not in cart, add it to cart.
This is first what I tried, but it always adds product to cart even terms in If is true. Problem is cart.
$(".glyphicon-shopping-cart").on("click", function() {
$(this).css("color", "#29d646");
var BookID = $(this).parent().parent().prev().prev().prev().prev().prev().prev().text();
$.ajax({
type: 'GET',
url: '/api/selections/' + BookID,
dataType: 'json',
headers: {
'Authorization': 'Bearer ' + localStorage.getItem('accessToken')
},
success: function(sel) {
//check if Book is in cart already
$.ajax({
type: 'GET',
url: '/api/carts',
dataType: 'json',
success: function(cart) {
if (cart.CompanyID == JSON.parse(localStorage.getItem('userName')) && cart.ISBN == sel.ISBN) {
alert('Product is already in cart');
} else {
var toCart = {
CompanyID: JSON.parse(localStorage.getItem('userName')),
Orderdate: getdate(),
ISBN: sel.ISBN,
BookName: sel.BookName,
Author: sel.Author,
Publisher: sel.Publisher,
Price: sel.Price,
Season: sel.Season,
IsInCart: true,
};
$.ajax({
type: 'post',
url: '/api/Carts',
data: toCart,
success: function() {
console.log('Added to cart ' + BookID);
location.reload();
},
error: function() {
alert('Virhe!');
}
});
}
}
});
}
});
});
This in another way I tried to do this, now IF -statement is working but still product is added to cart. What should I do?
//check if Book is in cart already
$.ajax({
type: 'GET',
url: '/api/carts',
dataType: 'json',
success: function(cart) {
$.each(cart, function(i, carts) {
if (carts.CompanyID == JSON.parse(localStorage.getItem('userName')) && carts.ISBN == sel.ISBN) {
alert('Product is already in cart');
}
})
var toCart = {
CompanyID: JSON.parse(localStorage.getItem('userName')),
Orderdate: getdate(),
ISBN: sel.ISBN,
BookName: sel.BookName,
Author: sel.Author,
Publisher: sel.Publisher,
Price: sel.Price,
Season: sel.Season,
IsInCart: true,
};
$.ajax({
type: 'post',
url: '/api/Carts',
data: toCart,
success: function() {
console.log('Added to cart ' + BookID);
location.reload();
},
error: function() {
alert('Virhe!');
}
});
}
});
}
I don't know if this is right approach to this, if someone has better solution, please let me know.
var present=false;
$.each(cart, function(i, carts) {
if (carts.CompanyID == JSON.parse(localStorage.getItem('userName')) &&
carts.ISBN == sel.ISBN) {
alert('Product is already in cart');
present=true;
}
})
if(present===false){
other ajax part
}
You can get out of the function immediately by adding return. It 'early exits' the function and will prevent the program to proceed in adding cart.
if (...) {
alert('Product is already in cart');
return;
}
I want to post form's data to php after the user submit.
The question is that the form is created by jquery in ajax.
The form creating looks like:
$.ajax({
type: "POST",
url: "myphp.php",
data: {label: label},
success: function(result) {
for (i = 0; i<result.item.length; i++){
var itemData= result.item[i].itemData;
var div = $("<div class ='detail'></div>");
// the form will not be displayed, until the parent div has been clicked.
var form = $("<form/>", {// create the form
class: 'itemClass',
id: 'itemId',
method: 'POST'
}).append(
// Create <form> Tag and Appending in Div .detail.
$("<p/>").text("item:"),$("<br/>"),
$("<input/>", {
type: 'text',
id: 'itemData',
name: 'itemData',
value: itemData
}),
$("<br/>"),
$("<input/>", {
type: 'submit',
id: 'submit',
value: 'Submit'
}))
div.append(form);
$("#htmlDiv").append(div);
}
},
dataType: "json",
error: function(xhr){
console.log("error");
}
});
});
However, the submitting code is fail. It is not been executing.
$("#itemId").submit(function(e) {
e.preventDefault();
var itemData= $('#itemData').val();
$.ajax({
type: "POST",
url: "target.php",
data: {itemData: itemData},
success: function(result) {
alert(result); //It return a string
},
dataType: "text",
error: function(xhr){
console.log("error");
}
});
Any idea? Why the submitting can not be used?
Use event-delegation as by the time events are attached($("#itemId").submit(function(e){...), target element($("#itemId")) is not present in the DOM
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
Try this:
$('#htmlDiv').on('submit', '#itemId', function(e) {
e.preventDefault();
var itemData = $('#itemData').val();
$.ajax({
type: "POST",
url: "target.php",
data: {
itemData: itemData
},
success: function(result) {
alert(result); //It return a string
},
dataType: "text",
error: function(xhr) {
console.log("error");
}
});
});
I have try for the following for a long time and i have no more idea now, anyone can help me please.
I just want to reload the current page after add items to the cart, I have try the stupid way by count, promise then and other else, but all fail.
The problem is... the page already reloaded before the item add to the cart...!
The following is my sample:-
$("#Button").click(function () {
var CurrentURL = window.location.href;
var SelectedProduct = $('.SelectedProduct').length;
$('.SelectedProduct').each(function () {
$.ajax({
url: "/ShoppingCart/AddToCart",
data: { id: $(this).attr('id')},
datatype: "json"
});
--SelectedProduct
if (SelectedProduct === 0) {
window.location.href = CurrentURL;
$('#CartListContent').slideDown()
}
});
});
$("#Button").click(function () {
var CurrentURL = window.location.href;
var promise = $('.SelectedProduct').each(function () {
$.ajax({
url: "/ShoppingCart/AddToCart",
data: { id: $(this).attr('id')},
datatype: "json"
});
promise.done(function () {
window.location.href = CurrentURL;
$('#CartListContent').slideDown()
});
});
});
}
});
I don't know how much control you have over the server side code, but you should let the API handle adding an array of products to cart, that would make it so much faster and simpler. http://jsfiddle.net/hqn3eufa/
$("#Button").on('click', function () {
var selected_products_ids = [];
$('.SelectedProduct').each(function () {
selected_products_ids.push(this.id);
});
$.ajax({
url: "/ShoppingCart/AddToCart",
data: { ids: selected_products_ids },
datatype: "json",
success: function() {
window.location.reload();
}
});
});
You can make use of the success callback of ajax and the reload function:
$.ajax({
url: "/ShoppingCart/AddToCart",
data: { id: $(this).attr('id')},
datatype: "json",
success:function(data){
window.location.reload();
}
});
your page reload before the add to cart completes.
use a callback to find out when the add to cart is completed:
$("#Button").click(function () {
var CurrentURL = window.location.href;
var promise = $('.SelectedProduct').each(function () {
$.ajax({
url: "/ShoppingCart/AddToCart",
data: { id: $(this).attr('id')},
datatype: "json"
}).success(function () {
window.location.href = CurrentURL;
$('#CartListContent').slideDown()
});
});
});
}
});
Now i use the following way, it is stupid but work:-
Anyother suggestion..!?
var SelectedProduct = $('.SelectedProduct').length;
$('.SelectedProduct').each(function () {
$.ajax({
url: "/ShoppingCart/AddToCart",
data: { id: $(this).attr('id')},
datatype: "json",
success: function (data) {
--SelectedProduct
if (SelectedProduct == 0) {
window.location.reload()
}
}
});
});
I am wondering how will I clear my ajax's setInterval if there are zero result found.
here is my code:
$(document).ready(function() {
var imageLoader = {}
imageLoader.render = function(event){
$.ajax({
url: UAI+'/useraccountimages/loadimage',
type: 'post',
data: {
id : UID,
},
success: function(data){
$("#available_images").html(data);
}
});
}
imageLoader.interval = setInterval(imageLoader.render,5000);
imageLoader.render();
});
I'm not sure with the code, just follow the "logic" !
$(document).ready(function() {
var imageLoader = {}
imageLoader.render = function(event){
$.ajax({
url: UAI+'/useraccountimages/loadimage',
type: 'post',
data: {
id : UID,
},
success: function(data){
if (data.is(':empty')) {
clearInterval(imageLoader.interval);
}
$("#available_images").html(data);
}
});
}
imageLoader.interval = setInterval(imageLoader.render,5000);
imageLoader.render();
});
With the function "clearInterval" to stop it. (stopInterval description)