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.
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.
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>
Umbraco MVP and .NET Web Developer from Derby (UK) who specialises in building Content Management System (CMS) websites using MVC with Umbraco as a framework. Paul is passionate about web development and programming as a whole. Apart from when he's with his wife and son, if he's not writing code, he's thinking about it or listening to a podcast about it.
In this post I show you how easy Donut Caching is to use in Umbraco and MVC. It's very clever and no…
Read PostThis post shows you how to solve the error 'Multiple types were found that match the controller name…
Read PostIf you need to know the url to get the swagger json file, then this is the post for you.
Read PostThis post shows you how to get set up to start using Visual Studio Live Share for remote pair progra…
Read Post