Switch between ajax and post back in the same form

Scenario

I have a form which submits via ajax and returns data inside a div on the page.

This works perfectly well. However, one of the requirements was to add an export functionality to the form so the client can export the data to a csv and open it in Excel.

Problem

No big deal right? I’ve written data export code before see my post on exporting data to excel. Well actually there was a slight problem because it was an ajax form it meant the contents of the csv was being loaded into the div inside the form.

Solution

I needed a solution. I realised that I needed to change the mode of the form depending on which button was pressed. So I came up with this bit of javascript/jquery.

//Ajax switching by Paul Seal at MEDIAmaker
 //Licensed under MIT. Free for all uses including commercial

var ajaxSwitching = {
     clickCount: 0,

    submitWithAjax: function (e, control, ajaxOn) {
         if (ajaxSwitching.clickCount == 0) {
             e.preventDefault();
             ajaxSwitching.clickCount++;
             var form = $(control).closest('form');
             $(form).attr("data-ajax", ajaxOn);
             $(control).unbind('click').click();
         }
         else {
             ajaxSwitching.clickCount = 0;
         }
     }
 };

$(document).on('click', '.use-ajax', function (e) {
     ajaxSwitching.submitWithAjax(e, this, true);
 });

$(document).on('click', '.no-ajax', function (e) {
     ajaxSwitching.submitWithAjax(e, this, false);
 });

To use this, link to the script in your page and then you just add the class to the button or link on the page which submits the form.

Like this:

<button class="use-ajax" name="submit">Submit</button>
<button class="no-ajax" name="export">Export</button>