Get latest window width for ajax data

Question

I'd like to send a different param value in an ajax request depending on the width of the window to do something different for smaller devices.

However it only gets the window width on page load and is not updated if the window is resized.

What is best way to get the window width after the window has been resized and hook up the resize event to the ajax request?

$('#add-profile-fileupload').fileupload({
    dataType: 'json',
    acceptFileTypes: '/(\.|\/)(gif|jpe?g|png)$/i',
    maxFileSize: '40000000',
    minFileSize: '100',
    url: API_URL,
    formData: {
        'action': ($( window ).width() > 970) ? 'profile_photo' : 'something_else',
    .......

Answer 1

The formData option can be a function that returns the object:

formData: function() {
    return {
        action: ($( window ).width() > 970) ? 'profile_photo' : 'something_else',
        ...
    };
},
...

Answer 2

jquery file upload allows to set "formData" as a function. Use it!

$('#add-profile-fileupload').fileupload({
    dataType: 'json',
    acceptFileTypes: '/(\.|\/)(gif|jpe?g|png)$/i',
    maxFileSize: '40000000',
    minFileSize: '100',
    url: API_URL,
    formData: function(){
        return {
            'action': ($( window ).width() > 970) ? 'profile_photo' : 'something_else'    
        }
    }
    ....
}