I play with fullCalendar and I use refetchEvents:
$('#calendar').fullCalendar('refetchEvents');
It works properly and this command calls events method with callback
events: function (start, end, timezone, callback) { /* ... */ }
however it first remove all meetings from calendar and after - renders new ones. This approach causes to all table to blink (different from google behaviour).
Is there any other way to render meetings without clear-add?
Seems like I need to add only deltas that makes work too hard, messy and not stable
Thanks,
My suggestion is to do the ajax request first (where you initially put .fullCalendar('refetchEvents')), and if it succeeds, then call refetchevents. The code will look something like this:
var events = [];
$.get('/events/get', function(result){
events = result;
});
$('#calendar').fullCalendar({
events: function (start, end, timezone, callback) {
callback(events);
}
});
Add this in your ajax parameter :
async:false,
$.ajax({
url: calendar_url + '&start'+start.unix()+'&end='+end.unix(),
dataType: 'JSON',
async:false,
success: function(response) {
}
})
Use below approach instead of refetchEvents so it's not blinking.
var events = {
url: '/getEVents',
type: 'GET',
}
$('#calendar').fullCalendar('removeEventSource', events);
$('#calendar').fullCalendar('addEventSource', events);
Related
I am trying to make search function based on Ajax/Jquery.
My web app shows the data of service requests from the database. I want to make searchbar for my app as follows:
show all service request on the table initially.
If something is typed on the searchbar, it searches data and load those data to the table.
Finally if user deletes anyword from searchbar it will show all data as stated on No.1
I managed doing second and third function but I am having issues with the first one.
$(document).ready(function(){
$('#search_text').keyup(function(){
var txt = $(this).val();
if(txt != '') {
$.ajax({
url:"ajax/fetchRequests.php",
method:"post",
data:{search:txt},
dataType:"text",
success:function(data) {
$('#result').html(data);
}
});
}
else if(txt == '') {
$.get("ajax/readRequests.php", {}, function (data, status) {
$("#result").html(data);
});
}
});
});
Here is another script that i have worked on trying:
$(document).ready(function(){
var txt = $('#search_text').val();
if(txt != ''){
$.ajax({
url:"ajax/fetchRequests.php",
method:"post",
data:{search:txt},
dataType:"text",
success:function(data) {
$('#result').html(data);
}
});
}
else if(txt == '') {
$.get("ajax/readRequests.php", {}, function (data, status) {
$("#result").html(data);
});
}
});
All my features are working except for the search functions. Any tips or critics are welcome, thank you very much in advance.
I suggest you do two things, 1) use the suggested .on() and 2) use only one ajax function to simplify things. The idea is to funnel your calls through one function so that you know if something fails, it's not because you messed up the ajax part of the script:
// Create a generic ajax function so you can easily re-use it
function fetchResults($,path,method,data,func)
{
$.ajax({
url: path,
type: method,
data: data,
success:function(response) {
func(response);
}
});
}
// Create a simple function to return your proper path
function getDefaultPath(type)
{
return 'ajax/'+type+'Requests.php';
}
$(document).ready(function(){
// When the document is ready, run the read ajax
fetchResults($, getDefaultPath('read'), 'post', false, function(response) {
$('#result').html(response);
});
// On keyup
$(this).on('keyup','#search_text',function(){
// Get the value either way
var getText = $(this).val();
// If empty, use "read" else use "fetch"
var setPath = (!getText)? 'read' : 'fetch';
// Choose method, though I think post would be better to use in both instances...
var type = (!getText)? 'post' : 'get';
// Run the keyup function, this time with dynamic arguments
fetchResults($, getDefaultPath(setPath), type, { search: getText },function(response) {
$('#result').html(response);
});
});
});
To get initial results hook onto jQuery's document ready event.
var xhr;
var searchTypingTimer;
$(document).ready(function(){
// initial load of results
fetchResults([put your own params here]);
// apply on change event
$('#search_text').on('input', function() {
clearTimeout(typingTimer);
searchTypingTimer = setTimeout(fetchResults, 300);
});
});
function fetchResults($,path,method,data,func)
{
if (xhr && xhr.readyState != 4){
xhr.abort();
}
xhr = $.ajax({
url: path,
type: method,
data: data,
success:function(response) {
func(response);
}
});
}
As Rasclatt mentions you should use jQuery's on method to catch any changes.
Secondly I'd recommend disposing of previous requests when you make new ones, since if you are sending a new one on each character change then for one word many requests will be made. They won't necessarily arrive back in the order you send them. So for example as you type 'search term', the result for 'search ter' may arrive after and replace 'search term'. (welcome to async).
Thirdly since you will send many requests in quick succession I'd only call your fetchResults function after a short time out, so for example if a user types a five character word it doesn't fire until 300ms after the last character is typed. This will prevent 4 unnecessary requests that would just be ignored but put strain on your backend.
I have an issue, do not know if it possible or not, how to check if my container is already loaded or not, because sometimes it is being loaded faster, sometimes slower and if it does not succeed in time getting an error in javaScript where gridview some functions are not recognizable(because the gridview is not loaded fast enough). Hope it is clear. Thanks for Your time.
Code:
function LoadPartial(partialUrl, container) {
$.ajax({
type: 'POST',
url: partialUrl,
success: function (returnData) {
$(container).html(returnData);
}
});
//.done(function () {
// return;
//});
}
you can use something like this.
$(".container").load(function (){
alert("Loaded :)");
});
Let me know in-case this doesn't work.
You can try using .data()
if ($('#mycontainer').data('loaded')) {
// your code
}
If you mean to find event when data received use "complete" function:
$.ajax({
type: 'POST',
url: partialUrl,
success: function (returnData) {
$(container).html(returnData);
},
complete: function() {
console.log('container filled with data');
}
});
I have jstree plugin I simply fill this plugin by selected node and post data with ajax in node-select method. Althouh I make a control with "letChangeTrig"
it call himself onChamge method recursively due to I refrest tree.. but I want to call this when user select only..
$('#tree_2').jstree({
}).on('changed.jstree', function (e, datap) {
debugger
if(!letChangeTrig)
{
letChangeTrig = true;
return;
}
$.ajax({
url: "../../Controller/ActiveDirectoryController.php5",
type: "POST",
dataType: "json",
data: params,
success: function (result) {
treeData_ = prepareObjectsforTree(result.Objects);
resfreshJSTree(treeData_);
},
error: function (a, b, c) {
}
});
});
refresh:
function resfreshJSTree(treeDataa) {
letChangeTrig = false;
$('#tree_2').jstree(true).settings.core.data = treeDataa;
$('#tree_2').jstree(true).refresh();
}
and this is my jstree refresh function which trigg the onChange method.. and post data.. after response back to success I call this again to rebuil tree with changed data but in this way it begins to call himself without users select evet and it fall into loop.. I need to stop it by logical control
Have you tried jQuery event.stopPropagation() method?
It stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.
I have an AJAX function that displays a notification upon success. However it is possible the user calls it a few times within a short period of time thus creating a que of notifications. I am trying to eliminate the que and show the notification once
AJAX FUNCTION
function update(updateid, div) {
$.ajax({
type: "GET",
url: 'file.php',
data: {"updateid":updateid,"div":div},
success: function(data) {
$('.notification').html(data).hide().fadeIn(300);
$('.notification').delay(2000).fadeOut();
}
});
}
Ive tried adding clearQueue() a few times
This prevents the notification from working
$('.notification').html(data).hide().fadeIn(300).clearQueue();
$('.notification').delay(2000).fadeOut();
This prevents the notification from fading out
$('.notification').html(data).hide().fadeIn(300);
$('.notification').delay(2000).fadeOut().clearQueue();
Obviously im not using clearQueue(); properly, can someone point me in the right direction?
Try
$('.notification').clearQueue().delay(2000).fadeOut();
use clearQueue() before delay.
You can also use .stop()
$('.notification').stop(true,true).delay(2000).fadeOut();
Why not using a flag varible.
var notificationShowing = false;
[...]
success: function(data) {
if (!notificationShowing) {
notificationShowing = true;
$('.notification').html(data).hide().fadeIn(300);
$('.notification').delay(2000).fadeOut(function() { notificationShowing = false});
}
}
I'm writing a javascript function that should change the view of a postcard depending on which case is selected.
My problem is that the old values of the object "m_case" is getting used. If I press the button with class "case-btn" twice I get the right case selected in my postcard view. But I want it to be triggered when I press the button once.
I guess I have to do something like a callback function in the m_case.setCase() function call, but I can't get it working,
$('.case-btn').on('click', function() {
remove_active_state_from_cases();
m_case.setCase($(this).data('case'));
// Changes the view of the postcard
m_postcard.changeBackground(m_case.getPhoto());
m_postcard.changeMessage(m_case.getMessageText());
m_postcard.changeFullName(m_case.getFullName());
m_postcard.changeCountry(m_case.getCountry());
$(this).toggleClass('active');
});
The setCase() function
this.setCase = function(id) {
// Set ID
this.setID(id);
var that = this;
$.ajax({
url: 'get_case_by_id.php',
type: 'get',
dataType: 'json',
data: {id: that.getID() },
success: function(data) {
if(data.success) {
that.setFirstName(data.first_name);
that.setFullName(data.full_name);
that.setAdress(data.adress);
that.setCountry(data.country);
that.setStamp(data.stamp);
that.setPhoto(data.photo);
that.setSummary(data.summary);
that.setStory(data.story);
that.setMessageText(data.message_text);
that.setDefaultMessageText(data.default_message_text);
that.setMessageImg(data.message_img);
} else {
console.log('failure');
}
}
EDIT The problem might be in my AJAX call, I have to wait till the ajax have been called. but how do I continue the first flow when my Ajax is done and not before?
SOLUTION
I made it working by adding a callback parameter and calling that function in the ajaxs complete function.
$('.case-btn').on('click', function() {
remove_active_state_from_cases();
var that = this;
m_case.setCase($(this).data('case'), function() {
m_postcard.changeBackground(m_case.getPhoto());
m_postcard.changeMessage(m_case.getMessageText());
m_postcard.changeFullName(m_case.getFullName());
m_postcard.changeCountry(m_case.getCountry());
$(that).toggleClass('active');
});
});
// Sets the whole case from an id.
this.setCase = function(id, callback) {
// Set ID
this.setID(id);
var that = this;
$.ajax({
url: 'get_case_by_id.php',
type: 'get',
dataType: 'json',
data: {id: that.getID() },
success: function(data) {
if(data.success) {
that.setFirstName(data.first_name);
that.setFullName(data.full_name);
that.setAdress(data.adress);
that.setCountry(data.country);
that.setStamp(data.stamp);
that.setPhoto(data.photo);
that.setSummary(data.summary);
that.setStory(data.story);
that.setMessageText(data.message_text);
that.setDefaultMessageText(data.default_message_text);
that.setMessageImg(data.message_img);
} else {
console.log('fail big time');
}
},
complete: function() {
callback();
}
});
}
Your m_postcard.changeBackground and other calls should be in the success callback, or in another function that is called from the success callback, as those values aren't set till the async ajax call is done.
With the way your code is now the m_postcard.changeBackground and other calls are called immediately after your setCase function is done executing. This means your methods are executed before the data has arrived from the server
While the ajax is processing you probably should show a loading message on the screen to let the user know they have to wait till the processing is done. Show the message before calling the .ajax call and hide it in the success/error callbacks.
Any changes to the site content should be done from the success callback, ie changing active states, changing content, etc.