提问者:小点点

将$.get方法移动到它自己的函数中以避免重复


我有以下函数用于从php json_encode中提取数据以在FullCalendar中使用。

    eventDrop: function(info) {
    $.get( "php/get-events.php", function( data ) {
    // data is your result
    // Find the value for editable where the event id = the event you are trying to move 
    rawdata = JSON.parse(data);
    editable = rawdata.find(x => x.id === info.event.id).editable;
   start= info.event.start.toISOString();
   start = moment(info.event.start).format('Y-MM-DD HH:mm:ss');
   end= info.event.end.toISOString();
   end = moment(info.event.end).format('Y-MM-DD HH:mm:ss');
   title = info.event.title;
   id = info.event.id;
    });
   }

我将对fullcalendar中的eventResize函数使用非常类似的代码,因此我想提取这一部分

 $.get( "php/get-events.php", function( data ) {
    // data is your result
    // Find the value for editable where the event id = the event you are trying to move 
    rawdata = JSON.parse(data);

它自己的功能(不是100%确定我在这里使用了正确的术语?)关于如何在全局范围内传递变量,我看到了这个答案jQuery-将函数中的变量传递给另一个函数,所以我尝试将上面的代码从eventDrop中移出,如下所示

$.get( "php/get-events.php", function( data ) {
    // data is your result
    // Find the value for editable where the event id = the event you are trying to move 
    rawdata = JSON.parse(data);
});
   eventDrop: function(info) {

但这给了我一个错误

Uncaught SyntaxError: Unexpected token '.'

理想情况下,我希望在整个页面中使用$.get只执行一次json提取,然后引用rawdata全局变量来读取信息,这可能吗?

目前我的全部解决方案是

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var today = moment().day();
    var calendar = new FullCalendar.Calendar(calendarEl, {
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      },
      defaultDate: today,
      editable: true,
      
    $.get( "php/get-events.php", function( data ) {
    // data is your result
    // Find the value for editable where the event id = the event you are trying to move 
    rawdata = JSON.parse(data);
    });

    eventDrop: function(info) {
    editable = rawdata.find(x => x.id === info.event.id).editable;
   start= info.event.start.toISOString();
   start = moment(info.event.start).format('Y-MM-DD HH:mm:ss');
   end= info.event.end.toISOString();
   end = moment(info.event.end).format('Y-MM-DD HH:mm:ss');
   title = info.event.title;
   id = info.event.id;
   if (!confirm("Confirm you want to change " + info.event.title + " to " + info.event.start)) {
      info.revert();
    }
    else{
      if(editable === 'Y'){
        $.ajax({
        url: 'php/calendarupdate.php',
        data: 'title=' + info.event.title + '&start='+ start +'&end=' + end + '&id=' + info.event.id ,
        type: "POST"
        });
      } 
      else{
        alert("Can only modify this calendar event if you created it. Please ask the event creator to modify.");
        calendar.refetchEvents();
      }
    }

   
   },

      navLinks: true, // can click day/week names to navigate views
      dayMaxEvents: true, // allow "more" link when too many events
      events: {
        url: '/php/get-events.php',
        failure: function() {
          document.getElementById('script-warning').style.display = 'block'
        }
      },
      loading: function(bool) {
        document.getElementById('loading').style.display =
          bool ? 'block' : 'none';
      }
    });

    calendar.render();
  });

</script>

共1个答案

匿名用户

问题解决了,多亏了@Patrick Evans的建议,我把get调用添加到了代码的中间,我不得不把它添加到最后,在“;”之后。结束这条线。我现在可以在EventDrop中引用“rawData”变量。

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var today = moment().day();
    var calendar = new FullCalendar.Calendar(calendarEl, {
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      },
      defaultDate: today,
      editable: true,
      
    eventDrop: function(info) {
    editable = rawdata.find(x => x.id === info.event.id).editable;
   start= info.event.start.toISOString();
   start = moment(info.event.start).format('Y-MM-DD HH:mm:ss');
   end= info.event.end.toISOString();
   end = moment(info.event.end).format('Y-MM-DD HH:mm:ss');
   title = info.event.title;
   id = info.event.id;
   if (!confirm("Confirm you want to change " + info.event.title + " to " + info.event.start)) {
      info.revert();
    }
    else{
      if(editable === 'Y'){
        $.ajax({
        url: 'php/calendarupdate.php',
        data: 'title=' + info.event.title + '&start='+ start +'&end=' + end + '&id=' + info.event.id ,
        type: "POST"
        });
      } 
      else{
        alert("Can only modify this calendar event if you created it. Please ask the event creator to modify.");
        calendar.refetchEvents();
      }
    } 
   },
      navLinks: true, // can click day/week names to navigate views
      dayMaxEvents: true, // allow "more" link when too many events
      events: {
        url: '/php/get-events.php',
        failure: function() {
          document.getElementById('script-warning').style.display = 'block'
        }
      },
      loading: function(bool) {
        document.getElementById('loading').style.display =
          bool ? 'block' : 'none';
      }
    });
    $.get( "php/get-events.php", function( data ) {
    // data is your result
    // Find the value for editable where the event id = the event you are trying to move 
    rawdata = JSON.parse(data);
    });

    calendar.render();
  });

</script>