0

When I select the category from the dropdown menu, it updates correctly in the input field. Ideally, it should update the recipe filter in recipeIndex.php.

I've tried wrapping the input in a form with method "get" but that still doesn't work.

The HTML is in an HTML widget on the Recipe Index page. The CSS, JavaScript and PHP code are in separate snippets (I used the Woody Snippets Wordpress plugin https://wordpress.org/plugins/insert-php/)

Please help.

HTML

<div class="dropdown_container">
      <div class="dropdown">
        <div class="select">
          <span class="select_span">Select Category</span>
          <i class="fa fa-chevron-down"></i>
        </div>
        <form action="" method="get">  
        <input type="hidden" name="category" id="category">
        </form>
        <ul class="dropdown-menu" id="recipeDropdown">
            <li id="All" name="All" value="All">All</li>
          <li id="Vegan" name="Vegan" value="Vegan">Vegan</li>
          <li id="Vegetarian" name="Vegetarian" value="Vegetarian">Vegetarian</li>
        </ul>
      </div>
   </div> 

CSS

    
.dropdown_container {
  width: 160px;
}

.select {
    width: 160px;
}

/*Styling Selectbox*/
.dropdown {
  width: 160px;
  display: inline-block;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 0 2px rgb(204, 204, 204);
  transition: all .5s ease;
  position: relative;
  font-size: 14px;
  color: #474747;
  height: 100%;
  text-align: left
}
.dropdown .select {
    cursor: pointer;
    display: block;
    padding: 10px;
}
.dropdown .select > i {
    font-size: 13px;
    color: #888;
    cursor: pointer;
    transition: all .3s ease-in-out;
    float: right;
    line-height: 15px
}
.dropdown:hover {
    box-shadow: 0 0 4px rgb(204, 204, 204)
}
.dropdown:active {
    background-color: #f8f8f8
}
.dropdown.active:hover,
.dropdown.active {
    box-shadow: 0 0 4px rgb(204, 204, 204);
    border-radius: 2px 2px 0 0;
    background-color: #f8f8f8
}
.dropdown.active .select > i {
    transform: rotate(-90deg)
}
.dropdown .dropdown-menu {
    width: 100%;
    position: absolute;
    background-color: #fff;
    left: 0;
    margin-top: 1px;
    box-shadow: 0 1px 2px rgb(204, 204, 204);
    border-radius: 0 1px 2px 2px;
    overflow: hidden;
    display: none;
    overflow-y: auto;
    z-index: 9
}
.dropdown .dropdown-menu li {
    transition: all .2s ease-in-out;
    cursor: pointer
} 
.dropdown .dropdown-menu {
    padding: 0;
    list-style: none
}
.dropdown .dropdown-menu li:hover {
    background-color: #f2f2f2
}
.dropdown .dropdown-menu li:active {
    background-color: #e2e2e2
}

JavaScript

var $ = jQuery;

    $('.dropdown').click(function () {
        $(this).attr('tabindex', 1).focus();
        $(this).toggleClass('active');
        $(this).find('.dropdown-menu').slideToggle(300);
    });
    $('.dropdown').focusout(function () {
        $(this).removeClass('active');
        $(this).find('.dropdown-menu').slideUp(300);
    });
    $('.dropdown .dropdown-menu li').click(function () {
        var value = $(this).attr("value");
        $("input[name='category']").val(value);
        $(this).parents('.dropdown').find('span').text($(this).text());
        $(this).parents('.dropdown').find('input').attr('value', $(this).attr('id'));
    });

PHP

// Posts or Portfolio Widget
add_action( 'elementor/query/recipe-index-filter', function( $query ) {
    // Modify the posts query here
    $category =  $_GET['category'];
    $query->set( 'category_name', $category );
} );
5
  • Hi Scarlett, it may be helpful to describe simply exactly what you want to happen. For example, when an item is clicked out of the drop down, the page should immediately reload and show all items from that category? – mozboz Jul 10 '20 at 10:59
  • Hi. Actually, when a category item is clicked from the dropdown, I'd prefer it if that category name was passed to the php file without the page reloading, so the recipe post grid would update with the new updated query and only show recipes from that category. I hope that is clear. – Scarlett Jul 10 '20 at 11:12
  • That makes sense. If you want that to happen without a page reload, then your two options are to use AJAX calls, with e.g. the WP REST API (which allows you to get values from javascript into PHP without the page reloading), or to do something fancy where you load all the content into the page and dynamically show/hide it with javascript or e.g. jQuery according to what happens in the UI. This is an example of that second case; you could replace the category links at the top with a dropdown: bunchconstructioninc.com/projects – mozboz Jul 10 '20 at 11:17
  • I tried with AJAX in Wordpress but it didn't work. My code must've been wrong somewhere, so I'm still at it. – Scarlett Jul 10 '20 at 11:20
  • You might want to simplify the problem by e.g. starting by doing some more simple javascript to get the posts from one category using the WP API, developer.wordpress.org/rest-api/reference/posts/#arguments. Once you can do that and render some posts you get from that, it should be easier to hook this to your dropdown and make the change happen dynamically – mozboz Jul 10 '20 at 11:29
0

If you add handler for action with add_action, you should call this with do_action, but I does not see it. Also actions using in AJAX, simple POST/GET request is not need of

Simple example of form handling

<form method="POST" action="" class="my-form">
    <input type="hidden" name="category" value="" />
    <input type="hidden" name="action" value="recipe_filter" value="123" />
    <input type="submit" />
</form>

// PHP somewhere like functions.php or this page exactly

<?php
if( ($_POST['action'] ?? '') == 'recipe_filter' ){
 $value = empty($POST['category']) ? 'default value for category' : $POST['some'];
}

?>

JS

run $('form.my-form').submit() when dropdown value is changed

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.