Requirement: Access front-end values in back-end methods


  • Hi Team,

    I just want to add the filter element(select control) on front end by which i want to filter the topic on the basis selected filter element.
    e8907a61-6599-4473-a57a-70b5fb6412d2-image.png
    As you can see i have implemented the select control on my front end with initial loaded topic, which is getting by
    plugins.fireHook('filter:topics.get', { topics: topics, uid: uid }, next);
    and i have added a method which is bind to this hook as you can see in screenshot
    e765e876-352c-47fb-85e5-de0bfe05a27d-image.png
    and this is a custom plugin, i am getting proper data on my initial load but the requirement is that i want to filter my topics whenever i change the select control value from front end.

    I have tried all the possible methods to access the hook from front end so that i can fire re-render process but still not able to achieve. So the problem is that how we can access any type of hook related with firing on changes of front end element.

    I am wondering, Is there any way like ajax request from the front end by which we can re-render the page just by firing the hook ?

    It would be very helpful if you look into this issue in a better manner.

    Regards


  • any suggestions on this guys ?


  • @arc002

    I don't really know, if this will help you, but:

    Bildschirmfoto 2021-04-19 um 15.13.41.png

    If you change e.g sorting inside recent-Page from All Topics to New Topics the page refreshes and the URL turns from

    https://nodebb.development.fail/recent

    to

    https://nodebb.development.fail/recent?filter=new

    Once the page reloads, your hook filter:topics.get should be fired again. But in this case, with the filtering changed via dropdown. You have the get parameter ?filter=new to work with serverside.


    Maybe this is an option for you. You can use your template in combination with javascript to trigger an .change() or .click() -Event on your custom dropdown menu.


    Here is a little snippet.

    $(window).on('action:ajaxify.end', function(data) {
        let currentUrl = $(location).attr('href');
        
        $('div#content').prepend('<a href="#" id="reloadTrigger">This is a example</a>');
        
        $('a#reloadTrigger').click(function(){
            window.location.href = currentUrl + "?filter=true";
        })
       
    });
    

    This prepends a a-Element before content-Div:

    Bildschirmfoto 2021-04-19 um 15.27.38.png

    Once you click on This is a example the url turns from

    https://nodebb.development.fail/ to https://nodebb.development.fail/?filter=true

    And your hook filter:topics.get should be fired again. Now you could work with the GET-Parameter filter=true.


    Hope this helps and inspired you. 🙂

    Cheers

Suggested Topics

| |