Develop Reference

How to disable fullcalendar

I want to set authorities on my calendar. Only certain users can update the data. While all users can only see the event and are not allowed to make any changes. I'm using select function to popup modals. Can fullcalendar be disabled? I want it to be like readonly function. Which means all users can read the data. I try to do like this :
if(#ViewBag.User == "Admin")
{
editable = true,
}
But it doesn't work. The events can still be edited since I also set that attribute inside my JSON codes for events. Is there any way to solve this? Thanks

Try this,
editable = false
and set URL for the event as
url: '/Event/Create/'
if you do not want any redirection to add use below link
url: 'Javascript:'
User this URL in events section. like this
$('#calendar').fullCalendar({
editable = false,
events: [
{
title: 'My Event',
start: '2010-01-01',
url: 'http://google.com/'
},
{
title: 'My Event',
start: '2010-01-01',
url: 'Javascript:'
}
// other events here
],
eventClick: function(event) {
if (event.url) {
window.open(event.url);
return false;
}
}
});

Kendo UI custom grid popup editor window only opens once

I would like to use a custom window as popup editor of a Kendo UI Grid. Its content will be complex with search fields and a grid to display search results. To do that, I don't want to use the Kendo template mechanism but a real popup window.
While doing tests with custom editor I faced an issue. Even with a very basic and simple scenario (just the create command), I'm only able to open the editor once. The second time I get an error, the editor doesn't show up anymore and the grid becomes empty.
Here is my HTML code :
<div id="main-content">
<div id="custom-window">
</div>
<table id="my-table-grid">
</table>
</div>
The JavaScript part :
function openCustomWindow(e) {
e.preventDefault();
myWindow.center().open();
}
function editorWindowClosed(e) {
myGrid.cancelRow();
}
var myWindow = $("#custom-window").kendoWindow({
modal: true,
resizable: false,
title: "Test",
visible: false,
close: editorWindowClosed
}).data("kendoWindow");
var dummyDataSource = new kendo.data.DataSource(
{
schema : {
model : {
id: "id",
fields: {
postion: { type: "number"},
name: { type: "string"},
}
}
}
});
dummyDataSource.add({postion: 1, name: "gswin"});
var myGrid = $("#my-table-grid").kendoGrid({
dataSource: dummyDataSource,
toolbar: [ {
name: "create",
text: "Create"
} ],
editable: {
mode: "popup",
window: {
animation: false,
open: openCustomWindow,
}
},
columns: [
{
field: "postion",
title: "Postion"
},
{
field: "name",
title: "Name"
}
]
}).data("kendoGrid");
The error message in the JavaScript console :
Uncaught TypeError: Cannot read property 'uid' of
undefinedut.ui.DataBoundWidget.extend.cancelRow #
kendo.all.min.js:29ut.ui.DataBoundWidget.extend.addRow #
kendo.all.min.js:29(anonymous function) #
kendo.all.min.js:29jQuery.event.dispatch #
jquery-2.1.3.js:4430jQuery.event.add.elemData.handle #
jquery-2.1.3.js:4116
And finally a jsfiddle link to show what I'm doing. (The popup is empty because I just want to fix the open / close mechanism before going any further)
I don't understand why I get this error, I expected to be able to open / close the popup as many time as I wanted. The default editor popup is working fine.

One of my colleague found the solution (thanks to him).
Actually this piece of code
editable: {
mode: "popup",
window: {
animation: false,
open: openCustomWindow,
}
}
is designed to configure the default popup...
The right way to use a custom popup is the following :
editable :true,
edit: openCustomWindow,
With this approach it's also better to use
function editorWindowClosed(e) {
myGrid.cancelChanges();
}
Instead of
function editorWindowClosed(e) {
myGrid.cancelRow();
}
Working jsfiddle link

Actually the approach in my previous answer solved my issue but is causing another issue. The grid becomes editable but in the default mode (which is "inline").
Doing this
editable: "popup",
edit: openCustomWindow
has fixed this other issue but is now displaying 2 popups.
I finally succeeded to hide the default popup and only show my custom popup but it ended with the orginal issue described in initial question...
Considering all those informations I arrived to the conclusion that working with a custom popup window is definitely not an option. I'll start working with teamplates instead.
Another solution would have been to use a template to override the toolbar with a custom "Add" button and use a custom command for edition. But at this point I consider that too "tricky".

To prevent Kendo UI custom grid popup editor window, define the editable property:
editable:
{
mode: "popup",
window: {
animation: false,
open: updateRowEventHandler
}
} // skip edit property
Then paste preventDefault() at the beginning of the handler:
function updateRowEventHandler(e) {
e.preventDefault(); //

Why can't I change backdrop to 'true' or remove it after changing to 'static' in Bootstrap?

I'm trying to figure out why I can't change the backdrop to 'true' after first changing it to 'static' when using Bootstrap's modal.
I run this code:
$('#modal').modal({backdrop: 'static', keyboard: false, show: true});
$.post('server.php', $('#form').serialize(), function(data) {
if(data.success) {
$('#modal').modal({backdrop: true, keyboard: true});
} else {
$('#modal').modal({backdrop: true, keyboard: true});
}
}, 'json');
It will set it so the backdrop and keyboard will not function at the start, but I cannot figure out why I can't set it back to default.
Thanks for reading.

How about this
it looks like twitter bootstrap is storing all data in a data variable called bs.modal. so just remove that data variable and reinitialize the modal.
Your final code will look something like this
$('#modal').modal({backdrop: 'static', keyboard: false, show: true});
$.post('server.php', $('#form').serialize(), function(data) {
if(data.success) {
$('#modal').removeData('bs.modal').modal({backdrop: true, keyboard: true});
} else {
$('#modal').removeData('bs.modal').modal({backdrop: true, keyboard: true});
}
}, 'json');

The above solution was not working fine for me.
So I destroyed this instance of modal using this :-
$('#modal-xl').on('hidden.bs.modal', function (e) {
$("#modal-xl").modal('dispose');
})
Check working of dispose method here

Follow up to the solution presented by #Cerlin: I could not simply remove all data set to Bootstrap v4.6's modal, since I had other functionality attached to it. Using jQuery v3.6's $.extend(), I was able to modify the data directly to allow the backdrop/keyboard to be usable again. If you don't use jQuery and do not support Internet Explorer, you could always use JavaScript's built-in method Object.assign().
// Variable Defaults
var bootstrapModal = $('.modal');
var bootstrapData = bootstrapModal.data('bs.modal');
// Release Modal Backdrop
bootstrapModal.data('bs.modal', $.extend(true, bootstrapData, {
_config: $.extend(true, bootstrapData._config, {
backdrop: true,
keyboard: true
})
}));

How to call an internal javascript function from url?

I'm collecting some data from a series of similar webpages and store them in excel sheet. I'm using the opener class in urllib2 within python for this work.
The problem is that in one group of these pages, you need too click on a hyperlink so that the needed data appear.
Is there any way that I could fake the click on this hyperlink and include it in the address that I send within my python code?
This is the href tag of the link:
<a href="#" onClick="refresh_reg_table();refresh_reg_list(); return false;">
And here are the functions called in onClick:
function refresh_reg_table(order){
Ajax.Responders.register({
onCreate: function() {
$('ajax_spinner2').show();
},
onComplete: function() {
$('ajax_spinner2').hide();
}
});
new Ajax.Updater('table_registrations', 'ajax/get_table_registrations.php', {
method: 'get',
parameters: {
table: 'registrations',
idevent : 143593,
sorted : order},
evalScripts: true,
});
}
function refresh_reg_list(){
Ajax.Responders.register({
onCreate: function() {
$('ajax_spinner2').show();
},
onComplete: function() {
$('ajax_spinner2').hide();
}
});
new Ajax.Updater('reg_list', 'ajax/get_list_registrations.php', {
method: 'get',
parameters: {
type: 'table_name_reg',
idevent : 143593
},
evalScripts: true,
});
}

All you can do through the address bar is using the javascript: prefix and it would run all your JavaScript code after that javascript: prefix.
you also better change the your hyperlink like:
...

Use javascript:yourFunction() to start the page's function - i dont think there's any other way around it

ExtJS AJAX TabPanel tab load event?

Is there any way to add an event listener to the load/update event of a ajax based tabpanel in ExtJS v3.3.1? I need an event that fires after the tab content is retrieved and fully rendered, not right after the tab is selected/activated and the loading spinner is displayed.
I thought I would be able to add this event on the Ext.Updater object returned by the tabpanel's getUpdater() method, i.e.:
myTabs.getUpdater().on('update', function()
{
console.log('tab loaded');
});
But that does not seem to work. Any ideas?
Edit: Here's my full implementation to make it easier to see what I'm trying to do:
var myTabs = new Ext.TabPanel(
{
id : 'rec_tabs',
activeTab : 0,
enableTabScroll : true,
padding : 5,
autoWidth : false,
autoHeight : true,
border : false,
plain : true,
defaults : { autoHeight: true },
items :
[
{ title : 'Tab #1', autoLoad : { url : 'tab1_content.php', scripts : true } },
...
]
});
myTabs.render('tab_div');
myTabs.getUpdater().on('update', function()
{
console.log('tab loaded');
});

Finally figured it out. I hadn't realized that the properties of the "autoLoad" config object for each item of the TabPanel are actually just used as parameters for the Ext.Updater.update() method. So all I had to do was is along with the "url" and "scripts" parameters, is define the "callback" property as a function to be executed when the tab content is finished loading into its body, and its good to go.

Have you tried this?
myTabs.on("afterrender", function() {
console.log('tab loaded');
});