jQWidgets Forums

jQuery UI Widgets Forums Scheduler jqxScheduler OpenDialog not Opening due to Error

This topic contains 2 replies, has 2 voices, and was last updated by  jqwidgetsdev 8 years, 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • jqwidgetsdev
    Participant

    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.


    Hristo
    Participant

    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-appointment

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    jqwidgetsdev
    Participant

    Hello Hristo.

    One quick feedback, your suggestion worked like a charm. Thank you!

    Best regards.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.