JQuery Code works in all browsers but not on IE

Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">

<head>

<meta http-equiv="Content-Language" content="pt-br" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />


<link type="text/css" href="css/cupertino/jquery-ui.css"
    rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/form.js"></script>

<script type="text/javascript">
    $(function() {
        $("#loginform")
                .submit(
                        function(event) {
                            event.preventDefault();
                            var data = $("#loginform").serialize();
                            $("#aviso").removeClass().addClass('messagebox')
                                    .text('Validando dados...').fadeIn(1000);
                            var options = {
                                url : 'valida.php',
                                dataType : 'json',
                                success : function(data) {
                                    if (data == 'liberado') {
                                        $("#aviso")
                                                .fadeTo(
                                                        200,
                                                        1,
                                                        function() {
                                                            $(this)
                                                                    .text(
                                                                            'Redirecionando...')
                                                                    .addClass(
                                                                            'messageboxok')
                                                                    .fadeTo(
                                                                            900,
                                                                            1,
                                                                            function() {
                                                                                $(
                                                                                        this)
                                                                                        .removeClass()
                                                                                        .html(
                                                                                                '');
                                                                                document.location = 'index.php';
                                                                            });
                                                        });
                                    } else if (data == 'bloqueado') {
                                        $("#aviso")
                                                .fadeTo(
                                                        200,
                                                        0.1,
                                                        function() {
                                                            $(this)
                                                                    .text(
                                                                            'Usuário e/ou Senha Inválidos.')
                                                                    .addClass(
                                                                            'messageboxerror')
                                                                    .fadeTo(
                                                                            900,
                                                                            1);
                                                        });
                                    }
                                }
                            }
                            $('#loginform').ajaxSubmit(options);
                            return false;
                        });
    });
</script>
<script>
    $(function() {

        $("#modal-form").dialog({

            bgiframe : false,
            width : 270,
            //width: 220,
            modal : true,
            open : function(event, ui) {
                $('.ui-dialog-titlebar-close').hide();
            }
        });
    });

    $(function() {
        $("button, input:submit").button();
    });
</script>

<style>
* {
    font-size: 14px;
}

#msgbox {
    font-family: sans-serif;
    font-size: 11px;
}

.messagebox { /*position:absolute;*/
    width: 240px;
    border: 1px solid #c93;
    background: #ffc;
    padding: 3px;
}

.messageboxok { /*position:absolute;*/
    width: 240px;
    border: 1px solid #349534;
    background: #C9FFCA;
    padding: 3px;
    font-weight: bold;
    color: #008000;
}

.messageboxerror { /*position:absolute;*/
    width: 240px;
    border: 1px solid #CC0000;
    background: #F7CBCA;
    padding: 3px;
    font-weight: bold;
    color: #CC0000;
    margin-right: 0px;
}
</style>

</head>

<body>

<div id="modal-form">
<p id="aviso"></p>
<form id="loginform" method="post" action="valida.php">
<table width="13%" cellspacing="5">
    <tr>
        <td align="right" width="20%"><b>Login:</b></td>
        <td width="65%"><input type="text" id="usuario" name="usuario"
            size="20" /></td>
    </tr>
    <tr>
        <td align="right" width="20%"><b>Senha:</b></td>
        <td width="65%"><input type="password" id="senha" name="senha"
            size="20" /></td>
    </tr>
    <tr>
        <td colspan="2">
        <p align="center"><input type="submit" id="logar" value="Logar" />
        </td>
    </tr>
</table>
</form>

</div>

</body>

</html>

Do you really have the whole script before the <html> tag? I very strongly recommend against that. — Pointy
– Pointy, Commented May 17, 2011 at 22:30
Have you tried just event.preventDefault(); i mean since you use jquery no need of conditions. — Z. Zlatev
– Z. Zlatev, Commented May 17, 2011 at 22:30
Place your script in a <HEAD> tag between the HTML and BODY — Dan Diplo
– Dan Diplo, Commented May 17, 2011 at 22:43

Lightness Races in Orbit · Accepted Answer · 2011-05-17 22:45:39Z

1

Where's your body element?

Why is your script outside of the html element?

Fixing these errors, I suspect, will solve the problem.

answered May 17, 2011 at 22:45

Lightness Races in Orbit

387k77 gold badges669 silver badges1.1k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Gabriel Rodrigues Over a year ago

i corrected the code and now ie seems to be not submitting the form... seems to be submiting but return error from the site

RobG Over a year ago

HTML body tags are optional, as are the HTML tags themselves. Title tags aren't. I doubt that the presence or absence of either is significant, but the lack of DOCTYPE is (particularly for IE).

Gabriel Rodrigues Over a year ago

thx all for your help!! now the code is working thanks to @RobG really is the lack of DOCTYPE who is causing the problem.

Lightness Races in Orbit Over a year ago

@RobG: Perhaps, but I was wondering whether jQuery's selector mechanism would function without a body element, which anyone sane expects to find.

Collectives™ on Stack Overflow

JQuery Code works in all browsers but not on IE

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related