Jon Imms
asked on
Uncaught ReferenceError: setupblogArticles is not defined
Hello, I am trying to get my ACF Gutenberg post filter to work.
Test page = https://staging-buildertrendcom.temp312.kinsta.cloud/test-blog/
I have a dropdown of post categories, and a search box. The categories are correctly populating the dropdown, but when i select any, the posts below are supposed to filter, but they are not. Also the Search is just spinning.
mv-blog-filter.js
mvp-blog-filter.php
Test page = https://staging-buildertrendcom.temp312.kinsta.cloud/test-blog/
I have a dropdown of post categories, and a search box. The categories are correctly populating the dropdown, but when i select any, the posts below are supposed to filter, but they are not. Also the Search is just spinning.
mv-blog-filter.js
var blogArticleAjax = false;
jQuery(document).ready(setupblogArticles);
function setupBlogArticles(){
jQuery('.mvp-blog-filter').on('change', function(){
var current = jQuery(this);
var tax = current.attr('data-tax');
var value = current.val();
current.parent().addClass('ajax-loader');
jQuery('#s').val('');
if(!value)
value = '';
window.history.replaceState('', '', updateURLParameter(window.location.href, tax, value));
window.history.replaceState('', '', updateURLParameter(window.location.href, 'search', ''));
//filter changes all blog article blocks on page currently
get_blog_posts(jQuery('.mvp-blog-articles'));
jQuery('.mvp-blog-articles').attr('data-load-more', 0);
});
jQuery('.load-more').on('click', function(){
var MVPblogArticlesContainer = jQuery(this).parent().prev();
var count = MVPblogArticlesContainer.data('count');
var loadMoreCount = parseInt(MVPblogArticlesContainer.attr('data-load-more'));
var cat = MVPblogArticlesContainer.attr('data-cat');
var searchTerm = jQuery('#s').val();
var offset = count + (count*loadMoreCount);
jQuery(this).addClass('ajax-loader');
get_blog_posts(MVPblogArticlesContainer, offset, cat, searchTerm);
loadMoreCount++;
MVPblogArticlesContainer.attr('data-load-more', loadMoreCount);
});
jQuery('#blog-search').on('submit', function(){
var searchTerm = jQuery('#s').val();
if(searchTerm == '') return false;
jQuery(this).addClass('ajax-loader');
jQuery(".mvp-blog-filter").each(function(){
jQuery(this).val(jQuery("option:first-child", this).val());
});
jQuery('.mvp-blog-articles').attr('data-load-more', 0);
window.history.replaceState('', '', updateURLParameter(window.location.href, 'category', ''));
window.history.replaceState('', '', updateURLParameter(window.location.href, 'search', searchTerm));
get_blog_posts(jQuery('.mvp-blog-articles'), 0, false, false, searchTerm);
return false;
});
}
function get_blog_posts(MVPblogArticlesContainer, offset = 0, cat = false, searchTerm = false){
if(blogArticleAjax)
return false;
if(!cat)
cat = jQuery('#blog-filter-category').val();
blogArticleAjax = MVPblogArticlesContainer.each(function(){
var articleContainer = jQuery(this);
var count = articleContainer.attr('data-count');
var blockID = articleContainer.parents('.wp-block-mvp-blog-articles').attr('id');
jQuery.ajax({
url:"/wp-admin/admin-ajax.php",
type:'POST',
data:'action=get_blog_posts&cat=' + cat + '&offset=' + offset + '&count=' + count + '&id=' + blockID + '&searchTerm=' + searchTerm,
success:function(results){
articleContainer.attr('data-cat', cat);
if(offset){
if(results)
articleContainer.append(results);
}else{
articleContainer.html(results);
}
jQuery('.load-more, .select-container, #blog-search').removeClass('ajax-loader');
blogArticleAjax = false;
setupVideoModals('body');
}
});
});
}
function updateURLParameter(url, param, paramVal){
var TheAnchor = null;
var newAdditionalURL = "";
var tempArray = url.split("?");
var baseURL = tempArray[0];
var additionalURL = tempArray[1];
var temp = "";
if(additionalURL){
var tmpAnchor = additionalURL.split("#");
var TheParams = tmpAnchor[0];
TheAnchor = tmpAnchor[1];
if(TheAnchor)
additionalURL = TheParams;
tempArray = additionalURL.split("&");
for (var i=0; i<tempArray.length; i++)
{
if(tempArray[i].split('=')[0] != param)
{
newAdditionalURL += temp + tempArray[i];
temp = "&";
}
}
}else{
var tmpAnchor = baseURL.split("#");
var TheParams = tmpAnchor[0];
TheAnchor = tmpAnchor[1];
if(TheParams)
baseURL = TheParams;
}
if(TheAnchor)
paramVal += "#" + TheAnchor;
var rows_txt = temp + "" + param + "=" + paramVal;
return baseURL + "?" + newAdditionalURL + rows_txt;
}
mvp-blog-filter.php
<div class="mvp-blog-filters">
<div class="select-container">
<select id="blog-filter-category" class="mvp-blog-filter" data-tax="category">
<option value="">All Topics</option>
<?php
$terms = get_terms(array('taxonomy' => 'category'));
$url_var = false;
if(isset($_GET['category']))
$url_var = $_GET['category'];
?>
<?php foreach($terms as $term): ?>
<option <?php if($url_var == $term->term_id) echo 'selected'; ?> value="<?php echo $term->term_id; ?>"><?php echo $term->name; ?></option>
<?php endforeach; ?>
</select>
</div>
<form id="blog-search" action="/" method="get">
<ul class="fancy-focus simple-list">
<li>
<input type="text" id="s" name="s" placeholder="Search" value="<?php if(isset($_GET['search'])) echo $_GET['search']; ?>">
<input type="hidden" name="post_type" value="post">
<button class="search">Search</button>
</li>
</ul>
</form>
</div>
for example, $(...).size should be replaced with $(...).length...
it is depriciated as of jQuery 1.8
it is depriciated as of jQuery 1.8
ASKER
I think JQuery migrate was turned off, I am not seeing those errors, except for the setupBlogArticles is not defined.
here is what I see
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
you should fix those ones first to make it work...