Issue
I have to run a PHP action that is inside HTML which is inside a JS script. The current code does an error because the function that renders HTML breaks the syntax. I am getting Uncaught SyntaxError: Unexpected token '='
Here is my code example:
<script type="text/javascript">
(function($) {
$('.menu-main').on('click', function() {
var page = window.location.href;
var mobile = $('.menu-item-mobile');
var search = '<div class="wpml-language-switcher">'<?php do_action('wpml_add_language_selector'); ?>'</div>';
setTimeout(function() {
if(mobile.find('form').length == 1) return;
mobile.html(search);
}, 50); //delay time
});
})(jQuery);
</script>
Here is the output with failed structure in line 8 (Uncaught SyntaxError: Unexpected token '='):
<script type="text/javascript">
(function($) {
$('.av-burger-menu-main').on('click', function() {
var page = window.location.href;
var mobile = $('.menu-item-search-mobile');
var search = '<div class="wpml-floating-language-switcher">'
<div
class="wpml-ls-statics-shortcode_actions wpml-ls wpml-ls-legacy-dropdown js-wpml-ls-legacy-dropdown" id="lang_sel">
<ul>
<li tabindex="0" class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-lv wpml-ls-current-language wpml-ls-first-item wpml-ls-item-legacy-dropdown">
<a href="#" class="js-wpml-ls-item-toggle wpml-ls-item-toggle lang_sel_sel icl-lv">
<img
class="wpml-ls-flag iclflag"
src="https://sampledomain.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/lv.png"
alt=""
width=18
height=12
/><span class="wpml-ls-native icl_lang_sel_native">LV</span></a>
<ul class="wpml-ls-sub-menu">
<li class="icl-en wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-en">
<a href="https://sampledomain.com/en/" class="wpml-ls-link">
<img
class="wpml-ls-flag iclflag"
src="https://sampledomain.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/en.png"
alt=""
width=18
height=12
/><span class="wpml-ls-native icl_lang_sel_native" lang="en">EN</span></a>
</li>
<li class="icl-ru wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-ru wpml-ls-last-item">
<a href="https://sampledomain.com/ru/" class="wpml-ls-link">
<img
class="wpml-ls-flag iclflag"
src="https://sampledomain.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/ru.png"
alt=""
width=18
height=12
/><span class="wpml-ls-native icl_lang_sel_native" lang="ru">RU</span></a>
</li>
</ul>
</li>
</ul>
</div>
'</div>';
setTimeout(function() {
if(mobile.find('form').length == 1) return;
mobile.html(search);
}, 50); //delay time
});
})(jQuery);
</script>
Is there anything possible to avoid the syntax error?
Solution
If I were you I'd put the PHP contents into a template tag and grab the contents with jQuery. For example...
<script type="text/template" id="template-wpml_add_language_selector">
<?php do_action('wpml_add_language_selector'); ?>
</script>
<script type="text/javascript">
(function($) {
$('.menu-main').on('click', function() {
var templateContents = $('#template-wpml_add_language_selector').html();
var page = window.location.href;
var mobile = $('.menu-item-mobile');
var search = '<div class="wpml-language-switcher">' + templateContents + '</div>';
setTimeout(function() {
if(mobile.find('form').length == 1) return;
mobile.html(search);
}, 50); //delay time
});
})(jQuery);
</script>
Answered By - Levi Cole Answer Checked By - Pedro (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.