Search code examples
javascriptphpwordpressreturnresponse

JS did'nt work in "return array('html' => $response);"

I have a PHP file that outputs products based on a WP_Query.

Everything works so far!

But now I want to output javascript in the return as well. And this is not recognized / loaded ... For me, it looks like javascript is not recognized as a javascript. If I insert an alert this will be ignored.

...
if ( $posts_gf->have_posts() ) :
    while ( $posts_gf->have_posts() ) : $posts_gf->the_post();
        $response .= '
        <script type="text/javascript">
            alert("Hello! I am an alert box!");
        </script>
        <div class="item col-md-4">
            Produkt
        </div>
        ';
    endwhile;
...

I want to load a carousel from a js which is include in functions.php. If I paste the same code for the carousel directly into the template-part file "content-glasfaser.php" it works.

the output

Here is the excerpt from the file where the carousel should load (all js/css files are loading/existing in header and footer):

    $products = self::$productDefinitions[$result['Standorttyp']];

    $posts_gf = new WP_Query(array(
        'post_type' => 'tarife',
        'posts_per_page' => 6,
        'post_status' => 'publish',
        'post__in' => $products,
        'orderby' => 'title',
        'order' => 'ASC',
        'tax_query' => array(
            array(
                'taxonomy' => 'tarif_kategorie',
                'field' => 'slug',
                'terms' => 'glasfaser',
            ),
        ),
    ));



    $street = utf8_encode($result['Strasse']);
    $houseNo = $result['Hausnummer'];
    $postCode = $result['Plz'];
    $city = $result['Ort'];


    $response = '
    <h3>inside return</h3>
    <section class="regular slider">';

    // Zeige die Glasfaser-Tarife

    if ( $posts_gf->have_posts() ) :
        while ( $posts_gf->have_posts() ) : $posts_gf->the_post();
            $response .= '
                <div class="item col-md-4">
                    Produkt
                </div>
            ';
        endwhile;
        wp_reset_postdata();
    else:
        $response .= '';

    endif;  


    return array('html' => $response);

    }
}

EDIT: For the carousel i've insert 3 files in my functions.php (wordpress)

wp_enqueue_style( 'xxx-slider', get_stylesheet_directory_uri() . '/css/slick.css', array(), '20170925' );
wp_enqueue_style( 'xxx-slidertheme', get_stylesheet_directory_uri() . '/css/slick-theme.css', array(), '20170925' );  
... 
wp_enqueue_script( 'xxx-sliderjs', get_template_directory_uri() . '/js/slick.min.js', array(), '20190218', true );
  • All these files are loading in header/footer.
  • The carousel should run inside an already loaded php.
  • The script is from http://kenwheeler.github.io/slick/ and it's worked in the "already loaded" file. But not inside the ajax(?).
Solution

  • If this is all your code it seems like you're injecting the reply from php into an already loaded html page right?

    If that is the case the JS won't be executed unless you explicitly call it. I Would sovle this by reformating your JS so you're left with a single script and call a function within that script after loading your html.

    $response = '
<script> function initialize { alert("Hello! I am an alert box!"); } </script>
<h3>inside return</h3>
<section class="regular slider">';

// Zeige die Glasfaser-Tarife

if ( $posts_gf->have_posts() ) :

    then you can call this after loading with:

    //Code that loads your php result
initialize();