We use cookies to improve your experience. No personal information is gathered and we don't serve ads. Cookies Policy.

ExpressionEngine Logo ExpressionEngine
Features Pricing Support Find A Developer
Partners Upgrades
Blog Add-Ons Learn
Docs Forums University
Log In or Sign Up
Log In Sign Up
ExpressionEngine Logo
Features Pro new Support Find A Developer
Partners Upgrades
Blog Add-Ons Learn
Docs Forums University Blog
  • Home
  • Forums

Sort Grid fieldtype Entries in Multiple Ways - JavaScript?

Development and Programming

KCEE716's avatar
KCEE716
4 posts
one month ago
KCEE716's avatar KCEE716

Hi, novice programmer. I have a list of people as entries on a Grid fieldtype. Currently, they are being called into the template partial like so:

{staff_grid}
    {staff_grid:photo}
    {staff_grid:name}

etc., etc. This is not exact code, just examples for clarity. I used the W3Schools method to create filter buttons so that All entries can be viewed as well as 4 additional filtered views using a field of the Grid and an onclick=”thisFunction()” on the buttons. However, currently all 5 views list the Grid entries in ascending alphabetical order/the order of the entries on the CMS-side.

For one specific filter view, denoted by a <button> with id=”Executive”, the entries need to be listed in descending order instead. I have had ideas but they’ve either not worked or I’m not sure how to actually write them out in code.

  1. An if statement right before {staff_grid} that checks for the button #Executive having class=”active” (part of the W3 filter method) to add “sort=”desc”” parameter to staff_grid, but I don’t know how to actually write the if statement because I don’t believe you can use CSS selectors and I’m not sure how to tell it to check the class in that way.

  2. Probably the more correct answer, a JavaScript function. However, this is what I’ve been trying that has not worked:

function resortSelection() {
 document.getElementById("gridfield").i n n e r H T M L = "{staff_grid sort="desc"}";
}

and further down in the code

<button id="Executive" >Executive</button>

and

(carat)p id="gridfield"(carat) {staff_grid} (carat)/p(carat)

So in theory, the idea behind it is for resortSelection to, upon the button being clicked, replace {staff_grid} with {staff_grid sort="desc"} but that isn’t working. Nothing happens, and in fact it breaks the ability to filter with the buttons at all. So I assume it has something to do with the EE {} syntax but I don’t know how to address that. My debugger is telling me of all things that a ; is missing from the “desc” part of the function, is it correct or is it misreading something?

Apologies if my code-brain is so bad it hurts your soul, and thanks in advance for any help!

       
Rob Allen's avatar
Rob Allen
3,014 posts
one month ago
Rob Allen's avatar Rob Allen

Have you looked at something like https://isotope.metafizzy.co/

       
KCEE716's avatar
KCEE716
4 posts
one month ago
KCEE716's avatar KCEE716

I haven’t - I was really hoping for something already built into the language without additional installations. Using the least amount of my time as possible is also at play here.

       
monsterbusiness's avatar
monsterbusiness
2 posts
one month ago
monsterbusiness's avatar monsterbusiness

I appreciate you informing me about this. What you wrote on your site is fantastic.

       
alreadymud's avatar
alreadymud
1 posts
one month ago
alreadymud's avatar alreadymud

It is essential to guarantee that your NodeBB and database servers have adequate levels of protection. Keep in mind the following things: Redis, by default, listens to all interfaces, which is a particularly risky behavior for a server that is accessible to the general public. Some distributions install Redis with a configuration that is more limited than the default. Some suggestions: If you want to limit access to just the local computer, set the bind address variable to 127.0.0.1.

       

Reply

Sign In To Reply

ExpressionEngine Home Features Pro Contact Version Support
Learn Docs University Forums
Resources Support Add-Ons Partners Blog
Privacy Terms Trademark Use License

Packet Tide owns and develops ExpressionEngine. © Packet Tide, All Rights Reserved.