[FIXED] How to output PHP inside JS/jQuery that generates HTML?

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)