Full Calendar ACF Replicate/call jquery function

JavaScript
, ,
1

I am working on a project with Advanced Custom Fields and Full Calendar. When clicking on a day on the calendar a window opens (using izimodal plugin for this) and you can create an event using requests that are inserted via ACF and are fetched from the fields. See image

When you pick a value from the select, it triggers a function that shows the “Request Details” above.

This is the function that is used to achieve that.

function getRequestDetails(){
    var url = eventCreate['url'];
    var requestID = jQuery("#acf-field_595cb1439530e").val();
    var eventDate = jQuery("input[name=request-date]").val();
    var startTime = jQuery("input[name=teaching-start-time]").val();
    var endTime = jQuery("input[name=teaching-end-time]").val();
    var postID = jQuery("#contanier-teacher-selection").attr('data-post-id');
    var data = {
        'action': 'get_request_details',
        "requestID": requestID,
        "eventDate": eventDate,
        "startTime": startTime,
        "endTime": endTime,
        "postID": postID
    };
    //send ajax
    jQuery.ajax({
        url: url,
        type: 'POST',
        data: data,
        success: function (data) {
            jQuery("#request-details-metabox").html(data);
        }
    });

Now on another page given the acf-field for the request, you can create an event by choosing a date from the calendar. See Image. Now because izimodal window can’t be made draggable, the details of the request remain invisible in the background. When you choose a date from the date field, it triggers the teachers select field. I’d like to add to that function or call the previous one, so when that happens it shows the request details above like in the first picture. This is the function

function updateTeacherOptions() {

    var url = eventCreate['url'];
    var requestID = jQuery("#input-teaching-requests").val();
    var eventDate = jQuery("input[name=request-date]").val();
    var startTime = jQuery("input[name=teaching-start-time]").val();
    var endTime = jQuery("input[name=teaching-end-time]").val();
    var postID = 1;

    var data = {
        'action': 'create_event_update_teacher_select',
        "requestID": requestID,
        "eventDate": eventDate,
        "startTime": startTime,
        "endTime": endTime,
        "postID": postID
    };
    //send ajax
    jQuery.ajax({
        url: url,
        type: 'POST',
        data: data,
        success: function (data) {
            jQuery("#contanier-teacher-selection").html(data);
        }
    });

This is its call, inside the same file.

jQuery(document).ready(function ($) {

    $(document).on('change', '.create-request-event', function () {
        updateTeacherOptions();
    });

Now I want on the same event, to reveal the request details. How can I do this?

2

@m3g4p0p could you help me with this? I guess i’ll have to write a similar function to the last one. I’ve tried adding jQuery("#request-details-metabox").html(data); to call the requestdetails function inside this
jQuery(document).ready(function ($) {

$(document).on('change', '.create-request-event', function () {
    updateTeacherOptions();
});

but it didn’t work. Do you also need to see the DOM?

Thanks!

3

Hey @sunr4y, I’m not familiar with izimodal or ACF, so I can only try to help you with some general debugging I’m afraid. :-/ So do you just want to display the data of the newly created event to the user? Then what does the response of the create_event_update_teacher_select request look like – is it actually some HTML?

4

create_event_update_teacher_select is an ajax req, if you checked the second image, when you select a date, the teacher select form appears and allows you to choose a teacher. Now on top of this I’d also like to add to that response to show me the request details like on the first image, something that the first function does when you choose a course.

This is the file that contains the output of both functions.

5

Well if the response itself doesn’t contain that data, you’ll have to request it separately – normally a POST request like creating an event would at the very least contain an ID of the new resource.

That would be some PHP code?

6

Yes, it’s php that contains the forms, if you see the ajax request, when successful it executes this line
jQuery("#contanier-teacher-selection").html(data);
In the php line, this is the form that gets shown

    <div class="container-field">
        <label for="teaching-teacher"><?php _e('Teachers', 'obj-center'); ?></label>
        <div id='contanier-teacher-selection'>
            <?php echo $teachersdata; ?>
        </div>
        <span class="center-error-message"></span>
    </div>

On the other hand, the first function outputs this via its own ajax

<div class="container-field" style="width: 100%">
            <label><?php _e('Request Details', 'obj-center') ?></label>
            <div id="center-request-details">
                <?php _e('No Available info.', 'obj-center') ?>
            </div>
        </div>

Now I want the request details displayed also when the second function updateTeacherOptions() is triggered. when the user picks the date I want to see both the teacher options and the details of the request.

7

So do you just want to display the response from the 1st request along with the 2nd? Maybe you could store it in a variable then, along the lines of

var requestDetails = ''

function getRequestDetails () {
    // etc...
    jQuery.ajax({
        url: url,
        type: 'POST',
        data: data,
        success: function (data) {
            requestDetails = data
            jQuery("#request-details-metabox").html(data);
        }
    });
}

function updateTeacherOptions() {
    // etc...
    jQuery.ajax({
        url: url,
        type: 'POST',
        data: data,
        success: function (data) {
            jQuery("#contanier-teacher-selection").html(requestDetails + data);
        }
    });
}

Or if the 2nd request takes place on a different page, store it to the session storage to make the data available for the whole session:

// On page A
function getRequestDetails () {
  // etc...
  jQuery.ajax({
    // ...
    success: function (data) {
      sessionStorage.setItem('requestDetails', data)
      jQuery("#request-details-metabox").html(data)
    }
  })
}

// On page B
function updateTeacherOptions() {
  // etc...
  jQuery.ajax({
    // ...
    success: function (data) {
      var requestDetails = sessionStorage.getItem('requestDetails') || ''
      jQuery("#contanier-teacher-selection").html(requestDetails + data)
    }
  })
}
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.