Edit fullcalendar event data in popup

Question

In my fullcalendar when event is clicked popup is opened with event data and if status is 'open' (retrieved from database with ajax) select is appended like this:

eventClick: function (calEvent, jsEvent, view) {
    $("#dialog").dialog({
        autoOpen: false,
    });
    $("#name").val(calEvent.status);
    $("#title").val(calEvent.title);
    if(calEvent.status == 'open') {
        $('#append .appact').remove();
        $('#append').append("<div class='appact'><select><option selected='selected'>Accept</option><option>Reject</option></select><input type='submit' name='submit'></div>");
    } else {
        $('#append .appact').remove();
    }
    $('#dialog').dialog('open');
}

How to submit select value (or any other) from popup in php file to update data in database?

Answer 1

An ideal approach is to wrap your user inputs in a form which links to a separate php file. You then send whatever the user submits to the database. So, a form in your modal. Let me know if further clarification is needed.

Answer 2

The popup I use for fullcalendar (ie it's a lightbox) has two buttons, ok and cancel.

If I click the ok button, I do about these steps:

// 1. Collect all the data that should be sent to the server.  
var myValue = $('#myField').val();
if (!myValue) ... ...
...
...
var dataToStore = {
    'field1' : $('myField1').val(),
    'field2' : date2,
    ...
};

// 2. Start an ajax call to send the data to the server.    
$.ajax({
    // Get the form content
    url: 'index.php?id=21&type=2&action=saveEntry ... ... ',
    context: this,
    data : dataToStore,
    success: function(data, textStatus, jqXHR) {
            // handle the server answer, and remove the lightbox form.
            removeLightboxWidget();
    },
    error: function(jqXHR, textStatus, error) {
            // Handle the error
    }
});

...

As server answer, I prefer a JSON like { 'status' : 'ok', 'result' : 'asfasdf', ...} That way, you can react fine to what comes from the server.

Try to match names as much as possible. It will reduce the work. So the field "name" in the database may be called "name" in the form. Like this, you will be able to use automated routines. That being said, if you have a data object that you send with the ajax() method, jQuery (if you use it) will do the HTTP GET encoding for you.

In the PHP file, just $_GET['xxx'] or $_POST['yyy'] your data. Form the values to a query, interpret the action command and send the query to the database. By the way, here comes the CRUD pattern, if you wish something good to read about: Create, Read, Update, Delete. In settings like you describe with your question, you'll always implement these four steps, with all exceptions and variations. Many libraries allow to implement CRUD patterns on a high level (AngularJS, Backbone...), so you can get rid of much work between the database and the browser.

Hope this gives you a good start :-)