wordpress – shortcode, ob_start breaks jQuery

I’m trying to make a shortcode plugin in wordpress.

<?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');



?>

Now, if I didn’t do the ob_get, and just echo’d out the html, which is not what you’re supposed to do, everything works fine. But, when I do the ob_start and ob_get_clean, jQuery no longer wants to work and I get this error:

Read More
Uncaught SyntaxError: Unexpected token < 

I’ve looked through my code, that token isn’t in there. I don’t know why this is happening.

Related posts

Leave a Reply

1 comment

  1. I had the same problem. WordPress was adding p and br tags within the html of the output.

    I was able to solve by restructuring the HTML so there were less spaces and line breaks. The problem was surprisingly specific to the script tags. If the html is structured like this it should not cause any problems.

    <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>
    

    If you are still having problems then this PHP should help remove all line breaks from the HTML.

    $form = ob_get_clean();
    return str_replace("rn", '', $form);