CODEWITHSUNDEEP
javascriptjqueryjquery-dirtyforms
Aayush Dahal
Aayush Dahal

Reputation: 1182

jquery dirty form set it clean manually

I am using jquery dirrty plugin to check the state of a form and prevent it from reloading if there are some unsaved changes.

Link to jquery.dirrty github

Flow:

1) I have initialized jquery.dirty as follows

$(function(){
    initializeDirtyForm();
})

/** dirty form initialization*/
function initializeDirtyForm(){
    $("#uAForm").dirrty().on("dirty", function(){
        $("#uAFormSubmit").removeAttr("disabled");
    }).on("clean", function(){
        $("#uAFormSubmit").attr("disabled", "disabled");
    });
}

2) There is a table on the page and when it click on the td cells it make an ajax call.

function ajaxCallEdit()
{
    var result = checkDirtyStatus();
        if(result === false) {
            return;
        }
    $.ajax({
        ....
        ....
        ....
        ....
        success:function(){
           initializeDirtyForm();
        }
    )}
}

/** check if the form is dirty */
function checkDirtyStatus(){
    dirtyStatus = $("#uAForm").dirrty("isDirty");
    if(dirtyStatus == true){
        if (confirm("Changes you made may not be saved. Do you still want to reload?")) {
            return true;
        }else{
            return false;
        }
    }
}

If the form is dirty, it works totally fine and show warning message.

ISSUE

Here is the main issue, if I force it to reload, (this means it won't actually reload page, instead it would make an ajax call) it is still setting the status of the form as dirty. I have tried by re-initializing the jquery form but still the form is flagged as dirty.

To make it extra sure and actually what is the the status of the form, I checked the status and tried to console log on ajaxSuccess.

....

success: function(){
    initializeDirtyForm();
    var result = checkDirtyStatus();
    console.log(result);
}

...

However, consoling this result showing the value as undefined.

I could not find any documentation related to the setting it manually and reinitalizing is not working as intented.

So, if you are javascript wizard could you please check the jquery.dirrty.js file attached above and check if I could trigger following part from the js file or any other hacks that helps me to solve the problem.

setClean: function(){
            this.isDirty = false;
            this.history[0] = this.history[1];
            this.history[1] = "clean";
        }

If you need any further details please let me know.

Upvotes: 1

Views: 1115

Answers (1)

user7116041
user7116041

Reputation: 11

try $("#uAForm").dirrty("setClean");

I just got into needing to do the same thing and that worked for me.

Cheers

Upvotes: 1

Related Questions