페이지 새로 고침 없이 ajax를 사용하여 acf_form을 저장하는 방법

페이지 새로 고침 없이 ajax를 사용하여 acf_form을 저장하는 방법

저는 이 세가지 acf_폼을 가지고 있습니다.페이지 새로 고침 없이 ax를 통해 버튼 클릭 시 모든 양식을 저장하고 싶을 뿐만 아니라 이 양식들을 하나씩 보여주고 싶습니다.지금은 업데이트할 때마다 새로 고침 페이지입니다.디스플레이 none & block을 통해 js를 이용하여 보여드리겠습니다.

<div class="SetupNew">
            <h2>Setup Deals To Attract New Clientele</h2>
            <p>Example: buy $15 get $30 for services</p>
            <a href="javascript:void(0)"><p id="newDealsTxt">[Click Here To Setup] </p></a></div>
            <?php acf_form($args =  array(
                                          'post_id' => $post_id,
                                          'field_groups' => array(2029),
                                          'form_attributes' => array(
                                              'id'=>'newDeals'
                                           ),
                                      ));  ?>
            <div class="SetupEx">
            <h2>Setup Deals To Bring In Clientele During Nonpeak Hours</h2>
            <p>Example: buy $15 get $30 for services Tue-Thur 9am - 2pm.</p>          
            <a href="javascript:void(0)"><p id="exDealsTxt">[Click Here To Setup]</p></a></div>
            <?php  acf_form($args =  array(
                                          'post_id' => $post_id,
                                          'field_groups' => array(2047),
                                          'form_attributes' => array(
                                              'id'=>'exDeals'
                                          ),
                                      ));  ?>
            <div class="SetupFb">
            <h2>Setup $5 Off Coupon To Increase Testimonials And Sharing</h2>
            <p>Example: Leave a testimonial and get $5 off your next service.</p>
            <a href="javascript:void(0)"><p id="fbDealsTxt">[Click Here To Setup] </p></a></div>

            <?php  acf_form($args =  array(
                                          'post_id' => $post_id,
                                          'field_groups' => array(2123),
                                          'form_attributes' => array(
                                              'id'=>'fbDeals'
                                          ),
                                      ));  ?>
            <a href="javascript:void(0)"><h2 id="backk">Back << </h2>  </a>

꽤 늦게 오는데 오늘도 똑같은 문제가 생겼습니다.참고로, 여기 제 자바스크립트가 있습니다.

// call this function on document ready or when your ajax page is loaded
function renderPage() {
  // initialize the acf script
  acf.do_action('ready', $('body'));

  // will be used to check if a form submit is for validation or for saving
  let isValidating = false;

  acf.add_action('validation_begin', () => {
    isValidating = true;
  });

  acf.add_action('submit', ($form) => {
    isValidating = false;
  });

  $('.acf-form').on('submit', (e) => {
    let $form = $(e.target);
    e.preventDefault();
    // if we are not validating, save the form data with our custom code.
    if( !isValidating ) {
      // lock the form
      acf.validation.toggle( $form, 'lock' );
      $.ajax({
        url: window.location.href,
        method: 'post',
        data: $form.serialize(),
        success: () => {
          // unlock the form
          acf.validation.toggle( $form, 'unlock' );
        }
      });
    }
  });
}

언급URL : https://stackoverflow.com/questions/35058298/how-to-save-acf-form-using-ajax-without-page-refresh