Question

I’m using BackboneJS, I have a got a collection which gets its data from an oData enabled WebAPI. While fetching the data, I pass in some extra parameters using oData $filter.

It looks a bit like this:

collection.fetch({
   data: $.param({ '$filter': 'Filter1 eq ' + filter.get('filter1') + 
                   ' and Filter2 eq ' + filter.get('filter2') }),
   //some more stuff...
})

I’m basically running through a wizard and building up this filter model along the way. Every value that comes out of this filter model is either a string value or an empty string. I have overridden the get method on the filter model to ensure that I get the right values out of it. Note that I add single quotes around the string value if it is not empty, if it is empty, I return a string value containing the word ‘null’.

var Filter = Backbone.Model.extend({        
    get: function (attributes, options) {
        var value = Backbone.Model.prototype.get.call(this, attributes, options);
        if (value == '') return 'null';
        else return "'" + value + "'";
    }
});

Say my model looks like this:

{filter1: 'filter1', filter2: 'filter2'}

Now if I fetch the collection in Chrome and Firefox, the request that is generated would look something like this:

replacedapiurl?%24filter=Filter1+eq+%27filter1%27+and+Filter2+eq+%27filter2%27

Which is perfectly fine and it works great in both Firefox and Chrome. The problem I am having is that in IE10 this does not work. For some reason the request that is generated looks like this:

replacedapiurl?%24filter=Filter1+eq+'+filter1+'+and+Filter1+eq+'+filter1+'

When I set it to IE9 mode, it does the same. When I set it to IE8 mode, it suddenly starts working.

Now I have tried using EncodeURI(), EncodeURIComponent(), escape() and adding ‘\’ in front of the single quotes, both inside my overridden get method and inside the $.param bit. But nothing works. Adding the ‘\’ does nothing, and all encoding does is encode the added ‘+’ sign like this:

replacedapiurl?%24filter=Filter1+eq+'%2520filter1%2520'+and+Filter1+eq+'%2520filter1%2520'

Which is also not what I am after.

Does anyone know why this is happening? Why is there a difference between IE browser versions with this behaviour? And how do I fix it? I need my single quotes converted to ‘%27’, preferably without having to write any browser specific code.

Edit: I just got someone to check things on IE9 and that works fine, so it is only when using IE10 -and when using IE10 in IE9 mode- that it doesn’t work.

Answer 1

OK, I thought this was beyond me, but in the end it wasn’t and I fixed it myself. Just in case it might help anyone in the future, I’ll explain why this was happening to me.

The values in the filter object come out of a ‘select’, the ‘select’ is inside a backbone view, and the select is populated with a number of ‘option’ views. For some reason I had a template set up for my option view like so:

<script type="text/template" id="option-template">
<%=value%>
</script>

The line breaks in the HTML above made it so that the ‘option’ was rendered inside the ‘select’ with an extra space added on both sides of the value. Now the difference between all the other browsers I tried and IE10 seems to be that in IE10 those spaces in my option view do not get trimmed by jQuery’s val(), while in all the other browsers, they do get trimmed when reading the value of a ‘select’ with val(). This resulted in the extra space being turned into a ‘+’ sign on both sides of the value, like all the other spaces in the URL, and that was the problem! The single quote in itself does not need to be converted into %27, it should work either way, something I picked up from the answer on this question.

I would not have had a problem had I written the template in one line like this:

<script type="text/template" id="option-template"><%=value%></script>

Anyway, I just got rid of the template all together and changed my option view to this:

var optionView = Backbone.View.extend({
    tagName: "option",
    render: function () {
        this.$el.html(this.model.get('value'));
    }
});

And that fixed everything, no extra spaces around the options any more.

I guess the lesson learned is that IE10 does not get rid of spaces around a value when you read a select box value with jQuery like so:

var value = $('#id').val();

In any other browser, if the option has spaces around it like ‘ value ‘, they will automatically be trimmed and value will be ‘value’, in IE10, this is not the case, and value will be ‘ value ‘.