How to print wordpress shortcode from javascript

Question

I have a little problem printing a wordpress php shortcode from javascript.

Here's some code:

JS

    <script>
    function hashHandler(){
        this.oldHash = window.location.hash;
        this.Check;

        var that = this;
        var detect = function(){
            if(that.oldHash!=window.location.hash){
                console.debug("HASH CHANGED - new has" + window.location.hash);
                that.oldHash = window.location.hash;
                if (window.location.hash == "#summary"){
                    console.debug ("true for summary");
                    $(".HG-system-builder-contact-form-container").html('<?php echo do_shortcode('[contact-form-7 id="5514" title="DYS summary page"]'); ?>');
                } else {
                    console.debug("false for summary")
                }
            }
        };
        this.Check = setInterval(function(){ detect() }, 100);

    }

    var hashDetection = new hashHandler();
</script>

This script checks if the hash in my url it's #summaryand if it is, it should add this php shortcode.

The result of the php shortcode is a contact form generating using contact form 7 (wordpress plugin) but unfortunately it has some errors.

Here's the results from chrome inspector:

    <script>
        function hashHandler(){
            this.oldHash = window.location.hash;
            this.Check;

            var that = this;
            var detect = function(){
                if(that.oldHash!=window.location.hash){
                    console.debug("HASH CHANGED - new has" + window.location.hash);
                    that.oldHash = window.location.hash;
                    if (window.location.hash == "#summary"){
                        console.debug ("true for summary");
                        $(".HG-system-builder-contact-form-container").html('<div role="form" class="wpcf7" id="wpcf7-f5514-p986-o1" lang="en-US" dir="ltr">
<div class="screen-reader-response"></div>
<form name="" action="/create-your-system/#wpcf7-f5514-p986-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="5514" />
<input type="hidden" name="_wpcf7_version" value="4.2" />
<input type="hidden" name="_wpcf7_locale" value="en_US" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f5514-p986-o1" />
<input type="hidden" name="_wpnonce" value="ff2e2b253a" />
</div>
<p>Your Name (required)<br />
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </p>
<p>Your Email (required)<br />
    <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span> </p>
<p>Subject<br />
    <span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" /></span> </p>
<p>Your Message<br />
    <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </p>
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div>');
                    } else {
                        console.debug("false for summary")
                    }
                }
            };
            this.Check = setInterval(function(){ detect() }, 100);

        }

        var hashDetection = new hashHandler();
    </script>
    <div class="HG-system-builder-contact-form-container"></div>


                </div>
            </div>

as you can see the problem is that the resulting html goes on new lines breaking the code and displaying this error

Uncaught SyntaxError: Unexpected token ILLEGAL

any ideas on how to solve this?

Thanks

EDIT

$(".HG-system-builder-contact-form-container").html('<div role="form" class="wpcf7" id="wpcf7-f5514-p986-o1" lang="en-US" dir="ltr"><div class="screen-reader-response"></div><form name="" action="/create-your-system/#wpcf7-f5514-p986-o1" method="post" class="wpcf7-form" novalidate="novalidate"><div style="display: none;"><input type="hidden" name="_wpcf7" value="5514" /><input type="hidden" name="_wpcf7_version" value="4.2" /><input type="hidden" name="_wpcf7_locale" value="en_US" /><input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f5514-p986-o1" /><input type="hidden" name="_wpnonce" value="ff2e2b253a" /></div><p>Your Name (required)<br />    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </p><p>Your Email (required)<br />    <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span> </p><p>Subject<br />    <span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" /></span> </p><p>Your Message<br />    <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </p><p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p><div class="wpcf7-response-output wpcf7-display-none"></div></form></div>');

but in the html source:

<div class="HG-system-builder-contact-form-container"></div>

Community · Accepted Answer · 2017-05-23 11:51:17Z

1

This is because javascript cannot take strings over multiple lines as you are getting out of the shortcode. Before you echo it out, have a look at getting rid of the new lines in the echo Strip new lines in PHP

Like this:

$(".HG-system-builder-contact-form-container").html('<?php echo str_replace(array("\r", "\n"), '', do_shortcode('[contact-form-7 id="5514" title="DYS summary page"]')); ?>');

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Jun 23, 2015 at 8:38

Rob Schmuecker

8,9642 gold badges21 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Nick Over a year ago

It doesn't work, i have the same error : Uncaught SyntaxError: Unexpected token <

Rob Schmuecker Over a year ago

@Nick This is not the same error. Are you creating the "script" in PHP as otherwise you cannot call PHP from within browser interpreted javascript.

Nick Over a year ago

Actually you are right, it does work the error was my fault, but the shortcode result is not printed as html. I'll edit my question with the result obtained

Rob Schmuecker Over a year ago

How is the shortcode result printed? As I mentioned, you cannot call shortcodes straight out of javascript unfortunately. You will need to interpret that in PHP first.

Nick Over a year ago

It is in php and if you check the edit question you'll see the printed result

|

r3mainer · Accepted Answer · 2015-06-23 08:38:30Z

0

There's an easy workaround — use base64 encoding:

$b = base64_encode(do_shortcode('[contact-form-7 id="5514" title="DYS summary page"]'));
$(".HG-system-builder-contact-form-container").html(atob('<?php echo $b; ?>'));

answered Jun 23, 2015 at 8:38

r3mainer

24.8k3 gold badges58 silver badges94 bronze badges

1 Comment

Nick Over a year ago

Doesn't work, same error: Uncaught SyntaxError: Unexpected token <

Collectives™ on Stack Overflow

How to print wordpress shortcode from javascript

2 Answers 2

9 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related