Optional parameters in Sammy.js

Question

Optional parameters in Sammy.js

Utilizing ajax for paging has led me to choose Sammy.js, which works well. However, incorporating checkboxes to filter results poses a challenge. While defining a route for Sammy to intercept is feasible, the issue arises when I wish to avoid displaying certain filters (parameters) in the URL if they are not checked. Unfortunately, Sammy does not offer support for optional parameters.

    var samm = $.sammy(function () {

        this.defaultCheckFormSubmission = this._checkFormSubmission;
        this._checkFormSubmission = function (form) {
            var $form, path, verb;
            $form = $(form);
            path = $form.attr("action");
            verb = this._getFormVerb($form);
            var index = path.indexOf("#");
            if (verb === "get" && path.indexOf("#") == -1) {
                return true;
            }
            else {
                return this.defaultCheckFormSubmission(form);
            }
        };
        this.get('#/Page=:page', function (context) {

            alert("sammy");
        });
    });
    samm.run('#');

I'm looking to prevent my URLs from appearing as www.something.com#/Page=5%Filter1=0?Filter2=0?Filter3=0?Filter4=1...........

javascript jquery

Answer 1

Answer №1

To avoid Sammy handling extra filters, such as unchecked checkbox values, simply exclude them from your route. Instead, retrieve parameters from controls using jQuery and make the ajax request accordingly. For example:

this.get('#/Page=:page', function (context) {
        var page = this.params['page'];
        var filter1 = $("#chkFilter1").is(':checked');
        var filter2 = $("#chkFilter2").is(':checked');
        var filter3 = $("#chkFilter3").is(':checked');
        //etc..
        //perform necessary actions here
    });

If you require a different URL structure for deep linking or Google tracking, and are aware of the maximum number of variables needed, plan out your routes accordingly. Arrange the most variables first to prevent incorrect URL matching by Sammy. Here's an example demonstrating how to display only checked values in the URL while still accessing unchecked values via jQuery:

   this.get('#/Page=:page%filter1=:filter1?filter2=:filter2?filter3=:filter3', function (context) {
        var page = this.params['page'];
        var filter1 = this.params['filter1'];
        var filter2 = this.params['filter2'];
        var filter3 = this.params['filter3'];
    });
    this.get('#/Page=:page%filter1=:filter1?filter2=:filter', function (context) {
        var page = this.params['page'];
        var filter1 = this.params['filter1'];
        var filter2 = this.params['filter2'];
        var filter3 = $("#chkFilter1").is(':checked');
    });
    this.get('#/Page=:page%filter1=:filter1', function (context) {
        var page = this.params['page'];
        var filter1 = this.params['filter1'];
        var filter2 = $("#chkFilter1").is(':checked');
        var filter3 = $("#chkFilter2").is(':checked');
    });

Alternatively, consider abandoning querystring variables and opting for a URL structure like www.something.com#/5/0/1/0/1. This would be implemented as follows:

   this.get('#/:page/:filter1/:filter2/:filter3/:filter4', function (context) {
        var page = this.params['page'];
        var filter1 = this.params['filter1'];
        var filter2 = this.params['filter2'];
        var filter3 = this.params['filter3'];
        var filter4 = this.params['filter4'];
    });

If dealing with unknown potential variables, a more dynamic approach is required, as detailed in this sammyjs optional parameters explanation.

Answer 2

To avoid Sammy handling extra filters, such as unchecked checkbox values, simply exclude them from your route. Instead, retrieve parameters from controls using jQuery and make the ajax request accordingly. For example:

this.get('#/Page=:page', function (context) {
        var page = this.params['page'];
        var filter1 = $("#chkFilter1").is(':checked');
        var filter2 = $("#chkFilter2").is(':checked');
        var filter3 = $("#chkFilter3").is(':checked');
        //etc..
        //perform necessary actions here
    });

If you require a different URL structure for deep linking or Google tracking, and are aware of the maximum number of variables needed, plan out your routes accordingly. Arrange the most variables first to prevent incorrect URL matching by Sammy. Here's an example demonstrating how to display only checked values in the URL while still accessing unchecked values via jQuery:

   this.get('#/Page=:page%filter1=:filter1?filter2=:filter2?filter3=:filter3', function (context) {
        var page = this.params['page'];
        var filter1 = this.params['filter1'];
        var filter2 = this.params['filter2'];
        var filter3 = this.params['filter3'];
    });
    this.get('#/Page=:page%filter1=:filter1?filter2=:filter', function (context) {
        var page = this.params['page'];
        var filter1 = this.params['filter1'];
        var filter2 = this.params['filter2'];
        var filter3 = $("#chkFilter1").is(':checked');
    });
    this.get('#/Page=:page%filter1=:filter1', function (context) {
        var page = this.params['page'];
        var filter1 = this.params['filter1'];
        var filter2 = $("#chkFilter1").is(':checked');
        var filter3 = $("#chkFilter2").is(':checked');
    });

Alternatively, consider abandoning querystring variables and opting for a URL structure like www.something.com#/5/0/1/0/1. This would be implemented as follows:

   this.get('#/:page/:filter1/:filter2/:filter3/:filter4', function (context) {
        var page = this.params['page'];
        var filter1 = this.params['filter1'];
        var filter2 = this.params['filter2'];
        var filter3 = this.params['filter3'];
        var filter4 = this.params['filter4'];
    });

If dealing with unknown potential variables, a more dynamic approach is required, as detailed in this sammyjs optional parameters explanation.

Optional parameters in Sammy.js

Answer №1

Similar questions

The bidirectional data binding feature is malfunctioning following an XMLHttpRequest request

ObjectArray in Node.js

Sending data from TextBox as json format

Tips for creating a typescript typeguard function for function types

A step-by-step guide to implementing lodash once in Vuejs

Drupal 7 FlexSlider - alignment issue with image placement

Ways to display a div when a drop-down box is clicked

JavaScript can be used to arrange a table in both ascending and descending order by simply clicking on the header

How to mute a particular warning in development mode with Next.js

Top method for efficiently inserting multiple rows into a database from an HTML table using AJAX

Is there a way to extract the query string from a file in order to query the database using ExpressJS?

Jquery and CSS3 come together in the immersive 3D exhibit chamber

Safari on iOS 11.4 ignoring the 'touch-action: manipulation' property

How to disable the onChange event in PrimeNG p-dropdown?

JavaScript, XML, and PHP all support the use of HTML entities within their code

What is the best way to deactivate certain JavaScript functions on my webpage when accessed through a mobile device?

What is the process of matching a server response with the appropriate pending AJAX query?

Encountering issues with the transmission and retrieval of ajax data in Struts 2 framework

Efficiently sending a cookie with an Axios POST Request

Angular JS Profile Grid: Discover the power of Angular JS