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 #summary
and 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>
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"]')); ?>');
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; ?>'));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.