Include script in infinite scroll Wordpress Posts

Question

We are currently using Ajax infinite scroll for blog posts. But we wanted to included scripts (javascript) on every blogposts. Everything works fine except the script only show once at the very top portion of the blogpost.

here is the snippet for the singles.php loop which has been modified for Ajax infinite scroll standards:

<?php while ( have_posts() ) : the_post(); ?>
<?php if (et_get_option('divi_integration_single_top') <> '' && et_get_option('divi_integrate_singletop_enable') == 'on') echo(et_get_option('divi_integration_single_top')); ?>
    <?php
    echo do_shortcode('[ajax_load_more cache="true" cache_id="2869844236" cta="true" cta_position="after:1" css_classes="call-to-actions call-to-actions-js" images_loaded="true" post_type="post" repeater="default" previous_post="true" previous_post_id="'. get_the_ID() .'" posts_per_page="1" button_label="Previous Post"]');
    ?>

<?php endwhile; ?>

and here is the snippet for the repeater template which include a simple script code.

<article id="post-<?php the_ID(); ?>" <?php post_class( 'et_pb_post' ); ?>>
  <script>
    document.write("This text is displayed using a simple javascript.");
  </script>
  <div class="et_post_meta_wrapper">
    <h1><?php the_title(); ?></h1>
    <?php the_post_thumbnail('hero', array('alt' => get_the_title())); ?>
  </div>
  <div class="entry-content">
    <?php
    do_action( 'et_before_content' );

    the_content();

    wp_link_pages( array( 'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'Divi' ), 'after' => '</div>' ) );
    ?>
  </div>
</article>

Not sure why the script only show once. when I've placed it on the top of the title of each blogposts.

Answer 1

document.write() will make an indirect call to document.open() to open the new output stream when your ajax request the repeater template. Next time you scroll more the write() method does not works because the previous output stream is currently open. You should close the stream.

You can try this way:

document.open();
document.write("This text is displayed using a simple javascript.");
document.close();

document.write() is a bad practice for production. You should only use it for testing.

Better solution:

<p id="output"></p>

<script>
document.getElementById("output").innerHTML = "This text is displayed using a simple javascript.";
</script>

EDIT:

To display text every time once the ajax request is done we will need a unique id to append text to the element.

In my above suggestion

id must be unique to repeat the text from JavaScript.

Solution:

We will use WordPress for the little help. WordPress has unique ids for all the post you create.

the_ID(); method inside WordPress While loop returns the post id. So append the same id in our P element and append our text by getting the element by its new id.

<p id="output-<?php the_ID(); ?>"></p>

<script>
  var idname = document.getElementById("output-<?php the_ID(); ?>");
  idname.innerHTML = "This text is displayed using a simple javascript.";
</script>

This will append the text in every post.