Link to home
Start Free TrialLog in
Avatar of Jon Imms
Jon ImmsFlag for United States of America

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
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;
    
}

Open in new window


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>

Open in new window



Avatar of HainKurt
HainKurt
Flag of Canada image

you have lots of errors...
you should fix those ones first to make it work...
User generated image
for example, $(...).size should be replaced with $(...).length...
it is depriciated as of jQuery 1.8 
Avatar of Jon Imms

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
User generated image
ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial