.NET Tips and Tricks

Blog archive

Flagging a Page as Dirty with jQuery

In the bad old days of desktop applications, every form object in the world had a Dirty property that let you easily check to see if the user had made any changes to the data on the form. It's almost as easy with client-side code running in the Web browser, provided you use jQuery. This line finds every input tag and ties the tag's change event to a JavaScript function called flagChanges:

$("input").change(function () 
            {
              flagChanges();
            });

That will catch your textboxes, checkboxes, and any other input item defined with an input element. If you also want to catch changes in other elements, you can selectively add additional jQuery statements. This statement will catch changes made from dropdown lists (defined with select elements):

$("select").change(function () 
            {
              flagChanges();
            });

You can do what you want in your flagChanges function, but here's a version that shoves some bolded text inside another element with an id of ChangeTextDiv (based on the name, probably a div element):

function flagChanges() 
{
  $("#ChangeLabelDiv").html("<b>unsaved changes in page</b>");
}

You'll need to remember to clear that element whenever you let the user save their changes. That's what this line of jQuery does:

$("#ChangeLabelDiv").html("<br/>");

Posted by Peter Vogel on 07/07/2015 at 11:19 AM


comments powered by Disqus

Featured

  • Microsoft's Tools to Fight Solorigate Attack Are Now Open Source

    Microsoft open sourced homegrown tools it used to check its systems for code related to the recent massive breach of supply chains that the company has named Solorigate.

  • Microsoft's Lander on Blazor Desktop: 'I Don't See a Grand Unified App Model in the Future'

    For all of the talk of unifying the disparate ecosystem of Microsoft-centric developer tooling -- using one framework for apps of all types on all platforms -- Blazor Desktop is not the answer. There isn't one.

  • Firm Automates Legacy Web Forms-to-ASP.NET Core Conversions

    Migration technology uses the Angular web framework and Progress Kendo UI user interface elements to convert ASP.NET Web Forms client code to HTML and CSS, with application business logic converted automatically to ASP.NET Core.

  • New TypeScript 4.2 Tweaks Include Project Explainer

    Microsoft shipped TypeScript 4.2 -- the regular quarterly update to the open source programming language that improves JavaScript with static types -- with a host of tweaks including a way to explain why files are included in a project.

Upcoming Events