AJAX content update

  • Resolved myfitcook

    (@myfitcook)


    4 years, 5 months ago

    Hello,

    First of all not sure if this is the right thread, if not I do apologize for it.

    I’m currently building my website for a food delivery service, here’s the home page : myfitcook.fr

    As you can see on the section there’s 5 days of the week written in french ( Lundi is monday, mardi is tuesday, mercredi is wednesday… )
    Our concept is simple, we propose 2 different menus every day, one normal menu including fish or meat and a vegan menu.
    When you click on another day, it sends the customer to another link with the corresponding menus for that day.

    Now what I need is for the menu to refresh and update when the customer changes the day but without the page reloading and without the customer being sent to another link.
    I would need every menu to be displayable on the main page according to the day of the week they click on ( some sort of display:none function, where the menu appears only when they click on a certain day )

    Here is an example of exactly what i need : https://nestorparis.com/

    On their website you can see that whenever you click on a different day like Lundi, Mardi or Mercredi, the content or the menu changes but the page doesn’t reload and the url doesn’t change.

    I’m using divi theme builder and the menus are linked to woocommerce.

    So I was wondering if there was any way I would be able to refresh different content on my homepage, and if there is how I would have to proceed to achieve it.

    Thanks !

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    You’re right, some sort of display: none technique would be easiest. Output all 10 menus when the page loads. You don’t really need Ajax as long as all 10 menus don’t add up to way too much content at once. They’d all initially have their display property set to “none”. The default first pair for Lundi would have an additional class like “show-menu” or similar which has CSS rules that override the display none for that one pair.

    You then need event listeners for each day of the week button. It’s easier to do this using jQuery. When the click event executes the related callback, script removes the “show-menu” class from any elements that might have currently it, then adds that class to the section that contains the selected day’s menus.

    This is very similar to how “tabbed sections” work. The day buttons would typically be styled to appear like physical tabbed folders in a paper filing system, but it’s just a contrivance. The key concept is event listeners attached to different elements which alter what is shown. You can use tabbed section examples that can be found as guidance towards creating your own solution. One basic example:
    https://www.w3schools.com/howto/howto_js_tabs.asp

    Alternately, find an existing tabbed sections plugin and restyle its “tabs” to appear as individual buttons.

    Thread Starter myfitcook

    (@myfitcook)

    Thanks for the answer !

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘AJAX content update’ is closed to new replies.