simsalabim/sisyphus

Form data don't restore when using restoreAllData()

Closed this issue · 3 comments

I have a problem when use this library with jQueryMobile. The the following code solve my problem. But I don't know why I must add $('#' + field.attr('id')).val( resque ); to line 306. I think timing issue, Right?

restoreFieldsData: function( field, resque ) {
    if ( field.attr( "name" ) === undefined ) {
        return false;
    }
    if ( field.is( ":checkbox" ) && resque !== "false" && field.attr( "name" ).indexOf( "[" ) === -1 ) {
        field.attr( "checked", "checked" );
    } else if( field.is( ":checkbox" ) && resque === "false" && field.attr( "name" ).indexOf( "[" ) === -1 ) {
        field.removeAttr( "checked" );
    } else if ( field.is( ":radio" ) ) {
        if ( field.val() === resque ) {
            field.attr( "checked", "checked" );
        }
    } else if ( field.attr( "name" ).indexOf( "[" ) === -1 ) {
        $('#' + field.attr('id')).val( resque ); // HACK: I Add this code to solve my problem 
        field.val( resque );
    } else {
        resque = resque.split( "," );
        field.val( resque );
    }
}

https://github.com/simsalabim/sisyphus/blob/master/sisyphus.js#L306

I think sisyphus cache the DOM object by design. When I move from current page (WebForm) to another page with jQueryMobile method $.mobile.changePage(). The current page DOM (That has WebForm) was removed and then load the target page. So, when I come back to previous page (WebForm) again, the DOM (WebForm) is re-insert again. At this point, the DOM cache (WebForm) is not valid any more.

I'm quite sure this is the root cause of the problem but it is the one I try to resolve my problem by re-fetch DOM everytime without load from cache. The penalty is making javascript slow a little bit by searching DOM element everytime.

Do all the controls of your form have name attributes?

@simsalabim Sure, I have 'name' attribute for all input/select form element. I think DOM caching is the issue for my usecase. Because 'field' variable cannot reference parent form because it was removed before re-added again.

var draftForm = $('#myform');
...
// Later on 'myform' was removed and re-added again after that
...
if (draftForm) {
    // Do form processing
} else {
    // First time all
    draftForm = $('#myform').sisyphus();
    // Do form processing
}

I'm not re-bind sisyphus twice because double binding cause double function call.