CODEWITHSUNDEEP
javascriptbackbone.jsquery-string
NehaN
NehaN

Reputation: 164

Passing unescaped querystring in BackboneJS

I am trying to pass a querystring based on different selections from 4 drop down lists. I am passing the querystring by a variable but it is being escaped and thus the result is 404 Error.

Here is the code that I am writing for making the querystring...

      function setQueryString(product,brand,demographic,region)
     {
      product =  dropdownlists.get('Product');
      brand = dropdownlists.get('Brand');
      demographic = dropdownlists.get('Demographic');
      region = dropdownlists.get('Region');
      if(product !=='' && brand !=='' && demographic !=='' && region !=='')
        {
           queryString = 'product='+product+'&'+'brand='+brand+'&'+'demographic='+demographic+'&'+'region='+region ;
           return queryString;
        }
      else{console.log('nevermind!!');}
     }

There is a view function updating the DataModel model with selected values every time user makes a selection.Based on these selections we get (colorscale) data from the server. 

    var DataModel = Backbone.Model.extend({
              urlRoot : '/api/web/',
              idAttribute: 'value',
              defaults : {
                 Product : '',
                 Brand : '',
                 Demographic : '',
                 Region : ''
             }
      });
    var dropdownlists = new DataModel();



    var colorscalelist = new ColorScaleModel({value: setQueryString()});
         colorscalelist.fetch({success: function(){
         console.log(colorscalelist);
        }
      });

And the Colorscale Model is:

    var ColorScaleModel = Backbone.Model.extend({
    urlRoot : '/api/web/colorscale',
    idAttribute: 'value',
    defaults : {
            DPRBID: " ",
            F: "",
            BR1: " ",
            BR2: " ",
            BR3: " ",
            UN: " ",
            C: " ",
            T: " "
      }
        });

The URL that is being passed is converted to ASCII characters. Is there any way to pass it directly, unescaped. Or, is there any other way to approach this problem of sending the data. Its my first project of BackboneJS and any help would be great. Thank You.

Upvotes: 1

Views: 458

Answers (2)

nikoshr
nikoshr

Reputation: 33344

Ajax operations in Backbone are ultimately delegated to jQuery and as such accept options that will modify the request. To add request parameters, you can pass a data parameter that will be transmitted as a query string.

For example, 

var ColorScaleModel = Backbone.Model.extend({
    url : '/api/web/colorscale',

    defaults : {
    }
});

var dropdownlists = new DataModel({
    Product : 'P1',
    Brand : 'B1',
    Demographic : 'D1',
    Region : 'R1'
});

var colorscalelist = new ColorScaleModel();
colorscalelist.fetch({
   data: dropdownlists.toJSON() 
});

will result in a request to /api/web/colorscale?Brand=B1&Demographic=D1&Product=P1&Region=R1

See http://jsfiddle.net/nikoshr/wufbL/ for a demo

You could take this a step further and incorporate the filters in your model by overriding model.fetch. For example:

var ColorScaleModel = Backbone.Model.extend({
    url : '/api/web/colorscale',

    defaults : {
    },

    initialize: function(attrs, opts) {
        this.filters = opts.filters;
    },

    fetch: function(opts) {
        opts = opts || {};
        opts.data = this.filters.toJSON();

        return Backbone.Model.prototype.fetch.call(this, opts);
    }
});

var dropdownlists  = new DataModel();
var m = new ColorScaleModel({}, {filters: dropdownlists});
m.fetch();

f.set({Product: "P1", Brand: "B1"});
m.fetch();

And a Fiddle to play with http://jsfiddle.net/nikoshr/wufbL/1/

Upvotes: 1

obecker
obecker

Reputation: 2377

Instead of a string your function setQueryString() should return a query object. So instead of

queryString = 'product='+product+'&'+'brand='+brand+'&'+'demographic='+demographic+'&'+'region='+region

you should return

{
    product: product,
    brand: brand,
    demographic: demographic,
    region: region
}

Then, in the fetch call pass this object as the data parameter. Something like

colorscalelist.fetch({ data: getQuery(), success: function() { ... } });

(getQuery() returns the above object, seems to me to be a better name than setQueryString() ...)

The fetch function will then serialize your query object into a query string and perform all necessary escaping.

Upvotes: 0

Related Questions