wordpress - 短代码,ob_start打破了jQuery

时间:2014-04-08 00:11:28

标签: jquery wordpress

我试图在wordpress中制作一个shortcode插件。

<?php

    function upd_signup_form() {
        $key = get_query_var( 'upd' );

        ob_start();
?>
        <a href="#" class="signup-submit">Reserve Your Spot for Free</a>
        <div id="upd-modal" style="display: none;">
            <a href="#" id="upd-modal-close">CLOSE X</a>
            <div id="upd-form">
                <form name="registerform" id="registerform" action="<?php echo site_url().'/wp-login.php?action=register'; ?>" method="post">
                    <p>
                        <label for="user_login">Username<br>
                        <input type="text" name="user_login" id="user_login" class="input" value="" size="20"></label>
                    </p>
                    <p>
                        <label for="user_email">E-mail<br>
                        <input type="text" name="user_email" id="user_email" class="input" value="" size="25"></label>
                    </p>
                        <p>
                        <label for="first_name">First Name<br>
                        <input id="first_name" class="input" type="text" value="" name="first_name">
                        </label>
                    </p>
                    <p>
                        <label for="last_name">Last Name<br>
                        <input id="last_name" class="input" type="text" value="" name="last_name">
                        </label>
                    </p>
                    <p>
                        <label for="password">Password<br>
                        <input id="password" class="input" type="password" value="" name="password">
                        </label>
                    </p>
                    <p>
                        <label for="rpassword">Re-enter Password<br>
                        <input id="rpassword" class="input" type="password" value="" name="rpassword">
                        </label>
                    </p>
                    <p>
                        <label for="upd_terms">
                        <input id="upd_terms" class="checkbox" type="checkbox" value="true" name="upd_terms">
                        I accept these terms and conditions.</label>
                    </p>
                    <p>
                        <label for="upd_register">
                        <input id="upd_register" class="checkbox" type="checkbox" value="true" name="upd_register">
                        I would like to sign-up for the Synek Waitlist.
                        </label>
                    </p>
<?php
        if( $key != '' ) :
            $uargs = array(
                'role' => 'subscriber',
                'meta_key' => 'upd_key',
                'meta_value' => $key
            );

            $ruser = get_users( $uargs );

            if( is_array($ruser) ) :
                $userx = $ruser['0'];
?>
                    <input type="hidden" id="upd_user_id" name="upd_user_id" value="<?php echo $userx->ID; ?>">
                    <input type="hidden" id="upd_user_key" name="upd_user_key" value="<?php echo $key; ?>">
<?php
            endif;

        endif;
?>
                    <br class="clear">
                    <input type="hidden" name="redirect_to" value="">
                    <p class="submit"><input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Register"></p>
                </form>
            </div>
        </div>

    <script type="text/javascript">
        jQuery('.signup-submit').on('click', function(){

            jQuery('#upd-modal').fadeIn('400');

        });

        jQuery('#upd-modal-close').on('click', function(){

            jQuery('#upd-modal').fadeOut('400');

        });
    </script>

 <?php
    $form = ob_get_clean();
    return $form;

    }

    add_shortcode('upd-signup', 'upd_signup_form');



?>

现在,如果我没有做ob_get,只是回显一下html,这不是你应该做的,一切正常。但是,当我执行ob_start和ob_get_clean时,jQuery不再需要工作,我收到此错误:

Uncaught SyntaxError: Unexpected token < 

我查看了我的代码,那个代币不在那里。我不知道为什么会这样。

1 个答案:

答案 0 :(得分:3)

我遇到了同样的问题。 WordPress在输出的html中添加了p和br标签。

我能够通过重构HTML来解决,因此空间和换行符更少。问题出乎意料地特定于脚本标签。如果html的结构是这样的话,它不应该导致任何问题。

<script type="text/javascript">
jQuery('.signup-submit').on('click', function(){
    jQuery('#upd-modal').fadeIn('400');
});
jQuery('#upd-modal-close').on('click', function(){
    jQuery('#upd-modal').fadeOut('400');
});
</script>

如果您仍然遇到问题,那么此PHP应该有助于从HTML中删除所有换行符。

$form = ob_get_clean();
return str_replace("\r\n", '', $form);