Pjax not degrading properly on IE9

Question

I'm passing the following url with parameters following this method to programatically call pjax.

var url = '/activity?fromDate='+$('#from-date').val()+'&toDate='+$('#to-date').val();
$.pjax({url: url, container: '#main-body'});

This works perfectly fine on modern browsers, but fails to include any parameters on Internet Explorer 9 and below. The page just navigates to /activity.

Why is that?

Answer 1

Internet Explorer 9 does not support pushState which pjax relies on to work. When the pushState API is unavailable, $.pjax calls the fallbackPjax() function.

The fallback creates a hidden <form> and puts the url you specified in the action field of the form. Any parameters in the action field of the form are ignored.

There are two things that need to be done.

var url = '/activity';
var data = 'fromDate='+$('#from-date').val()+'&toDate='+$('#to-date').val();
$.pjax({url: url, data: data, container: '#main-body', method: 'GET' });

1. You need to specify the method as GET (which the fallback will default as a POST)
2. You need pass your parameters in the data field of options.

The fallback automatically loops through your parameters and creates input fields for each one.