Losing JS/HTML format when using AJAX

Anonymous

#253680

Hello,

we have some JS scripts on a results page.

Here is the page: http://gtssolutionscic-com.stackstaging.com/courses-test/

In the collapsible “More info+”, we have a series of tabs that should work like this: http://gtssolutionscic-com.stackstaging.com/services/

The unique code (custom-tabs-products.js) for the tab:

function openGoal(evt, devGoals) {
var i, tabcontent2, tablinks2;
tabcontent2 = document.getElementsByClassName(“tabcontent3”);
for (i = 0; i < tabcontent2.length; i++) {
tabcontent2[i].style.display = “none”;
}
tablinks2 = document.getElementsByClassName(“tablinks3″);
for (i = 0; i < tablinks2.length; i++) {
tablinks2[i].className = tablinks2[i].className.replace(” active3″, “”);
}
document.getElementById(devGoals).style.display = “block”;
evt.currentTarget.className += ” active3″;
}

To work with this “results.php”:

<?php
/**
* Search & Filter Pro
*
* Sample Results Template
*
* @package Search_Filter
* @author Ross Morsali
* @link https://searchandfilter.com
* @copyright 2018 Search & Filter
*
* Note: these templates are not full page templates, rather
* just an encaspulation of the your results loop which should
* be inserted in to other pages by using a shortcode – think
* of it as a template part
*
* This template is an absolute base example showing you what
* you can do, for more customisation see the WordPress docs
* and using template tags –
*
* http://codex.wordpress.org/Template_Tags
*
*/

// If this file is called directly, abort.
if ( ! defined( ‘ABSPATH’ ) ) {
exit;
}

if ( $query->have_posts() )
{
?>

Found <?php echo $query->found_posts; ?> Results<br />
Page <?php echo $query->query[‘paged’]; ?> of <?php echo $query->max_num_pages; ?><br />

<div class=”pagination”>

<div class=”nav-previous”><?php next_posts_link( ‘Older posts’, $query->max_num_pages ); ?></div>
<div class=”nav-next”><?php previous_posts_link( ‘Newer posts’ ); ?></div>
<?php
/* example code for using the wp_pagenavi plugin */
if (function_exists(‘wp_pagenavi’))
{
echo “<br />”;
wp_pagenavi( array( ‘query’ => $query ) );
}
?>
</div>

<?php

while ($query->have_posts())
{
$query->the_post();

?>

<div class=”course”>
<div class=”course-main”>
<div class=”course-image”><?php the_post_thumbnail(“small”); ?></div>
<?php $price = get_post_meta(get_the_ID(), ‘_price’, true); ?>
<div class=”course-price”><?php echo ‘<p class=”price”>£’ . number_format($price, 0, ‘.’, ‘.’) ; ?></div>
<div class=”course-title”><?php the_title(); ?></div>
<div class=”course-plus”>
<div class=”purchase-button-bg”></div>
<div class=”more-info-button-bg”></div>
</div>

</div>

</div>
<div class=”course-buttons”>
<div class=”course-purchase”>
<div class=”topics”>
<span>Purchase</span>
<div class=”course-add content-inner”><div class=”course-summary”><?php do_action( ‘woocommerce_single_product_summary’ ); ?></div></div>
</div>
</div>
<div class=”course-more-info”>
<div class=”topics”>
<span>More Info +</span>
<div class=”course-full-content content-inner”>
<div class=”tab”>
<button title=”course-description-tab” onclick=”openService(event, ‘course-description’)” class=”tab-layout tablinks3″ /><span>Description</span></button>
<button title=”course-audience-tab” onclick=”openService(event, ‘course-audience’)” class=”tab-layout tablinks3″ /><span>Audience</span></button>
<button title=”course-outcomes-tab” onclick=”openService(event, ‘course-outcomes’)” class=”tab-layout tablinks3″ /><span>Outcomes</span></button>
<button title=”course-prerequisites-tab” onclick=”openService(event, ‘course-prerequisites’)” class=”tab-layout tablinks3″ /><span>Prerequisites</span></button>
<button title=”course-licences-tab” onclick=”openService(event, ‘course-licences’)” class=”tab-layout tablinks3″ /><span>Licences</span></button>
<button title=”course-certification-tab” onclick=”openService(event, ‘course-certification’)” class=”tab-layout tablinks3″ /><span>Certification</span></button>
</div>
<div id=”course-description” class=”tabcontent3″ style=”display: block;”><?php the_content(); ?></div>
<div id=”course-audience” class=”tabcontent3″ style=”display: block;”><?php echo get_post_meta(get_the_ID(), ‘Audience’, true); ?></div>
<div id=”course-outcomes” class=”tabcontent3″ style=”display: block;”><?php echo get_post_meta(get_the_ID(), ‘Outcomes’, true); ?></div>
<div id=”course-prerequisites” class=”tabcontent3″ style=”display: block;”><?php echo get_post_meta(get_the_ID(), ‘Prerequisites’, true); ?></div>
<div id=”course-licences” class=”tabcontent3″ style=”display: block;”><?php echo get_post_meta(get_the_ID(), ‘Licences’, true); ?></div>
<div id=”course-certification” class=”tabcontent3″ style=”display: block;”><?php echo get_post_meta(get_the_ID(), ‘Certification’, true); ?></div>
</div>
</div>
</div>
</div>

<?php
/**
* This is a reference from WooCommerce to load simple product data
* Hook: woocommerce_single_product_summary.
*
* @hooked woocommerce_template_single_title – 5
* @hooked woocommerce_template_single_rating – 10
* @hooked woocommerce_template_single_price – 10
* @hooked woocommerce_template_single_excerpt – 20
* @hooked woocommerce_template_single_add_to_cart – 30
* @hooked woocommerce_template_single_meta – 40
* @hooked woocommerce_template_single_sharing – 50
* @hooked WC_Structured_Data::generate_product_data() – 60

do_action( ‘woocommerce_single_product_summary’ );
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_title’, 5 );
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_rating’, 10 );
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 10 );
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 20 );
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_meta’, 40 );
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_sharing’, 50 );

*/
?>

<hr />
<?php
}
?>
Page <?php echo $query->query[‘paged’]; ?> of <?php echo $query->max_num_pages; ?><br />

<div class=”pagination”>

<div class=”nav-previous”><?php next_posts_link( ‘Older posts’, $query->max_num_pages ); ?></div>
<div class=”nav-next”><?php previous_posts_link( ‘Newer posts’ ); ?></div>
<?php
/* example code for using the wp_pagenavi plugin */
if (function_exists(‘wp_pagenavi’))
{
echo “<br />”;
wp_pagenavi( array( ‘query’ => $query ) );
}
?>
</div>
<?php
}
else
{
echo “No Results Found”;
}
?>

Besides the tab does not work on the results page, when we use the ajax price filter, for instance, the tab loses its style, putting the <span> outside the <button>

<button title=”course-outcomes-tab” onclick=”openService(event, ‘course-outcomes’)” class=”tab-layout tablinks3″></button>
<span>Outcomes</span>

Would you have any ideas how to fix it?

Trevor

#253698

Normally, if jQuery/JavaScript is being used to add structure or layout to the results, you must re-apply it after Ajax has finished, like this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    // call your script or function here
  });
}(jQuery));</script>

Anonymous

#253740

Hello Trevor,

thank you for getting back to us. The code wasn’t necessary to fix the tab function. We forced the script along with the loop.

However, we did try using the code above to fix the order changing in the HTML, and it still persists. Here what is happening. The code is:

<button title=”course-outcomes-tab” onclick=”openService(event, ‘course-outcomes’)” class=”tab-layout tablinks″><span>Outcomes</span></button>

On the first results page load, all work fine. But when we apply a price changing, for example, the code returns like this:

<button title=”course-outcomes-tab” onclick=”openService(event, ‘course-outcomes’)” class=”tab-layout tablinks″></button><span>Outcomes</span>

The span goes outside the <button></button>

It is very strange.

Trevor

#253779

I am not seeing the buttons. Having said that, I DO briefly see totally different content with tabs, but it goes. This is what I see:

https://www.screencast.com/t/D3953NXEuPM

I also see a js error in the console, relating to this code:

https://www.screencast.com/t/hRQiFQqkiqP

Which I see is crafted correctly to run with jQuery.

Anonymous

#253801

Trevor , we haven’t found a solution, but we found an alternative way to do what we wanted. Thankyou for your time. Please, you can end this thread.

Have a great weekend.

[Author]

Posts