php – Search Ajax Call – Use Form Data in Response

Question

I have an AJAX call and I am worried that I am not using the serialized form data in the response properly so I get the value from ajax filter inputs (i.e.https://prnt.sc/gxrJE9_GocOl) but I am doing it wrong, right?

The original instructions to add ajax filters are here –
https://rudrastyh.com/wordpress/ajax-post-filters.html

My code below:

jQuery(function($){
//ajax call
jQuery('#filter').submit(function(e) {
    e.preventDefault();
    var filter = jQuery('#filter');
    jQuery.ajax({
        url: filter.attr('action'),
        data: filter.serialize(), // form data
        cache: false,
        type: filter.attr('method'),
        beforeSend: function(xhr) {
            filter.find('.btn-filter').text('Filtering...');
            console.log(filter.serialize());
        },
        success: function(data) {
            filter.find('.btn-filter').text('Apply filter');
            var iso = $scroll_container.data('isotope');
            var search_total = jQuery('#search-total');

            //remove initial results infinite scroll and isotope for ajax call
            if (iso) {
             $scroll_container.infiniteScroll('destroy');
             $scroll_container.isotope('destroy');
                $scroll_container.remove(); //completely remove initial results 
                search_total.empty();
            }

            //if ajax infinite scroll and isotope exist already remove so reset 
            //var inf_ajax = $ajax_container.data('infiniteScroll');
            var iso_ajax = $ajax_container.data('isotope');

            if (iso_ajax) {
                $ajax_container.infiniteScroll('destroy');
                $ajax_container.isotope('destroy');
                $ajax_container.empty();
                search_total.empty();
            }


            //create "new" isotope instance
            $ajax_container.isotope({
                layoutMode: 'fitRows',
                itemSelector: '.scroll-post'
            }); //isotope

            var $data = $(data);
            $ajax_container.append($data);
            $ajax_container.isotope('insert', $data);

            var isoajax = $ajax_container.data('isotope');

            //for search as a input
            var s_term = jQuery("input[type="hidden"][name="s"]").val();
            
            //for category as a radio
            var s_cat_term = jQuery("input[type="radio"][name="categoryfilter"]:checked").attr("id");
            //var s_cat_term = s_cat_text.replace(/[()\\\/]/g, '').replace(/\s+/g, '-').toLowerCase();

            //for orderby as select dropdown
            //var s_orderby_text = jQuery("select[name="orderby"]:selected").text(); 
            var s_orderby = jQuery("select[name="orderby"]").val();

            if(s_orderby == undefined) {
             var s_orderby = 'date';
         }

            //for order select dropdown and post type as input
            var s_order = jQuery("input[type="radio"][name="order"]:checked").val();

            if(s_order == undefined) {
             var s_orderby = 'desc';
         }

         var s_post_type = jQuery("input[type="hidden"][name="post_type"]").val();

            //replace search total with ajax search results total
            var ajax_search_total = jQuery('#ajax-search-total').html();
            if(ajax_search_total) {
                search_total.append(ajax_search_total);
            }

          if(ajax_search_total > 9) {
            if (s_post_type == 'font') {
                var inf_path="/fonts/category/" + s_cat_term + '/page/{{#}}/?s=" + s_term + "&orderby=' + s_orderby + '&order=" + s_order;
            } else if (s_post_type == "photo') {
                var inf_path="/photos/category/" + s_cat_term + '/page/{{#}}/?s=" + s_term + "&orderby=' + s_orderby + '&order=" + s_order;
            } else if (s_post_type == "video') {
                var inf_path="/videos/category/" + s_cat_term + '/page/{{#}}/?s=" + s_term + "&orderby=' + s_orderby + '&order=" + s_order;
            } else if (s_post_type == "snipp') {
                var inf_path="/snippets/category/" + s_cat_term + '/page/{{#}}/?s=" + s_term + "&orderby=' + s_orderby + '&order=" + s_order;
            } else if (s_post_type == "post') {
                var inf_path="/blog/category/" + s_cat_term + '/page/{{#}}/?s=" + s_term + "&orderby=' + s_orderby + '&order=" + s_order;
            } else {
                var inf_path = "/page/{{#}}/?s=" + s_term + "&orderby=' + s_orderby + '&order=" + s_order;
            }

            console.log(inf_path);

            //create "new" infinite scroll instance
            $ajax_container.infiniteScroll({
                path: inf_path,
                append: ".scroll-post',
                button: '.btn-scroll',
                outlayer: isoajax,
                loadOnScroll: false,
                //scrollThreshold: 300,
                checkLastPage: true,
                history: false, //disrupts ajax call category options so set false
                status: '.page-load-status',
                //hideNav: '.pagination',
                debug: true
            }); //infinitescroll 

            jQuery('.btn-scroll').on('click', function() {
                $ajax_container.on('load.infiniteScroll', function(event) {
                    $ajax_container.isotope('layout');
                    jQuery('.page-load-status').detach().appendTo(jQuery('#ajax_container'));
                }); //on load function
            }); // on click function 
        } //ajax search total greater than 9
        //reset ajax filter fields breaks pagination                             
        //filter[0].reset();  
        } // success
    }); //ajax call
}); //submit function
});

//Bind click event listener to the submit button
jQuery(document).on('click', 'button[type="submit"]', function() {
    jQuery(this).parents('form').submit();
}); 

0
jessk4code 10 months 2022-08-13T15:39:14-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse