Question

我想在jquery对话框中从数据库中获取一个id。我使用fullcalendar，当我点击一个事件时，会打开一个对话框。目前它是空的但我想得到事件的id并在对话框中显示它。

Fullcalendarextern.js：

    $(document).ready(function() {
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();

  var calendar = $('#calendar').fullCalendar({
   editable: true,
   header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
   },

   events: "../testcalendar/fullcalendar/events.php",



   // Convert the allDay from string to boolean
   eventRender: function(event, element, view) {
    if (event.allDay === 'true') {
     event.allDay = true;
    } else {
     event.allDay = false;
    }
   },   
   selectable: true,
   selectHelper: true,
   select: function(start, end, allDay) {
   var title = prompt('Event Title:');
   if (title) {
   var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
   var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
   $.ajax({
   url: '../testcalendar/fullcalendar/add_events.php',
   data: 'title='+ title+'&start='+ start +'&end='+ end ,
   type: "POST",

   });
   calendar.fullCalendar('renderEvent',
   {
   title: title,
   start: start,
   end: end,
   allDay: allDay
   },
   true // make the event "stick"
   );
   }
   calendar.fullCalendar('unselect');
   },
    editable: true,
   eventDrop: function(event, delta) {
   var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
   var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
   $.ajax({
   url: '../testcalendar/fullcalendar/update_events.php',
   data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
   type: "POST",

   });
   },
   eventResize: function(event) {
   var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
   var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
   $.ajax({
    url: '../testcalendar/fullcalendar/update_events.php',
    data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
    type: "POST",

   });

},
eventClick: function(calEvent, jsEvent, view) {
$( "#dialogstatusevent" ).dialog({
      autoOpen: false,

    });

      $( "#dialogstatusevent" ).dialog( "open" );
        var id = $("#idtest").val();
    },

   eventMouseover: function(event, domEvent) {
                var layer = '<div id="events-layer" class="fc-transparent" style="position:absolute; width:100%; height:100%; top:-1px; text-align:right; z-index:100"><a><img src="../testcalendar/editbt.png" title="edit" width="14" id="edbut'+event.id+'" border="0" style="padding-right:3px; padding-top:2px;" /></a><a><img src="../testcalendar/delete.png" title="delete" width="14" id="delbut'+event.id+'" border="0" style="padding-right:5px; padding-top:2px;" /></a></div>';
                $(this).append(layer);
                $("#delbut"+event.id).hide();
                $("#delbut"+event.id).fadeIn(300);
                $("#delbut"+event.id).click(function() {
                $.ajax({
                url: '../testcalendar/fullcalendar/delete_events.php',
                data: 'id=' + event.id ,
                type: "POST",
                });
                var nTime = 1 * 50;
                window.setTimeout("location.reload()", nTime);
                });
                $("#edbut"+event.id).hide();
                $("#edbut"+event.id).fadeIn(300);
                $("#edbut"+event.id).click(function() {
                    var title = prompt( '\n\nNew Event Title: ');

                    if(title){
                $.ajax({
                url: '../testcalendar/fullcalendar/update_title.php',
                data: 'title='+ title+'&id='+ event.id ,
                type: "POST",
                });
                var nTime = 1 * 50;
                window.setTimeout("location.reload()", nTime);
                    }


                });
            },   

            eventMouseout: function(calEvent, domEvent) {
                $("#events-layer").remove();
            },


  });

 });

agenda_view.php：

<div id="content">
<div id="table-row">
<!-- <div class="header_title" style="margin-bottom: 10px;">Agenda</div> -->
 <div class="agenda">
<html>
<head>
<link href='<?=base_url();?>testcalendar/css/fullcalendar.css' rel='stylesheet' />
<script src='<?=base_url();?>testcalendar/js/jquery-1.9.1.min.js'></script>
<script src='<?=base_url();?>testcalendar/js/jquery-ui-1.10.2.custom.min.js'></script>
<script src='<?=base_url();?>testcalendar/js/fullcalendar.min.js'></script>
<script src='<?=base_url();?>testcalendar/js/fullcalendarextern.js'></script>
<script src='<?=base_url();?>testcalendar/js/nieuweafspraak.js'></script>
<link href="<?=base_url();?>testcalendar/assets/css/jquery-ui-1.10.0.custom.css" rel="stylesheet" type="text/css" />

<style>

 body {
  margin-top: 40px;

  }


 #calendar {
  width: 900px;
  margin: 0 auto;
  }

</style>
</head>
<body>
<div id="dialogstatusevent" style="display:none" title="Mijn afspraak">
<div id="idtest"></div>
</div>
<div id='calendar'></div>
</body>
</html>
</div>
</div>

events.php：

<?php
// List of events
 $json = array();

 // Query that retrieves events
 $requete = "SELECT * FROM evenement ORDER BY id";

 // connection to the database
 try {
 $bdd = new PDO('mysql:host=localhost;dbname=blackboks-calendar', 'root', 'root');
 } catch(Exception $e) {
  exit('Unable to connect to database.');
 }
 // Execute the query
 $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));

 // sending the encoded result to success page
 echo json_encode($resultat->fetchAll(PDO::FETCH_ASSOC));

?>

Answer 1

我认为您可以从 events.php 中正确检索数据。所以在每个事件中，id已经存在。在这部分代码中：

eventClick: function(calEvent,...)

你可以做：

eventClick: function(calEvent, jsEvent, view) {
    var id = calEvent.yourId;
    $( "#dialogDeleteEventOrSomethingElse" ).dialog({
         /...
     }),
}

修改：回读后

<强> agenda_view.php

<div id="dialogstatusevent" style="display:none" title="Mijn afspraak">
    <div id="idtest">
    </div>
</div>

<强> Fullcalendarextern.js：

eventClick: function(calEvent, jsEvent, view) {
    // Write the id in your <div> of the dialog
    $( "#dialogstatusevent #idtest" ).text(calEvent.id);
    // Open dialog
    $( "#dialogstatusevent" ).dialog({
         // ...
     }),
}

我希望它符合你的期望。

我想在jquery对话框中从数据库中获取一个id

1 个答案: