jQWidgets Forums
jQuery UI Widgets › Forums › Scheduler › jqxScheduler OpenDialog not Opening due to Error
Tagged: angular scheduler, bootstrap scheduler, javascript scheduler, jquery scheduler, jqwidgets scheduler, jqxScheduler, jqxScheduler OpenDialog Programmatically Cannot read property 'setAttribute' of null
This topic contains 2 replies, has 2 voices, and was last updated by jqwidgetsdev 8 years, 11 months ago.
-
Author
-
Hello.
I want to add an appointment *programmatically*, though a button click. See code example below
When I execute I get the following error message, and the Open Dialog never shows.
jqx-all.js:7 Uncaught TypeError: Cannot read property ‘setAttribute’ of nullopenDialog @ jqx-all.js:7a.jqx.invoke @ jqx-all.js:7a.jqx.jqxWidgetProxy @ jqx-all.js:7(anonymous function) @ jqx-all.js:7each @ jquery-1.11.1.min.js:2each @ jquery-1.11.1.min.js:2a.fn.(anonymous function) @ jqx-all.js:7(anonymous function) @ jqxScheduler.html:91dispatch @ jquery-1.11.1.min.js:3r.handle @ jquery-1.11.1.min.js:3
If I use the workaround the first time the dialog opens the appointment values are always blank.
The second time I open the appointment values are as expected.Can you please show me the way to resolve this issue?
<!doctype html> <html lang="en"> <head> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script> <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.summer.css" type="text/css" /> <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript"> $(document).ready(function () { // prepare the data var 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: [] }; var adapter = new $.jqx.dataAdapter(source); $("#scheduler").jqxScheduler({ date: new $.jqx.date(2015, 11, 26), width: 850, height: 600, source: adapter, showLegend: true, resources: { colorScheme: "scheme05", dataField: "calendar", source: new $.jqx.dataAdapter(source) }, appointmentDataFields: { from: "start", to: "end", id: "id", description: "description", location: "place", subject: "subject", resourceId: "calendar" }, view: 'weekView', views: [ 'dayView', 'weekView', 'monthView' ] }); // Create jqxButton widgets. $("#jqxButton").jqxButton({ width: 120, height: 40 }); // Subscribe to Click events. $("#jqxButton").on('click', function () { var start = new Date(); var end = new Date(); var appointment = { id: '123', subject: 'subject', description: 'description', location: 'location', status: 'Pending', calendar: 'Pending', resourceId: 'Pending', start: start, end: end }; $('#scheduler').jqxScheduler('addAppointment', appointment); // id is not working. // we have to manually find appointment // var appointments = $('#scheduler').jqxScheduler('getAppointments'); // var appointment = _.find(appointments, function(a) { // return a.subject === 'subhect' // }); if (typeof(appointment) != 'undefined' && appointment != null) { $('#scheduler').jqxScheduler('ensureAppointmentVisible', appointment.id); $("#scheduler").jqxScheduler('openDialog'); } }); }); </script> </HEAD> <BODY> <div> <input type="button" value="Action123" id='jqxButton' /> </div> <div id="scheduler"></div> </BODY> </HTML>
Thank you.
Hello jqwidgetsdev,
You need to set visible date before add new appointment and open it.
Please, take a look this example:
https://www.jseditor.io/?key=jqxscheduler-example-add-appointmentBest Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comHello Hristo.
One quick feedback, your suggestion worked like a charm. Thank you!
Best regards.
-
AuthorPosts
You must be logged in to reply to this topic.