Блог

Итак, я хочу использовать модальный способ для отправки значений в localstorage, но, похоже, код, который я сделал, неверен. Я знаю только, как отправлять значения с помощью подсказки, но я хочу попробовать использовать модальный.

Вот мой html-код:

 lt;bodygt;  lt;bodygt;  lt;div id="calendar"gt;lt;/divgt;  lt;/bodygt;    lt;div id='datepicker'gt;lt;/divgt;  lt;div class="modal fade" tabindex="-1" role="dialog"gt;  lt;div class="modal-dialog" role="document"gt;  lt;div class="modal-content"gt;    lt;div class="modal-header"gt;  lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"gt;lt;span aria-hidden="true"gt;amp;times;lt;/spangt;lt;/buttongt;  lt;h4 class="modal-title"gt;Create new eventlt;/h4gt;  lt;/divgt;  lt;div class="modal-body"gt;  lt;div class="row"gt;  lt;div class="col-xs-12"gt;  lt;label class="col-xs-4" for="title"gt;Event titlelt;/labelgt;  lt;input type="text" class="title" name="title" id="title" /gt;  lt;/divgt;  lt;/divgt;  lt;div class="row"gt;  lt;div class="col-xs-12"gt;  lt;label class="col-xs-4" for="starts-at"gt;Starts atlt;/labelgt;  lt;input type="text" name="starts_at" id="starts-at" /gt;  lt;/divgt;  lt;/divgt;  lt;div class="row"gt;  lt;div class="col-xs-12"gt;  lt;label class="col-xs-4" for="ends-at"gt;Ends atlt;/labelgt;  lt;input type="text" name="ends_at" id="ends-at" /gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="modal-footer"gt;  lt;button type="button" class="btn btn-default" data-dismiss="modal"gt;Closelt;/buttongt;  lt;button type="button" class="btn btn-primary" id="save-event"gt;Save changeslt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  

Вот мой js-код:

 lt;script type='text/javascript'gt;  $(document).ready(function () {  $("lt;link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.css' /gt;").appendTo("head");  var Events = Backbone.Collection.extend({});  var EventsView = Backbone.View.extend({  el: document.getElementById("content"),  render: function () {  var self = this;  var events = JSON.parse(localStorage.getItem('events'));  var events = new Events(events);  var jsevents = events.toJSON();  self.$el.fullCalendar({  agenda: 'h:mm{ - h:mm}',  '': 'h(:mm)t',  aspectRatio: 1.5,  droppable: true,  weekend: true,  editable: true,  eventStartEditable: true,  eventDurationEditable: true,  dragScroll: true,  eventDrop: function (event) {  console.log(event);  },  defaultView: 'month',  firstDay: 1,  handleWindowResize: true,  allDayDefault: false,  firstHour: 7,  columnFormat: {  month: 'dddd',  week: 'ddd, dS',  day: 'dddd, MMM dS'  },  header: {  right: 'prev,next',  center: 'title',  left: 'month,agendaWeek,agendaDay'  },  selectable: true,  selectHelper: true,  select: function (start, end) {  $('.modal').modal('show');  },  eventClick: function(event, element) {  $('.modal').modal('show');  $('.modal').find('#title').val(event.title);  $('.modal').find('#starts-at').val(event.start);  $('.modal').find('#ends-at').val(event.end);   },  events: function (start, end, timezone, callback) {  callback(jsevents);  }  });  }  });  var view = new EventsView({  el: '#calendar'  });  view.render();    $("#starts-at, #ends-at").datetimepicker();   $('#save-event').on('click', function() {    var eventData;    if (title) {  eventData = {  title: title,  start: $('#starts-at').val(),  end: $('#ends-at').val()    };  self.$el.calendar('renderEvent', eventData, true);  events.push(eventData);  localStorage.setItem('events', JSON.stringify(events));  }    self.$el.fullCalendar('unselect');   $('.modal').find('input').val('');   $('.modal').modal('hide');  });    });  lt;/scriptgt;  

Когда я запускаю его в браузере, он работает нормально до тех пор, пока я не нажму кнопку «Сохранить изменения», чтобы отправить значение в localStorage, где появится ошибка .