Question

I have one little problem with my web. I have there form in external file, something like below.

<form action="/action.php" method="post" id="formularz_dodaj" target="iframe_id">
    <fieldset>
        <input type="hidden" name="ac" value="groups_save" />
        <ul>
            <li>
                Some fields here
            </li>
            <li class="buttons">
                <input type="submit" class="zapisz" value="Zapisz" />
                <input type="button" class="anuluj" value="Anuluj" />
            </li>
        </ul>
    </fieldset>
</form>
<script type="text/javascript">
    //<![CDATA[
    $j('.zapisz').button().click(function(){
        $j('.anuluj').hide();
    });
    $j('.anuluj').button().click(function(){
        $j('#dialog').dialog('close');
    });
    //]]>
</script>

As You can see, there is nothing special about it except buttons. As a result form gets styled buttons via jQuery. Button <input type="submit" class="zapisz" value="Zapisz" /> should work as normal submit, <input type="button" class="anuluj" value="Anuluj" /> should just clos the dialog.
This form is placed in dialog via jQuery ajax() method like so:

var $j = jQuery.noConflict();
var main = new Object();

$j.extend($j.ui.dialog.prototype.options, {
modal: true,
resizable: false,
width:'auto',
height:'auto',
show:{
    effect:'fade',
    duration:'fast'
},
hide:{
    effect:'fade',
    duration:'fast'
},
open:function(){
    $j(this).find("input[type=text], input[type=password], input[type=checkbox],     select, textarea").uniform();
}
});
main.dialog = function(ob){
if(ob.url){
    var url = arguments.url;
    var dialog = $j("#dialog");
    if ($j("#dialog").length == 0) {
        dialog = $j('<div id="dialog" class="dialog" title=""></div>').appendTo('body');
    }
    if(ob.title){
        dialog.attr('title', ob.title);
    }
    $j.ajax({
        type:'POST',
        dataType:'html',
        data:ob.dane,
        url:ob.url,
        success:function(d){
            if(d == 'uprawnienia'){
                main.alert({
                    text:'Nie posiadasz uprawnie\u0144 do tej operacji.', 
                    title:'Brak uprawnie\u0144'
                });
            } else {
                $j("#dialog").html(d);
                $j("#dialog").dialog({
                    title:$j("#dialog").attr('title')
                });
            }
        },
        error:function(){
            alert('Niepoprawne rz\u0105danie.');
        }
    });
} else {
   alert('Brak pliku do za\u0142adowania.');
}
}

The target for data is an iframe placed in main index file.

<iframe name="iframe_id" id="iframe_id" src="" style="display:none; width:400px; height:200px;"></iframe>

What happens is when i use button with class “.zapisz” nothing happens in specific browsers: IE8, Chrome, Safari. In IE9 and FireFox it’s working as it should.

I’ve checked the console in any of my browsers and there is no error. No data from form is sended to iframe. Only JS added in click method is executed.

Button “.zapisz” works as they should only when document.getElemntById('formularz_dodaj').submit(); is written in click function.

Anyone have idea what can be wrong?

Answer 1

Because there was no solution or pointed cause of such behavior I founded some workaround solution. Because all dialog (in my case) contain buttons witch classes .zapisz and/or .anuluj and usage of them is identical in each case i predefined such code:

$j.extend($j.ui.dialog.prototype.options, {
    modal: true,
    resizable: false,
    width:'auto',
    height:'auto',
    show:{
        effect:'fade',
        duration:'fast'
    },
    hide:{
        effect:'fade',
        duration:'fast'
    },
    open:function(){
        $j(this).find("input[type=text], input[type=password], input[type=checkbox], select, textarea").uniform();
        $j(this).find('input[type=submit], input[type=button]').button();
        $j(this).find('.zapisz').each(function(){
            $j(this).click(function(){
                $j(this).parents('form').submit();
                $j(this).parents('form').find('.ui-state-error').hide();
            });
        });
        $j(this).find('.anuluj').each(function(){
            $j(this).click(function(){
                $j(this).parents('.dialog').dialog('close');
            });
        });
        $j('.ui-icon.ui-icon-closethick').on('click', function(){
            $j(this).parent().parent().hide();
        });
        $j(this).find('.ui-state-error').hide();
        $j('span.opis').tooltip();
    }
});

What this code does is (omitting basic settings like effects etc.) when dialog is opened it searches for buttons with thosw classes .zapisz and/or .anuluj and gives them a proper action according to parent. So now there is no need to add submit() to every form i have manualy.

Next thing is when i need to add some other actions to any of those button i simply write them in form itself just like that:

$j('.zapisz').click(function(){
    $j('.anuluj').hide();
    $j(this).val('Wysy\u0142am dane');
    $j(this).attr('disabled', 'disabled');
});

Notice that there is no longer button() method before adding click().

Now i have dialogs that are formated as i wanted and works as expected by default.

Still i have no idea why my issue happens in some browsers, so if You will have any information about that it would be nice for the future.