jQuery UI Widgets › Forums › Scheduler › problem jqxscheduler with reactJS
This topic contains 1 reply, has 1 voice, and was last updated by vatit 7 years, 1 month ago.
-
Author
-
Hi ,
I added jqxscheduler in may reactApp, but has a probleam. this may code:
html file:
<link rel=”stylesheet” href=”./jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”bootstrap.min.css” type=”text/css” />
<script type=”text/javascript” src=”./jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxdate.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxdata.export.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxtooltip.js”></script>
<script type=”text/javascript” src=”./jqwidgets/globalization/globalize.js”></script>
<script type=”text/javascript” src=”../jqwidgets/globalization/globalize.culture.de-DE.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxGrid.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxgrid.aggregates.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxdropdownbutton.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxcolorpicker.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxtooltip.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxribbon.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxWindow.js”></script>
<script type=”text/javascript” src=”./jqwidgets/JqxValidator.js”></script>
<script type=”text/javascript” src=”./jqwidgets/JqxInput.js”></script>
<script type=”text/javascript” src=”./jqwidgets/JqxTextArea.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxnotification.js”></script>
<script type=”text/javascript” src=”./jqwidgets/JqxScheduler.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxscheduler.api.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxradiobutton.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxnumberinput.js”></script>file js:
import React, { Component } from ‘react’;
import ReactDOM from ‘react-dom’;
import Request from ‘superagent’;
import JqxScheduler from ‘./jqwidgets-react/react_jqxscheduler’;export default class Scheduler extends React.Component {
componentDidMount()
{}
componentWillMount()
{}
constructor()
{
super();let source =
{
dataType: ‘array’,
dataFields: [
{ name: ‘id’, type: ‘string’ },
{ name: ‘description’, type: ‘string’ },
{ name: ‘location’, type: ‘string’ },
{ name: ‘subject’, type: ‘string’ },
{ name: ‘calendar’, type: ‘string’ },
{ name: ‘start’, type: ‘date’ },
{ name: ‘end’, type: ‘date’ }
],
id: ‘id’,
localData: []
};this.state = {
source: source
}
}render() {
let resources =
{
colorScheme: ‘scheme05’,
dataField: ‘calendar’,
source: new window.jqx.dataAdapter(this.state.source)
};let appointmentDataFields =
{
from: ‘start’,
to: ‘end’,
id: ‘id’,
description: ‘description’,
location: ‘location’,
subject: ‘subject’,
resourceId: ‘calendar’
};
let views =
[
‘dayView’,
‘weekView’,
‘monthView’
];let dataAdapter = new window.jqx.dataAdapter(this.state.source);
return (
<div>
<JqxScheduler ref=’myScheduler’
width={1000} height={600} source={dataAdapter}
date={new Date()} showLegend={true}
view={‘weekView’} resources={resources} views={views}
appointmentDataFields={appointmentDataFields}
/>
</div>
);
}
}and error:
b.(anonymous function).getVisibleDate
http://localhost:3000/jqwidgets/JqxScheduler.js:7:24841
b.(anonymous function).getViewStart
http://localhost:3000/jqwidgets/JqxScheduler.js:7:23923
b.(anonymous function)._renderrows
http://localhost:3000/jqwidgets/JqxScheduler.js:7:192839
b.(anonymous function)._render
http://localhost:3000/jqwidgets/JqxScheduler.js:7:65370
i
http://localhost:3000/jqwidgets/JqxScheduler.js:7:45516
a.jqx.scheduler.dataView.resourcesDataView.update
http://localhost:3000/jqwidgets/JqxScheduler.js:7:49957
k
http://localhost:3000/jqwidgets/jqxscheduler.api.js:7:97413
a.jqx.scheduler.dataView.databind
http://localhost:3000/jqwidgets/jqxscheduler.api.js:7:97432
b.(anonymous function).databind
http://localhost:3000/jqwidgets/JqxScheduler.js:7:50081
b.(anonymous function).render
http://localhost:3000/jqwidgets/JqxScheduler.js:7:63167
b.(anonymous function).createInstance
http://localhost:3000/jqwidgets/JqxScheduler.js:7:21004
a.jqx.applyWidget
http://localhost:3000/jqwidgets/jqxcore.js:14:63088
HTMLDivElement.<anonymous>
http://localhost:3000/jqwidgets/jqxcore.js:14:67516
Function.each
http://localhost:3000/jqwidgets/jqxcore.js:7:6099
init.each
http://localhost:3000/jqwidgets/jqxcore.js:7:2367
init.a.fn.(anonymous function) [as jqxScheduler]
http://localhost:3000/jqwidgets/jqxcore.js:14:67439
JqxScheduler.createComponent
D:/Project/puma3.0/Source/React App/vatreact/src/jqwidgets-react/react_jqxscheduler.js:49
46 | if(!this.template) {
47 | JQXLite(this.componentSelector).html(this.props.template);
48 | }
> 49 | JQXLite(this.componentSelector).jqxScheduler(options);
50 | };
51 | setOptions(options) {
52 | JQXLite(this.componentSelector).jqxScheduler(‘setOptions’, options);
View compiled
JqxScheduler.componentDidMount
D:/Project/puma3.0/Source/React App/vatreact/src/jqwidgets-react/react_jqxscheduler.js:16
13 | export default class JqxScheduler extends React.Component {
14 | componentDidMount() {
15 | let options = this.manageAttributes();
> 16 | this.createComponent(options);
17 | };
18 | manageAttributes() {
19 | let properties = [‘appointmentOpacity’,’appointmentsMinHeight’,’appointmentDataFields’,’appointmentTooltips’,’columnsHeight’,’contextMenu’,’contextMenuOpen’,’contextMenuClose’,’contextMenuItemClick’,’contextMenuCreate’,’changedAppointments’,’disabled’,’date’,’dayNameFormat’,’enableHover’,’editDialog’,’editDialogDateTimeFormatString’,’editDialogDateFormatString’,’editDialogOpen’,’editDialogCreate’,’editDialogKeyDown’,’editDialogClose’,’exportSettings’,’height’,’legendPosition’,’legendHeight’,’localization’,’min’,’max’,’ready’,’renderAppointment’,’rendering’,’rendered’,’rtl’,’resources’,’rowsHeight’,’showToolbar’,’showLegend’,’scrollBarSize’,’source’,’statuses’,’touchRowsHeight’,’theme’,’touchAppointmentsMinHeight’,’touchScrollBarSize’,’timeZone’,’touchDayNameFormat’,’toolBarRangeFormat’,’toolBarRangeFormatAbbr’,’toolbarHeight’,’views’,’view’,’width’];
View compiled
commitLifeCycles
D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:14248
14245 | startPhaseTimer(finishedWork, ‘componentDidMount’);
14246 | instance.props = finishedWork.memoizedProps;
14247 | instance.state = finishedWork.memoizedState;
> 14248 | instance.componentDidMount();
14249 | stopPhaseTimer();
14250 | } else {
14251 | var prevProps = current.memoizedProps;
View compiled
commitAllLifeCycles
D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:15342
15339 | if (effectTag & (Update | Callback)) {
15340 | recordEffect();
15341 | var current = nextEffect.alternate;
> 15342 | commitLifeCycles(finishedRoot, current, nextEffect, currentTime, committedExpirationTime);
15343 | }
15344 |
15345 | if (effectTag & Ref) {
View compiled
HTMLUnknownElement.callCallback
D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:100
97 | // nested call would trigger the fake event handlers of any call higher
98 | // in the stack.
99 | fakeNode.removeEventListener(evtType, callCallback, false);
> 100 | func.apply(context, funcArgs);
101 | didError = false;
102 | }
103 |
View compiled
invokeGuardedCallbackDev
D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:138
135 | // Synchronously dispatch our fake event. If the user-provided function
136 | // errors, it will trigger our global error handler.
137 | evt.initEvent(evtType, false, false);
> 138 | fakeNode.dispatchEvent(evt);
139 |
140 | if (didError) {
141 | if (!didSetError) {
View compiled
invokeGuardedCallback
D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:187
184 | * @param {…*} args Arguments for function
185 | */
186 | invokeGuardedCallback: function (name, func, context, a, b, c, d, e, f) {
> 187 | invokeGuardedCallback$1.apply(ReactErrorUtils, arguments);
188 | },
189 |
190 | /**
View compiled
commitRoot
D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:15481
15478 | var _didError2 = false;
15479 | var _error2 = void 0;
15480 | {
> 15481 | invokeGuardedCallback$2(null, commitAllLifeCycles, null, root, currentTime, committedExpirationTime);
15482 | if (hasCaughtError()) {
15483 | _didError2 = true;
15484 | _error2 = clearCaughtError();
View compiled
completeRoot
D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:16496
16493 |
16494 | // Commit the root.
16495 | root.finishedWork = null;
> 16496 | root.remainingExpirationTime = commitRoot(finishedWork);
16497 | }
16498 |
16499 | // When working on async work, the reconciler asks the renderer if it should
View compiled
performWorkOnRoot
D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:16440
16437 | finishedWork = renderRoot(root, expirationTime, false);
16438 | if (finishedWork !== null) {
16439 | // We’ve completed the root. Commit it.
> 16440 | completeRoot(root, finishedWork, expirationTime);
16441 | }
16442 | }
16443 | } else {
View compiled
performWork
D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:16358
16355 | }
16356 | } else {
16357 | while (nextFlushedRoot !== null && nextFlushedExpirationTime !== NoWork && (minExpirationTime === NoWork || minExpirationTime >= nextFlushedExpirationTime)) {
> 16358 | performWorkOnRoot(nextFlushedRoot, nextFlushedExpirationTime, false);
16359 | findHighestPriorityRoot();
16360 | }
16361 | }
View compiled
performSyncWork
D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:16330
16327 | }
16328 |
16329 | function performSyncWork() {
> 16330 | performWork(Sync, false, null);
16331 | }
16332 |
16333 | function performWork(minExpirationTime, isAsync, dl) {
View compiled
requestWork
D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:16230
16227 |
16228 | // TODO: Get rid of Sync and use current time?
16229 | if (expirationTime === Sync) {
> 16230 | performSyncWork();
16231 | } else {
16232 | scheduleCallbackWithExpiration(expirationTime);
16233 | }
View compiled
scheduleWork$1
D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:16096
16093 | !isWorking || isCommitting$1 ||
16094 | // …unless this is a different root than the one we’re rendering.
16095 | nextRoot !== root) {
> 16096 | requestWork(root, nextExpirationTimeToWorkOn);
16097 | }
16098 | if (nestedUpdateCount > NESTED_UPDATE_LIMIT) {
16099 | invariant(false, ‘Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.’);
View compiled
scheduleRootUpdate
D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:16663
16660 | }
16661 | enqueueUpdate(current, update, expirationTime);
16662 |
> 16663 | scheduleWork$1(current, expirationTime);
16664 | return expirationTime;
16665 | }
16666 |
View compiled
updateContainerAtExpirationTime
D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:16690
16687 | container.pendingContext = context;
16688 | }
16689 |
> 16690 | return scheduleRootUpdate(current, element, expirationTime, callback);
16691 | }
16692 |
16693 | function findHostInstance(component) {
View compiled
updateContainer
D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:16717
16714 | var current = container.current;
16715 | var currentTime = recalculateCurrentTime();
16716 | var expirationTime = computeExpirationForFiber(currentTime, current);
> 16717 | return updateContainerAtExpirationTime(element, container, parentComponent, expirationTime, callback);
16718 | }
16719 |
16720 | function getPublicRootInstance(container) {
View compiled
ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render
D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:17000
16997 | if (callback !== null) {
16998 | work.then(callback);
16999 | }
> 17000 | updateContainer(children, root, null, work._onCommit);
17001 | return work;
17002 | };
17003 | ReactRoot.prototype.unmount = function (callback) {
View compiled
(anonymous function)
D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:17140
17137 | if (parentComponent != null) {
17138 | root.legacy_renderSubtreeIntoContainer(parentComponent, children, callback);
17139 | } else {
> 17140 | root.render(children, callback);
17141 | }
17142 | });
17143 | } else {
View compiled
unbatchedUpdates
D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:16557
16554 | isUnbatchingUpdates = false;
16555 | }
16556 | }
> 16557 | return fn(a);
16558 | }
16559 |
16560 | // TODO: Batching should be implemented at the renderer level, not within
View compiled
legacyRenderSubtreeIntoContainer
D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:17136
17133 | };
17134 | }
17135 | // Initial mount should not be batched.
> 17136 | unbatchedUpdates(function () {
17137 | if (parentComponent != null) {
17138 | root.legacy_renderSubtreeIntoContainer(parentComponent, children, callback);
17139 | } else {
View compiled
render
D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:17195
17192 | return legacyRenderSubtreeIntoContainer(null, element, container, true, callback);
17193 | },
17194 | render: function (element, container, callback) {
> 17195 | return legacyRenderSubtreeIntoContainer(null, element, container, false, callback);
17196 | },
17197 | unstable_renderSubtreeIntoContainer: function (parentComponent, element, containerNode, callback) {
17198 | !(parentComponent != null && has(parentComponent)) ? invariant(false, ‘parentComponent must be a valid React Component’) : void 0;
View compiled
./src/index.js
D:/Project/puma3.0/Source/React App/vatreact/src/index.js:7
4 | import App from ‘./App’;
5 | import registerServiceWorker from ‘./registerServiceWorker’;
6 |
> 7 | ReactDOM.render(<App/>, document.getElementById(‘root’));
8 | registerServiceWorker();
9 |
10 |
View compiled
__webpack_require__
D:/Project/puma3.0/Source/React App/vatreact/webpack/bootstrap f1a765776e4c12d9fd7e:678
675 | };
676 |
677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
679 |
680 | // Flag the module as loaded
681 | module.l = true;
View compiled
fn
D:/Project/puma3.0/Source/React App/vatreact/webpack/bootstrap f1a765776e4c12d9fd7e:88
85 | console.warn(“[HMR] unexpected require(” + request + “) from disposed module ” + moduleId);
86 | hotCurrentParents = [];
87 | }
> 88 | return __webpack_require__(request);
89 | };
90 | var ObjectFactory = function ObjectFactory(name) {
91 | return {
View compiled
0
http://localhost:3000/static/js/bundle.js:48961:18
__webpack_require__
D:/Project/puma3.0/Source/React App/vatreact/webpack/bootstrap f1a765776e4c12d9fd7e:678
675 | };
676 |
677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
679 |
680 | // Flag the module as loaded
681 | module.l = true;
View compiled
./node_modules/ansi-regex/index.js.module.exports
D:/Project/puma3.0/Source/React App/vatreact/webpack/bootstrap f1a765776e4c12d9fd7e:724
721 | __webpack_require__.h = function() { return hotCurrentHash; };
722 |
723 | // Load entry module and return exports
> 724 | return hotCreateRequire(0)(__webpack_require__.s = 0);
725 |
726 |
727 |
View compiled
(anonymous function)
http://localhost:3000/static/js/bundle.js:728:10Pls help me resolve this problem.
Thank you.
I resolved this problem.
Thank you.
-
AuthorPosts
You must be logged in to reply to this topic.