Dynamic Added HTML Validation

[GeorgeNarcis]

Hi,

I'm facing a problem, and I'm not sure if it's related with the plugin or not. In some of my pages I inject dynamic HTML which is not present in the initial load of the page. If I mark with dirty flag some of the elements from the dynamic added html the plugin works as expected when I follow redirect pages from within my page, the dirtyforms dialog is displayed. But if I press F5 or back button nothing happens and the page is reloaded, the dialog is not displayed.

This seems to happen only with html that was not present in the inital load, and I'm not sure if it is a plugin or browser problem. Thanks !

[NightOwl888]

Thanks for the report.

When the JS dialog is displayed and you press F5 or the back button, the expected result is the page will reload without showing the browser dialog, this is by design. The assumption is that the user saw the dialog and is deciding to navigate elsewhere, and therefore does not need a second prompt.

When a hyperlink is clicked and you don't cancel the event (or return false) in JavaScript, the hyperlink has an href, and doesn't have target=_blank, the assumption is that the link is leaving/reloading the page. If this is not the case, you can use the ignoreClass either on the hyperlink directly, or if using version 1.2 you can put the ignoreClass on one of its parent containers to make Dirty Forms ignore everything in the container. If you don't ignore or cancel the click, the browser's beforeunload event will be detached, and after that point if the user chooses to decide to go elsewhere they won't be prompted.

BTW - Would you be interested in beta testing v2? I should have a pre-release ready within a few days.

Highlights

1. New dirty state management model - if the user undoes their edits, the form will be considered clean automatically.
2. The default dialog is the browser dialog, not Facebox.
3. Pre-built dialog modules for BlockUI, Bootstrap Modal, Facebox, jQuery UI, and PNotify (each of these modules will be compatible with version >=1.0 of Dirty Forms).
4. Simpler to add your own dialog.
5. Customizable event binding (useful for usage with IFrames).
6. More consistent (and shorter) method and event naming.

You can preview it here, although I am currently in the process of making (even more) breaking API changes that are not present there yet.

Although I have been testing pretty extensively, I just need some people to run it through its paces in real-world scenarios and help to identify bugs and shortcomings.

[GeorgeNarcis]

My problem in the described case is that neither of the custom dialog or browser dialog is displayed, even though the form is marked as dirty. In that case if you press f5 or go back the changes are lost with no waning message.

Regarding v2 that sounds very promising, but as I mentioned the app i'm working is very big and I invested a lot of time in integrating this plugin and customizations for different widgets to mark / unmark as dirty. If this version will not break v1 maybe I'll give it a shot, but if I have to redo all the changes I'm afraid that is not an option for me at this point.

[NightOwl888]

Are you injecting a form, or just some fields into a form?

If you are injecting a form, you will need to call $('form#whateverid').dirtyForms(); on it in order for it to be listened to. If you are injecting input controls into a form that is already being listened to, then this might be a bug.

Regarding v2, unfortunately, there are several breaking changes both to the API and the behavior. The most notable being that there is no longer a "setDirty" method (since setting something dirty would automatically be "corrected" when the user interacts with the element), many of the event names have changed, and the default dirty class has been changed from "ignoredirty" to "dirtyignore" to be consistent with the rest of the names (prefix "dirty" rather than suffix). The API of the dialog class has been changed as well so it is not typically necessary to reference anything outside of the new "open()" method (the new "fire"). But if it is any consolation, there is now a drop-in Bootstrap module that you can override the IDs/classes with external HTML of the relevant pieces and it will bind up the events and (optionally) automatically inject the configured text.

[GeorgeNarcis]

Yes, the form exists in the page from the beginning, it is marked with the dirtylisten class and even with dirty when i call setDirty.

Regarding the removal of setDirty method, i've used it intensively, I have custom widgets where you can select/ deselect things (add/remove a class) which I want to be part of the dirty forms validation, or i have other pages with custom file uploader so if user uploads/deletes files i mark form as dirty programatically, I still think this mechanism is needed for custom widgets , the programmer should have the possibility to mark/unmark the form as dirty.

[NightOwl888]

Just to be clear, marking a form with dirtylisten doesn't automatically make it listen. .dirtyForms() needs to be called on it to bind the events.

As for custom widgets, that is what the helpers are designed for:

var widgetHelper = {

    // Your custom isDirty function
    isDirty: function (element) {
        var isDirty = false;

        // If the element is (or contains) your widget
        var $widgets = $(element).filter('widgetSelector').add($(element).find('widgetSelector'));
        $widgets.each(function () {
              var $widget = $(this);

              // Check the dirty status of the widget,
              // and if true set the result and exit out of the
              // each function.
              if ( ...widget is dirty... ) {
                  isDirty = true;

                  // Exit out of the each function
                  return false;
              }
        });
        return isDirty;
    }

};
$.DirtyForms.helpers.push(widgetHelper);

You can test it by checking alert($(':dirtylistening').dirtyForms('isDirty'));. Note that in that case, the isDirty function will be called once for each form, but the element that is passed depends on the selector used for the .dirtyForms('isDirty') function.

I could be mistaken, but I can't think of a use case that helpers don't cover that "setDirty" does.

[NightOwl888]

Has your issue been resolved?

[NightOwl888]

Closing, as no reply for several months. Feel free to reopen this issue if you feel it has not been resolved.