拦截wordpress使用jQuery模式对话框添加新帖子

时间:2015-08-04 04:53:55

标签: jquery wordpress

我使用插件自定义帖子类型UI设置Wordpress自定义帖子类型,并使用高级自定义字段插件将自定义字段添加到自定义帖子。一切都很好,没有任何问题或者无论如何......

但是现在我的客户希望我在自定义帖子类型提交表单上设置某种提醒,告诉用户一些可选的自定义字段仍然具有默认值。

然后,用户可以决定停止表单提交和编辑自定义字段,或者决定稍后再进行操作,然后立即提交表单。

我决定使用jQuery模式对话框提交一些jQuery表单提交拦截。我需要的第一件事是在添加新的自定义帖子或编辑现有帖子后,通过jQuery钩子添加wordpress个功能。这是执行此操作的代码:

function mps_enqueue($hook) {
    global $post_type;

    if ( $post_type != "sis-ambulant") return;
    if ( 'post.php' == $hook || 'post-new.php' == $hook ) {

        wp_enqueue_script( 'mps_custom_script', MPS_SCRIPT_URL . '/js/functions.js', array( 'jquery-ui-dialog' ) );
        wp_enqueue_style( 'jquery-ui-theme-mps', MPS_SCRIPT_URL . '/css/jquery-ui.min.css');
    }
}
 add_action( 'admin_enqueue_scripts', 'mps_enqueue' );

然后我还需要一些HTML标记,它将由jQuery模式对话框使用。我通过另一个wordpress管理页脚操作添加该标记:

function my_post_edit_page_footer(){
    global $post_type;
    if ( $post_type != "sis-ambulant") return;
?>
<div id="sis-dialog" title="SIS-Formular Message">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span><?php _e('Some notes for the user', 'mps2015-theme'); ?>:</p>
<p id="sis-dialog-notes"><br /></p>
</div>
<?php
}
add_action( 'admin_footer-post-new.php', 'my_post_edit_page_footer' );   
add_action( 'admin_footer-post.php', 'my_post_edit_page_footer' );

然后是jQuery代码。在这里,我首先填写名为sisgroups&amp;的变量。 sisrequired及其价值观。 sisgroups是带有可选值的自定义字段,我想在表单提交时提醒用户。 sisrequired填充了所需的表单字段,因为iI只想在填写所有必填表单字段后触发模式对话框。

在表单提交上,我首先检查是否填写了所有必填字段,然后检查var sisgroups上的默认可选值并向#sis-dialog-notes添加注释以通知用户默认值字段,最后触发jQuery对话框#sis-dialog

以下是jQuery代码:

var sisgroups = []; // here we add our objects to the array so we can later notify on jquery dialog
var sisrequired = []; // here we add all our required fields, so we can only do the jquery dialog reminder after all required fields are filled in

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

    a = 0;

    // fill sisgroups with optional radio boxes
    $("div[id*='_thema_']").each(function() {

        sisgroups[a] = {}; // this creates an object - [] creates an array
        sisgroups[a]["key"] = $(this).attr("data-field_key");
        sisgroups[a]["name"] = $(this).attr("data-field_name");

        a++;

    }); // end each _thema_

    r = 0;

    // fill sisrequired with required form fields
    $("div.required").each(function() {

        sisrequired[r] = {};
        sisrequired[r]["key"] = $(this).attr("data-field_key");
        sisrequired[r]["type"] = $(this).attr("data-field_type");
        sisrequired[r]["name"] = $(this).attr("data-field_name");

        r++;
    }); // end each div.required


    $('#sis-dialog').dialog({
        autoOpen: false,
        width: 600,
        modal: true,
        resizable: false,
        buttons: {
            "SIS-Formular abschicken": function() {
                $form = $('form#post');
                $form.addClass('values-confirmed');
                $(this).dialog("destroy");
                $form.submit();
                //document.post.submit();
                //document.getElementById("post").submit();
                //$( "#post" ).submit();
                //$(this).dialog().find('form').submit();
                //$('form#post').submit();
            },
            "Bearbeitung fortsetzen": function() {
                $(this).dialog("close");
            }
        }
    });


     $('form#post').submit(function(e){

        sisallrequired = true;

        $.each(sisrequired, function(k, v) {

            // we need to check on different types as they are handled differently

            if ( v['type'] == "textarea" || v['type'] == "text" ) {

                if( $("#acf-field-"+v['name']).val().length === 0 ) {
                    sisallrequired = false;
                    return false;
                }
            } else if ( v['type'] == "date_picker" ) {
                if($("input[name='fields["+v['key']+"]']").val().length === 0 ) {
                    sisallrequired = false;
                    return false;
                }
            }
        });

        // let's add a line break to the sis dialog notes paragraph
        //$("p#sis-dialog-notes").html('<p>&nbsp;</p>');

        // only if all required fields are filled in we do a check on the sisgroups and alert the user via jquery pop-up dialog
        if ( sisallrequired == true ) {

            // sisgroups is an indexed array of object with properties key, name
            $.each(sisgroups, function(key, val) {

                if ($("input[name='fields["+val['key']+"]']:checked").val() == 2 ) {

                    //console.log( $("label[for='acf-field-"+val['name']+"']").text() );

                    $('p#sis-dialog-notes').append( $("label[for='acf-field-"+val['name']+"']").text() + '<br />');
                } else {
                    //console.log("NO VAL OF 2");
                }


            }); // end each sisgroups

            if (!$(this).hasClass('values-confirmed')) {
                e.preventDefault();
                $('#sis-dialog').dialog('open');
                //valuesCheck();
            }
        } // end if check for filled in fields
    }); // end post.submit
});

实际上一切都很好。在表单上提交jQuery做了它的事情,我收到有关默认可选自定义字段的通知。我点击了submit / publish并创建了自定义帖子类型但它的状态始终为DRAFT,实际上从未获得PUBLISHED

这正是我的问题!自定义帖子被提交和添加(作为草稿!)但从未发布!如果我删除jQuery模式对话框代码一切正常,自定义帖子就会发布。

所以......代码有什么问题?我一直在寻找小时和数小时,而不仅仅是渴望找到答案; - )

感谢您的所有帮助&amp;期待您的回复!!!

1 个答案:

答案 0 :(得分:0)

似乎我必须回答我自己的问题;-)但首先感谢你在facebook上指导我解决问题和解决方案的Casey Patrick Driscoll。

实际问题是帖子提交表单有多个提交按钮,并且在jQuery对话框中调用$ form.submit()只是使用表单中找到的第一个按钮将帖子保存为草稿。

第一个解决方案是在发布按钮上使用点击事件而不是$(&#39;表格#post&#39;)。submit(function(e){});

$('#publish').click(function(e){

   // do validation actions here
   if (!$(this).hasClass('values-confirmed')) {
      e.preventDefault();
      $('#sis-dialog').dialog('open');
   }
});

执行我的验证,阻止默认的单击操作,然后在jQuery模式对话框中继续#publish click ...

        $('#sis-dialog').dialog({
        autoOpen: false,
        width: 600,
        modal: true,
        resizable: false,
        buttons: {
            "SIS-Formular abschicken": function() {
                $('#publish').addClass('values-confirmed');
                $(this).dialog("destroy");
                $('#publish').click();
                return true;
            },
            "Bearbeitung fortsetzen": function() {
                $(this).dialog("close");
            }
        }
    });

然后最终提交表单并单击正确的#publish按钮 - &gt;问题解决了; - )

另一种可能性仍然是使用$(&#39;表格#post&#39;)。submit()事件,但也要观察点击了哪个表单按钮

var formbuttonclicked = "";

$('form#post input[type="submit"]').click(function(event) {
    formbuttonclicked = event.target.id;
});

表单按钮上的此单击事件将查看单击了哪个按钮。然后在表单提交事件中我们通常做:

    $('form#post').submit(function(e){

   // do validation actions here
   if (!$(this).hasClass('values-confirmed')) {
      e.preventDefault();
      $('#sis-dialog').dialog('open');
   }
});

然后在jQuery模式对话框

        $('#sis-dialog').dialog({
        autoOpen: false,
        width: 600,
        modal: true,
        resizable: false,
        buttons: {
            "SIS-Formular abschicken": function() {

                $form = $('form#post');
                $form.addClass('values-confirmed');
                $(this).dialog("destroy");
                $('#' + formbuttonclicked).click();
                return true;
            },
            "Bearbeitung fortsetzen": function() {
                $(this).dialog("close");
            }
        }
    });

我们不提交表单,而是在按钮上调用click事件,该事件已存储在变量formbuttonclicked

$('#' + formbuttonclicked).click();

问题解决了;-)再次感谢Casey Patrick Driscoll在facebook上给了我一些他的时间和正确的见解!

向所有人致以问候 becki