The jQuery button widget does not work properly when submitting to Chrome

advertisements

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?


Wrap it inside

$(function(){
//your code here
});

and it should work!

If still it does not work remove .button() and try

$(function(){
    $j('.zapisz').click(function(){
        $j('.anuluj').hide();
    });
    $j('.anuluj').click(function(){
        $j('#dialog').dialog('close');
    });
});