I am using fullcalendar 4.0, with setting header:false, then overriding next & prev buttons functionalities with own functions, facing issue when click on any one of my own button for the first time only after initialization of full calendar, please find the code:
var calendar = new FullCalendar.Calendar(calendarEl, {
all default initializations here;
header: false,
events: {
url: '../../classes/calendar/Calendar.XXX? method=getCellsforCalendar&startDate='+startDate+'&endDate='+endDate+'&startYear='+startYear+'&startMonth='+startMonth+'&returnformat=json',
type: 'POST',
cache: true,
}//It return an array structure so directly all events are rendered on calendar
}//calendar code ends here
//my own function for NEXT button.
$('#nextBtn').click(function() {
calendar.gotoDate(date_here);
//If need new other events
$.when( $.ajax({
type: "POST",
url: URL_HERE,
success: function (response) {
responseArray = JSON.parse(response);
calendar.addEventSource(responseArray); //before this line I deleted existing event sources
}
});
Here when I click on Next button for the first time after initialization of full calendar, 2 ajax calls are triggered , one is next button ajax request(this is expected one) and the other is the ajax request URL mentioned in the events: section(with the selected default start and end parameters) of full calendar initialization, once I click on next, for remaining clicks on same button or any other custom buttons, only the expected ajax request will be triggering. Any idea please. And also it's not related to lazyloading:true, I already set it to avoid unnecessary ajax rewuests. Thanks .
Related
My problem is pretty simple.
I start on /app, when I click on some button I trigger /report with
Backbone.history.navigate('report',{trigger: true, replace: true});
Then I'm on /report page. No problem.
I have the same button on /report and I would like to trigger router route "report" when i click on it. It seems it's not working because I'm already on the asked page.
Any idea how I should proceed ?
thanks a lot
Backbone.history.navigate('report',{trigger: true, replace: true});
You should not be using this to render/reload your application views.This is not recommended.
Rather you should have a controller object (a js object) which extends Backbone.Events
Define a callback for the for the route "/report" as follows:
var MyAppBus = _.extend({},Backbone.Events);
MyAppBus.on("report",function(payLoad){
// 1.Load the data
// 2.Create an instance of the view passing the loaded data.
// (In your case, you could also pass an instance of the view in the payload
// and update the data alone in the view instance.)
// 3.Render the view.
// 4.Call the router navigate function with trigger set to false to
// update the url on a need basis.
});
Now, in the event/router callback you can do something like this:
MyAppBus.trigger("report",payLoad);
Where payLoad in the event callback could be:
var payLoad = {};
payLoad.view = viewInstance;
Im AngularJs newbie:).
But I have 3 components: controller C1 (for entering search input and clicking submit button),controller C2 (for div which will receive results from SearchService and display it) and service searchService for sending some hardocoded results.
THe idea is that after submitting search text, I have to submit it twice. With one submit click, view of ui-router is updated to partial page without results loaded. After second click the results are displayed.
Then next searches are done on search view page, all is ok, one click gives needed data.
How to fix it: I want to change ui-router view and get results from service with one click?
C1 method code (started after submiting searchText)
$scope.searchText = function searchText(text) {
$log.log("Method searchText with text: " + text);
//var parametersObject = {searchText: text, results: assetResults}
$state.go('search');
$log.log("SearchInputBoxController: rootScope Broadcasting message: " + text);
$rootScope.$broadcast('DoSearch', text);
$log.log("SearchInputBoxController finished");
};
C2 method: event handler for event 'DoSearch'
$scope.$on('DoSearch', function (event, data) {
$scope.asset = searchService.search(data);
$scope.searchText = data;
});
searchService code:
Application.Services.factory('SearchService', ['SearchServiceResource', '$q',
function (SearchServiceResource, $q) {
return {
search : function (searchText)
{
var result = [
{id: 'aaaaa', sn:"1234-1234-1234-1235", name:"DCU_name1", type: "DCU", tags: ["tag1", "tag2"]},
{id: 'aaaaa', sn:"1234-1234-1234-1235", name:"DCU_name2", type: "DCU", tags: ["tag1", "tag2"]},
{id: 'aaaaa', sn:"1234-1234-1234-1235", name:"NODE_name1", type: "DCU_Node", tags: ["tag1", "tag2"]}
];
return result;
}
};
}]);
I believe the clicking twice is because the first click is triggering the state change, then the broadcast occurs, and then the state change occurs. The second click, the state doesn't need to change, and the current now unchanged controller gets the broadcast. There are a couple different approaches I can think of (and I would def shy away from rootscope broadcasting):
in your shared service, maintain a search string variable and on your
controller, put watch on that service's variable.
change your route/state settings to include a parameter like /search/:searchTerm and in the controller, look for the state established searchTerm variable and on the controller load see if searchTerm is provided and fire the search. Some more info here
Let me now if you need any help or more specifics on the ideas listed.
I have a form on my application with a button for retrieve. When a user clicks the button then data is retrieved. This could be almost instant or take several seconds. What I would like is for the button to be disabled if the retrieve has been in progress for more than 1 second. Here's what I have so far:
In my application controller:
this.state = {};
In a child controller:
this.retrieve = function () {
app.state.get = true;
$http({
url: '/api/TestData',
method: "GET"
}).success(function (result) {
app.state.get = false;
});
};
In the HTML I have:
<button ng-disabled="app.state.get"
ng-click="test.retrieve()">
Retrieve
</button>
<button ng-disabled="app.state.get">
Another button
</button>
<button ng-disabled="app.state.get">
Another button
</button>
There's more to the application but this is the basics of what I have. Note that I actually have a few buttons and controls and I would like them all to be disabled.
I now I could use something like a request interceptor but the problem I am trying to address is how can I put some delay on the disabling of the buttons and other controls.
Any help and suggestions thanks in advance.
Try using: $timeout
Angular's wrapper for window.setTimeout. The fn function is wrapped into a try/catch block and delegates any exceptions to $exceptionHandler service.
$timeout(fn[, delay][, invokeApply]);
A Sample Example is here
If you want to disable the button after 3 seconds try like
Script
$http({
url: '/api/TestData',
method: "GET"
}).success(function (result) {
$timeout(function(){app.state.get = false}, 3000);
});
But as what #Alp said, why do you need to delay the button disabling
There is an alternative to disabling the button:
Throttle the execution of web requests.
Underscore has great utils to do that. The method is called throttle().
Example:
var getData = function () {
app.state.get = true;
$http({
url: '/api/TestData',
method: "GET"
}).success(function (result) {
app.state.get = false;
});
};
this.retrieve = _.throttle(getData, 1000);
Now, the method will only be executed at most once per second, no matter how often someone clicks on the button. The first request will be made immediately.
In my backbone app, i use the requirejs to load the js files. as well i need different views, there is no.of links are there in my drop down menu. according to the drop down menu i a adding the #url example:
http://localhost:85/bino/html/interface-I.html#projectName/project11
the navigate method works fine and updating the url, also whenever i copy and paste this url to any other browser / refresh with current hash state my router methods works fine.
But click on link in the drop down menu not working, the method not calling... what would be the reason and how can i fix this..?
my code: main js file (part of code)
var extender = _.extend({},backBone.Events);
var params ={
boardHolder :$('.boardHolder'),
column :3,
space :30,
extender :extender
};
var listApp = new routerer(params);
backBone.history.start();
extender.bind("list:selected",function(post){
listApp.navigate(post.category+'/'+post.filter);
});
my router code :
define(["backBone","singleton","listCollection","listView","listViews"],function(Backbone,singleton,listCollection,listView,listViews){
singleton.router = Backbone.Router.extend({
routes:{
"" :"appView",
"post" :"postView",
"projectName/:id" :"projectNameView",
"assignedTo/:id" :"assignedToView",
"sortBy/:id" :"sortByView"
},
initialize:function(params){
this.params = params;
this.collection = new listCollection;
console.log('i am called');
},
hashView:function(){
console.log('from hash view');
},
appView:function(){
var that = this;
// var defaultApp = new listCollection();
this.collection.fetch({
success:function(data){
new listViews({model:data,params:that.params})
}
})
},
projectNameView:function(thisView){ // not calling not sync
console.log('called',thisView); // on click not works
},
assignedToView:function(thisView){ // not calling not sync
console.log(thisView); // on click not works
},
sortByView:function(thisView){ // not calling not sync
console.log(thisView); // on click not works
}
});
return singleton.router;
})
thanks in advance.
navigate only updates the url, you also have to call the route function by setting the trigger option to true. If you'd like to update the URL without creating an entry in the browser's history, also set the replace option to true.
listApp.navigate(post.category+'/'+post.filter);
would become
listApp.navigate(post.category+'/'+post.filter, {trigger: true});
I'm trying to put together backbone application using the marionette plugin, and am having some trouble getting initializers to work the way I expected them to. I have the following code:
var MyApp = new Backbone.Marionette.Application();
MyApp.addRegions({
region1 : '#div1',
region2 : '#div2'
});
MyApp.Resources = { };
MyApp.bind('initialize:before', function (options) {
// display a modal dialog for app initialization
options.initMessageId = noty({
text : 'Initializing MyApp (this should only take a second or two)',
layout : 'center',
speed : 1,
timeout : false,
modal : true,
closeOnSelfClick : false
});
});
MyApp.addInitializer(function (options) {
$.ajax({
url: options.apiUrl + '/my-app-api-module',
type: 'GET',
contentType: 'application/json; charset=utf-8',
success: function (results) {
MyApp.Resources.urls = results;
console.log(MyApp.Resources.urls); // <- THIS returns an object
}
});
});
MyApp.bind('initialize:after', function (options) {
// initialization is done...close the modal dialog
if (options.initMessageId) {
$.noty.close(options.initMessageId);
}
if (Backbone.history) {
Backbone.history.start();
}
console.log(MyApp.Resources.urls); // <- THIS returns 'undefined' BEFORE the console.log in the initializer above
});
Note in the code above that I have two console.log calls, one in the initializer, and one in the initialize:after handler. Both log the same object property. As you can see, what I'm experiencing is that the console.log call in the initialize:after handler is getting called before the one in the success handler of the initializer. I realize that this is because the initializer has an async call in it...what I need to know is, how can I make sure that all of the async code in my initializer(s) is complete before doing anything else in the application? Is there a good pattern for this? I've not found anything in the docs indicating how to handle this correctly.
Thanks.
how can I make sure that all of the async code in my initializer(s) is complete before doing anything else in the application?
Don't use the initialize:after event. Instead, trigger your own event from the success call, and then bind your app start up code from that one.
MyApp.addInitializer(function (options) {
$.ajax({
url: options.apiUrl + '/my-app-api-module',
type: 'GET',
contentType: 'application/json; charset=utf-8',
success: function (results) {
MyApp.Resources.urls = results;
// trigger custom event here
MyApp.vent.trigger("some:event:to:say:it:is:done")
}
});
});
// bind to your event here, instead of initialize:after
MyApp.vent.bind('some:event:to:say:it:is:done', function (options) {
// initialization is done...close the modal dialog
if (options.initMessageId) {
$.noty.close(options.initMessageId);
}
if (Backbone.history) {
Backbone.history.start();
}
console.log(MyApp.Resources.urls);
});
This way you are triggering an event after your async stuff has finished, meaning the code in the handler will not run until after the initial async call has returned and things are set up.
I wrote an override to the start method using jQuery deffereds so you can specify an Async initializer like authentication. The start method then waits til all deferreds are resolved and then finishes the start.
I replace marionette callbacks with my new sync callbacks class so I can use the regular methods calls in the app. Take a look at my solution and see if that helps at all. https://github.com/AlexmReynolds/Marionette.Callbacks
This can be used to accomplish tasks before the rest of your application begins.
Check the documentation.
// Create our Application
var app = new Mn.Application();
// Start history when our application is ready
app.on('start', function() {
Backbone.history.start();
});
// Load some initial data, and then start our application
loadInitialData().then(app.start);