Implement jQuery Smart wizard

时间:2019-12-31 作者:sialfa

我想实施jQuery Smart Wizard 创建一个允许用户输入一些信息的表单。通常需要将所有html插入到一个页面上,但我不知道这是否是wordpress的最佳方法,也不知道它是否能很好地工作。是否有人在他/她的主题中实现了它?我需要弄清楚如何管理表单提交,我认为最好的方法是ajax,但提交后如何保存数据?

1 个回复
最合适的回答,由SO网友:Antti Koskinen 整理而成

我自己还没有使用过这个jQuery库,但只要快速浏览一下文档,就可以将向导包装在<form> 标记并添加smartWizard onFinish 事件触发事件时,将表单数据发送到服务器admin ajaxREST API.

所以你的html看起来像这样,

<form id="wizzard-form">
  <div id="wizzard" class="swMain">
    <ul>
      <!-- step li items -->
    </ul>
    <div id="step-n">
      <!-- step input fields -->
    </div>
    <!-- more steps -->
  </div>
</form>
脚本

$(document).ready(function(){
  // Smart Wizard         
  $(\'#wizzard\').smartWizard({
    onFinish:onFinishCallback
  });

  function onFinishCallback(objs, context){
    if(validateAllSteps()){
      $(\'#wizzard-form\').submit(function(event){
        event.preventDefault();

        var data = {
          \'action\': \'my_wizzard_ajax\',
          // form data
        };

        jQuery.post(ajax_object.ajax_url, data, function(response) {
            alert(\'You are a wizzard \' + response);
        });
      });
    }
  }        
});
PHP来处理ajax保存。选择合适的函数或编写自己的自定义逻辑来保存用户发送的数据。

add_action( \'wp_ajax_my_wizzard_ajax\', \'my_wizzard_ajax\' );
add_action( \'wp_ajax_nopriv_my_wizzard_ajax\', \'my_wizzard_ajax\' ); // if available to non logged-in users

function my_wizzard_ajax() {

  // nonce check

  // capabilities check

  // required data exists checks, get data from $_POST super global variable

  if ( $all_good ) {

    // do something
    // wp_insert_post
    // wp_update_post
    // wp_update_meta
    // wp_update_user
    // update_user_meta

    wp_send_json_success( \'Harry\' );

  } else {

    wp_send_json_error( \'Rincewind\' );

  }

}
N.B 这绝不是一个完整的示例,需要您填写实现的详细信息。