Tips for sorting items in Wordpress with JavaScript / on click?

I am currently utilizing a method similar to the one outlined in this resource from w3 schools for filtering elements within divs. However, I am facing challenges when attempting to integrate this script into my Aurora Wordpress site due to the removal of the onclick() function. Does anyone know of a workaround that would allow me to filter elements without relying on this function or bypassing the blocking issue? I have explored using shortcodes as potential solutions, but most examples I found were based on href links rather than input buttons (or preferably a drop-down select feature in the future), and my efforts to implement them have been unsuccessful. Here is a brief example of how it is used (the complete JS code is available on the link mentioned at the beginning of this question).

<input type="radio" onclick="filterSelection('all')" name="category" checked>Show all<br>
<input type="radio" onclick="filterSelection('1')" name="category"> Option 1
<input type="radio" onclick="filterSelection('2')" name="category"> Option 2

and so forth

javascripthtmlcsswordpress

Answer №1

              <button class="button" data-filter=".<?php echo $term_tech->slug; ?>"><?php echo $term_tech->name; ?>(<?php echo $term_tech->count; ?>)</button>
             <?php

      $port = array(

      'posts_per_page'   => -1,

      'orderby' => 'menu_order',

      'order' => 'ASC',

      'post_type' => 'portfolio',

      'post_status' => 'publish'

      );







      $portfolioget = get_posts($port);



      foreach ($portfolioget as $portfoliopost){



       echo '<div class="element-item '.implode(" ",get_video_temrs($portfoliopost->ID)).'" data-category="transition">';
      .......code.........
          <script type="text/javascript">

jQuery(window).on('load',function ($) {

    jQuery("img.lazy").lazyload({

    effect : "fadeIn",
    effectspeed: 2000

}); 


    var $grid = jQuery('.grid').isotope({

        itemSelector: '.element-item',

        layoutMode: 'fitRows',

        getSortData: {

            name: '.name',

            symbol: '.symbol',

            number: '.number parseInt',

            category: '[data-category]',

            weight: function (itemElem) {

                var weight = jQuery(itemElem).find('.weight').text();

                return parseFloat(weight.replace(/[\(\)]/g, ''));

            }

        }

    });

    var filterFns = {

        // show if number is greater than 50

        numberGreaterThan50: function () {

            var number = jQuery(this).find('.number').text();

            return parseInt(number, 10) > 50;

        },

        // show if name ends with -ium

        ium: function () {

            var name = jQuery(this).find('.name').text();

            return name.match(/ium$/);

        }

    };

    jQuery('#filters').on('click', 'button', function () {

        var filterValue = jQuery(this).attr('data-filter');

        filterValue = filterFns[ filterValue ] || filterValue;

        $grid.isotope({filter: filterValue});

    });

    jQuery('#filters_industries').on('click', 'button', function () {

        var filterValue = jQuery(this).attr('data-filter');

        filterValue = filterFns[ filterValue ] || filterValue;

        $grid.isotope({filter: filterValue});

    });

    jQuery('#sorts').on('click', 'button', function () {

        var sortByValue = jQuery(this).attr('data-sort-by');

        $grid.isotope({sortBy: sortByValue});

    });

    jQuery('.button-group').each(function (i, buttonGroup) {

        var $buttonGroup = jQuery(buttonGroup);

        $buttonGroup.on('click', 'button', function () {

            $buttonGroup.find('.is-checked').removeClass('is-checked');

            jQuery(this).addClass('is-checked');

        });

    });


});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to optimize Typescript compiler to avoid checking full classes and improve performance?

After experiencing slow Typescript compilation times, I decided to utilize generateTrace from https://github.com/microsoft/TypeScript/pull/40063 The trace revealed that a significant amount of time was spent comparing intricate classes with their subclass ...

javascriptnode.jstypescripttsconfigtypescript-compiler-api

Conflicting styles occur when trying to align images using both TailwindCSS and CKEditor 5

My current project involves using Laravel 10 with Vite as the asset builder and Tailwind for CSS. The app.css file contains the following code: @tailwind base; @tailwind components; @tailwind utilities; I am currently implementing a text editing feature u ...

cssckeditortailwind-cssckeditor5laravel-10

Refreshing a React page will lead to props being empty

The situation I am facing is that the code appears to be correct, but for some reason, when the web page loads, this.props.items does not seem to be passed to Item. Strangely, when I attempt to display this.props.items in console.log, nothing shows up. How ...

javascriptreactjs

A Guide to Importing CSV Data Into a Datatable

Is there a way to efficiently import data from a CSV file and display it in a table using the datatables plugin? Currently, I have a fixed table structure: <table id="myTable" class="table table-striped" > <thead> ...

javascripthtmljquerydatatables

Extracting the title from the content is a necessary step in content

Is there a way to display the Title of a post separately from its content in PHP/WordPress? Currently, my code is displaying both the Title and content using "the_content" function. I would like to know how to separate the Title from the content. This is ...

phpwordpress

Is Angular 4 failing to set headers properly or is Express.js searching in the wrong place?

When interacting with an Express.js API, I encountered a issue regarding the handling of auth tokens. The problem arose when sending the token in the request headers using Angular 4 compared to Postman. In Postman, setting the header named 'Authorizat ...

javascriptangulartypescriptexpresshttp-headers

I'm trying to figure out the best way to successfully pass a prop to another component in TypeScript without running into the frustrating issue of not being able to

I have been facing an issue while trying to pass a prop from a custom object I have defined. The structure of the object is as follows: export type CustomObjectType = { data?: DataObject }; export type DataObject = { id: number; name: stri ...

javascripttypescriptmaterial-ui

"Effortlessly emptying the text field with material-ui in React

I need assistance with clearing the content of two text fields and a button using Material-UI in React-JS. I am new to React and unsure how to achieve this. Below is the code I currently have: import React from 'react'; import RaisedButton from ...

javascriptreactjsmaterial-ui

Tips for looping through multiple states within a single table

I need help with combining data from two different states, campaigns and stats, into a single table. The campaigns state includes sr no, campaign id, campaign name, and campaign status, while the stats state includes reach, sent, delivered, views, clicks ...

javascriptarraysreactjsobject

The showposts and posts_per_page parameters are both failing to function properly on the main page of my

The homepage is looking great with things coming along nicely. However, the home page should only display one post from each designated category, but it's showing more than that. I've tried using showposts and posts_per_page, but without any su ...

phpwordpress

What is the process for initiating a state transition?

I have created two separate components. One component uses v-navigation-drawer, while the other component contains a button that toggles the state of the v-navigation-drawer using vuex. On smaller screens, when clicking on the gray area to close the navig ...

javascriptvue.js

The form action seems to be unresponsive when utilized within a vue-bootstrap form

I'm utilizing a form submission service called formsubmit.co, which allows forms to receive input data via email without the need to develop a backend for storing and transmitting data. Formsubmit handles all the storage and sending processes. Accordi ...

javascriptformsvue.jsbootstrap-4form-submit

Troubles encountered while processing STL file readers

Utilizing STLLoader.js, I am able to render components successfully, however, they all appear with one uniform color which does not resemble real-world components. The image above showcases my implementation in Three.js using STLLoader.js (Binary STL file ...

javascriptthree.jsstepstl-format

Creating Dynamic Website Titles with PHP and HTML

I am currently teaching myself web development and using the W3 validator to check my code. I have a document that loads like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Conten ...

phphtmltitlehead

Display one div and conceal all others

Currently, I am implementing a toggle effect using fadeIn and fadeOut methods upon clicking a button. The JavaScript function I have created for this purpose is as follows: function showHide(divId){ if (document.getElementById(divID).style.display == ...

javascriptajaxhtmlcss

Tips for aligning an image vertically

I'm struggling to vertically align an image within a div, no matter what I try it just won't cooperate. The goal is to center it within a material design lite cell. Take a look at my code: CodePen HTML: <div class="mdl-grid"> <div ...

htmlcssmaterial-design-lite

The main attribute in the NPM package.json is missing or has no appropriate entry

I'm really struggling to figure out the best approach for setting up my package.json file. I have a JavaScript module that contains multiple reusable JS files, let's call it Module1. In Module1's package.json, the name attribute is set to " ...

javascriptnpm

CSS styling on top points gets lost when scrolling

My screen displays an image with bubbles scattered randomly, each positioned using CSS styles for top and left. Strangely, when I scroll, all the bubbles lose their top style and reposition themselves to the bottom of the image. If anyone has insight into ...

cssscroll

Teach Google Bot how to recognize AJAX content

I'm facing a major issue while developing a website for someone else. The problem lies in the modals that are supposed to open when a user clicks on a product. My goal is to ensure that Google Bot recognizes these modals as individual pages. When a mo ...

javascriptphpajaxmodal-dialogseo

Add the file retrieved from Firestore to an array using JavaScript

Trying to push an array retrieved from firestore, but encountering issues where the array appears undefined. Here is the code snippet in question: const temp = []; const reference = firestore.collection("users").doc(user?.uid); firestore .collec ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js