I am trying to load fullcalendar on tab click. when I click the tab fullcalendar does not load and it load after I resize the window (or click the F12,or open the chrome inspector).
I tried some function like view rendering but it does not work..
how can I refresh view or resize fullcalendar..
or how can I load the fullcalendar on tab click without resizing..
I need help..
I use;
myGenericCalendar: function (id, ajaxSourceUrl, data, eventDataTransform, eventRenderFnc, callbackFnc) {
$(id).fullCalendar('destroy');
$(id).fullCalendar({
eventLimit: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
views: {
agenda: {
eventLimit: 6 // adjust to 6 only for agendaWeek/agendaDay
}
},
draggable: false,
allDayDefault: true,
selectable: true,
selectHelper: true,
ignoreTimezone: false,
select: function (start, end, allDay) {
if (callbackFnc)
callbackFnc();
$(id).fullCalendar('refetchEvents');
},
editable: true,
monthNames: ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'],
monthNamesShort: ["Ocak", "Şub", "Mar", "Nis", "May", "Haz", "Tem", "Ağu", "Eyl", "Ekim", "Kas", "Ara"],
dayNames: ["Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi"],
dayNamesShort: ["Pzr", "Pts", "Sal", "Çrş", "Prş", "Cum", "Cts"],
titleFormat: { month: "MMMM yyyy", week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}", day: " d MMM yyyy , dddd" },
eventDataTransform: function (eventData) {
if (eventDataTransform)
eventDataTransform(eventData);
return eventData;
},
events: ({
url: ajaxSourceUrl,
data: data
}),
eventRender: function (calEvent, $event) {
if (eventRenderFnc)
eventRenderFnc(calEvent, $event)
return $event;
////$event.find("div.fc-event-inner").prepend('<button class="edit btn btx-xs btn-danger btn-icon tip" data-modelid="' + calEvent.id + '" data-placement="bottom" title="Git" style="width: 20px; height: 17px;" type="button"><i class="icon-remove2"></i></button>');
$(id).fullCalendar('refetchEvents');
},
eventClick: function (event, element) {
if (callbackFnc)
callbackFnc(event, element);
$(id).fullCalendar('refetchEvents');
}
});
},
Related
How to add listeners to components that are defined within itemTpl? For example, if I have a dataview (Ext.view.View) that is bound to a store, and I have defined itempTpl that includes a button and an image, like:
itemTpl: ['<div class="card" style="padding-left: 32px;">',
'<div><button type="button" class="btn"><span>Button</span></button></div>',
'<div class="img"><img src="https://www.w3schools.com/css/paris.jpg"></div>',
'</div>']
how can I detect that button or image of an item is clicked? I know ho to add listeners to the item, but I would like to detect click event on some inner div or span element of an item.
In addition, I found writing these templates with html very difficult. One of the main advantages of extjs framework is claimed to be exactly hiding html part from the developer. So, I am wondering if there is some better way to display these information with dataview, like including panel or container component as an dataview item.
You can use element delegation:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('Image', {
extend: 'Ext.data.Model',
fields: [{
name: 'src',
type: 'string'
}, {
name: 'caption',
type: 'string'
}]
});
Ext.create('Ext.data.Store', {
id: 'imagesStore',
model: 'Image',
data: [{
src: 'http://www.sencha.com/img/20110215-feat-drawing.png',
caption: 'Drawing & Charts'
}, {
src: 'http://www.sencha.com/img/20110215-feat-data.png',
caption: 'Advanced Data'
}, {
src: 'http://www.sencha.com/img/20110215-feat-html5.png',
caption: 'Overhauled Theme'
}, {
src: 'http://www.sencha.com/img/20110215-feat-perf.png',
caption: 'Performance Tuned'
}]
});
Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('imagesStore'),
itemTpl: new Ext.XTemplate(
'<div class="card" style="padding-left: 32px;">',
'<div><button type="button" class="btn"><span class="btnSpan">Button</span></button></div>',
'<div class="img"><img src="https://www.w3schools.com/css/paris.jpg" class="imgClass"></div>',
'</div>',
),
itemSelector: 'div.card',
emptyText: 'No images available',
listeners: {
itemClick: function (view, record, item, index, e, eOpts) {
console.log(e.target);
const classList = e.target.classList;
if (classList.contains('btn')) {
console.log('btn is clicked');
} else if (classList.contains('btnSpan')) {
console.log('Span in Button is clicked');
} else if (classList.contains('imgClass')) {
console.log('ImgClass is clicked');
}
}
},
renderTo: Ext.getBody(),
});
}
});
Everything is working fine except scrolling when i click to the next element is taking their but is not scrolling to down for seeing purpose I have to scroll to down. I tried many ways but i could not able to fix please help me to fix this problem i gone through this link https://www.npmjs.com/package/angular-shepherd but no option . If anyone can help me that would be very great help for me.
<h2 class="second-element">London</h2>
<p class="third-element">London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<div class="first-element">cool</div>
I have added this in my app.component.ts file code..
import { ShepherdService } from 'angular-shepherd';
export class AppComponent implements AfterViewInit {
constructor(private shepherdService: ShepherdService) { }
ngAfterViewInit() {
this.shepherdService.disableScroll = true;
this.shepherdService.modal = true;
this.shepherdService.confirmCancel = false;
this.shepherdService.addSteps([
{
id: 'intro',
options: {
attachTo: '.first-element bottom',
beforeShowPromise: function() {
return new Promise(function(resolve) {
setTimeout(function() {
window.scrollTo(0, 0);
resolve();
}, 500);
});
},
buttons: [
{
classes: 'shepherd-button-secondary',
text: 'Exit',
type: 'cancel'
},
{
classes: 'shepherd-button-primary',
text: 'Back',
type: 'back'
},
{
classes: 'shepherd-button-primary',
text: 'Next',
type: 'next'
}
],
classes: 'custom-class-name-1 custom-class-name-2',
highlightClass: 'highlight',
scrollTo: true,
showCancelLink: true,
title: 'Welcome to Rivet Labs',
text: ['This will help you toggle sidebar menu'],
when: {
show: () => {
console.log('show step');
},
hide: () => {
console.log('hide step');
}
}
}
},
{
here is 2nd id goes here
},
{
here is 3rd id goes here
}
}
I have solve my problem just we need to remove scroll function from next id to get to the element in default position. we have to remove this property //beforeShowPromise:function(){}// for next id.
beforeShowPromise: function() {
return new Promise(function(resolve) {
setTimeout(function() {
window.scrollTo(0, 0);
resolve();
}, 500);
});
},
I want to have an editor, that only allows bulleted "disc" lists. Since I only need a single list type, the button should not be a dropdown. How do I specify, that the list button should be a button, not a dropdown?
Current code:
<script>
tinyMCE.PluginManager.add('stylebuttons', function (editor, url) {
['pre', 'p', 'code', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function (name) {
editor.addButton("style-" + name, {
tooltip: "Toggle " + name,
text: name.toUpperCase(),
onClick: function () { editor.execCommand('mceToggleFormat', false, name); },
onPostRender: function () {
var self = this, setup = function () {
editor.formatter.formatChanged(name, function (state) {
self.active(state);
});
};
editor.formatter ? setup() : editor.on('init', setup);
}
})
});
});
tinymce.init({
selector: 'textarea',
plugins: "link advlist code stylebuttons",
advlist_bullet_styles: "disc",
target_list: false,
link_title: false,
menubar: false,
statusbar: false,
height: 600,
valid_elements: "p,br,b,i,a,h1,ul,li",
toolbar: 'undo redo | bold, italic | style-h1, bullist | link | code'
});
</script>
I am working with a backbone, jquery mobile, express app. Everything looks fine when the app starts and works correctly, however, when I click a link or change the url the html renders correctly but no jquery mobile magic appears. It only renders in the login part with a header and footer and format, but when the url changes and I come back, the page loses its css or jquery mobile magic.
define(['views/index', 'views/register', 'views/login', 'views/forgotpassword', 'views/profile',
'views/vinbookDoc', 'models/Account', 'models/Vinbook', 'models/vinBooksCollection'],
function(IndexView, RegisterView, LoginView, ForgotPasswordView, ProfileView,
vinbookDocView, Account, Vinbook, vinBooksCollection) {
var AppRouter = Backbone.Router.extend({
currentView: null,
routes: {
"index": "index",
"login": "login",
"desk/:id": "desk",
"profile/:id": "profile",
"register": "register",
"forgotpassword": "forgotpassword",
"vinbook/:id": "showVinbook"
},
initialize: function(){
$('.back').live('click', function(event) {
window.history.back();
return false;
});
this.firstPage = true;
},
showVinbook: function(id) {
var getCollection = new vinBooksCollection();
getCollection.url = '/accounts/me/vinbook';
this.changeView( new vinbookDocView({
collection: getCollection,
id: id
}));
getCollection.fetch();
},
changeView: function(page) {
this.currentView = page;
$(this.currentView.el).attr('data-role', 'page');
this.currentView.render();
$('body').append($(this.currentView.el));
var transition = $.mobile.defaultPageTransition;
// We don't want to slide the first page
if (this.firstPage) {
transition = 'none';
this.firstPage = false;
}
$.mobile.changePage($(this.currentView.el), {changeHash:false, transition: transition});
},
index: function() {
this.changeView(new IndexView() );
},
desk: function (id){
var model = new Account({id:id});
this.changeView(new ProfileView({model:model}));
model.fetch({ error: function(response){ console.log ('error'+JSON.stringify(response)); } });
console.log('works');
},
profile: function (id){
this.changeView(new IndexView() );
},
login: function() {
this.changeView(new LoginView());
},
forgotpassword: function() {
this.changeView(new ForgotPasswordView());
},
register: function() {
this.changeView(new RegisterView());
}
});
return new AppRouter();
});
require
require.config({
paths: {
jQuery: '/js/libs/jquery',
jQueryUIL: '/js/libs/jqueryUI',
jQueryMobile: '/js/libs/jqueryMobile',
Underscore: '/js/libs/underscore',
Backbone: '/js/libs/backbone',
models: 'models',
text: '/js/libs/text',
templates: '../templates',
jqm: '/js/jqm-config',
AppView: '/js/AppView'
},
shim: {
'jQueryMobile': ['jQuery', 'jqm' ],
'jQueryUIL': ['jQuery'],
'Backbone': ['Underscore', 'jQuery', 'jQueryMobile', 'jQueryUIL'],
'AppView': ['Backbone']
}
});
require(['AppView' ], function(AppView) {
AppView.initialize();
});
login
define(['AppView','text!templates/login.html'], function(AppView, loginTemplate) {
window.loginView = AppView.extend({
requireLogin: false,
el: $('#content'),
events: {
"submit form": "login"
},
initialize: function (){
$.get('/login', {}, function(data){});
},
login: function() {
$.post('/login', {
email: $('input[name=email]').val(),
password: $('input[name=password]').val()
},
function(data) {
console.log(data);
if (!data.error){window.location.replace('#desk/me');}
}).error(function(){
$("#error").text('Unable to login.');
$("#error").slideDown();
});
return false;
},
render: function() {
this.$el.html(loginTemplate);
$("#error").hide();
return this;
}
});
return loginView;
});
Just some more details:
When I change from page or the url to another page, a flash of the rendered website appears and then the css or design disappears.
I think this can solve your problem:
$(document).bind('pagechange', function() {
$('.ui-page-active .ui-listview').listview('refresh');
$('.ui-page-active :jqmData(role=content)').trigger('create');
});
i used flexigrid and the data that are supposed to be displayed in it are displayed instead in a white page, image here:
here is my view:
#using (Html.BeginForm("JsonEmployee", "Employees", FormMethod.Post))
{
#Html.ValidationSummary(true)
<fieldset>
<h5>
ENTER A NAME TO FILTER THE LIST:</h5>
<div style="float: left">
<input name="nameSelected" type="text" />   </div>
<div style="float: left">
<input class="btn btn-inverse" type="submit" value="FILTER" /></div>
</fieldset>
}
<table class="flex" style="display: none">
</table>
<script type="text/javascript" language="javascript">
$('.flex').flexigrid({
url: '/Employees/JsonEmployee',
dataType: 'json',
method: 'GET',
colModel: [
{ display: 'NUMBER', name: 'number', width: 200, sortable: true, align: 'center' },
{ display: 'NAME', name: 'name', width: 300, sortable: true, align: 'center' },
{ display: 'ROLE', name: 'role', width: 200, sortable: true, align: 'center'}],
searchitems: [
{ display: 'NUMBER', name: 'number' },
{ display: 'NAME', name: 'name', isdefault: true }
],
sortname: "number",
sortorder: "name",
usepager: true,
title: 'Employees',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 950
});
</script>
and here is my controller:
[Authorize(Users = "Admin")]
[HttpPost]
public ActionResult JsonEmployee(String nameSelected)
{
CacheClear();
var employees = db.Employees.Where(r => r.Name.Contains(nameSelected)).OrderBy(r => r.Name);
var res = new
{
page = 1,
total = employees.Count(),
rows = employees.Select(x => new { x.Number, x.Name, x.Role })
.ToList()
.Select(x => new
{
id = x.Number,
cell = new string[]
{
x.Number,
x.Name,
x.Role
}
}).ToArray(),
};
return Json(res, JsonRequestBehavior.AllowGet);
}
i have a form which accepts a string input from users.. if the user clicks the submit button, the flexigrid in my page should be populated by a filtered list.. however, the page redirects to a white page with the data of json just like the picture above...
You have created an HTML form pointing to the /Employees/JsonEmployee action. So when you submit this form it is normal that the browser will send a POST request to this controller action and redirect to it and show the results of its execution. That's how HTML works. If you want to stay on the same page you could AJAXify this form and cancel the default action. Like this:
$('form').submit(function () {
// Send an AJAX request to the controller action that this HTML <form>
// is pointing to in order to fetch the results in a JSON form
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
// When the AJAX request succeeds we get the result returned
// by the controller action which represents the JSON data source
// for the flexgrid. So all that's left is rebind the grid with
// this new data source:
$('.flex').flexAddData(result);
}
});
// Prevent the browser from redirecting to the /Employees/JsonEmployee action
return false;
});