Home/ Questions/Q 6758775
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T13:50:32+00:00

Debugging a complex jQuery-based application that wasn’t working in Opera browser, I traced back

  • 0

Debugging a complex jQuery-based application that wasn’t working in Opera browser, I traced back the issue to the fact that Opera is ruining my DOM tree when I load some HTML inside a jQuery UI Dialog widget. This is the HTML template (a valid HTML 4.0.1 fragment according to W3C Validator):

<form action="" method="post">
    <p>Form starts here.</p>
    <p><input type="text" size="30" value="input in paragraph"></p>
    <table>
    <tr>
        <td><input type="text" size="30" value="input in table"></td>
    </tr>
    </table>
    <p>Form ends here.</p>
</form>

… and this is the generated HTML as seen by Opera:

<p class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; height: 230px" scrolltop="0" scrollleft="0">
    <form action="" method="post">
        <p>Form starts here.</p>
        <p><input type="text" size="30" value="input in paragraph"/></p>
    </form>
    <table>
        <tbody>
            <tr>
                <td><input type="text" size="30" value="input in table"/></td>
            </tr>
        </tbody>
    </table>
    <p>Form ends here.</p>
</p>

I’ve written a small test case. You should save the HTML template as “form.html” in the same directory as this HTML doc:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- UTF-8 sin BOM (€ÁÑ) -->
<html>
<head><title>Bug DOM Opera</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<style type="text/css"><!--
*{
    font-size: 10pt !important;
    font-family: sans-serif;
}
h1{
    font-size: 12pt !important;
}
form{
    margin: 0.25em 0;
    padding: 0.25em;
    border: 1px solid black;
}
input{
    background-color: #C77C7A;
}
form input{
    background-color: #7CC592;
}
--></style>
<script type="text/javascript"><!--
jQuery(function($){
    // Open form in dialogue on button click
    $("button").click(function(){
        var $dialogo = $('<p>No data yet</p>')
            .dialog({
                modal: true,
                width: 500,
                height: 300,
                close: function(){
                    $(this).dialog("destroy");
                }
            }).dialog("open");
        $.ajax({
            url: "form.html",
            dataType: "html",
            success: function(data, textStatus, XMLHttpRequest){
                $dialogo.html(data);
            }
        });
    });

    // Open form on load (no dialogue)
    $("<div></div>").appendTo("body").load("form.html");
});
//--></script>
</head>
<body>

<h1>Bug DOM Opera</h1>
<p><button>Open dialogue</button></p>

</body>
</html>

If you run it in Opera, you’ll see that you can inject the HTML template with regular AJAX and everything is fine (revealed by green background in <input> elements). However, if you inject it in a Dialog widget, the DOM structure changes (red background). It works as expected in Firefox, Chrome and Internet Explorer.

Have I overlooked an error in my code? Have I hit a bug in Opera or jQuery UI?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    After a long investigation, I can tell you it’s an opera bug from the current version of Opera.

    the html method of Jquery say :

    This method uses the browser’s innerHTML property. Some browsers may
    not generate a DOM that exactly replicates the HTML source provided.
    For example, Internet Explorer prior to version 8 will convert all
    href properties on links to absolute URLs, and Internet Explorer prior
    to version 9 will not correctly handle HTML5 elements without the
    addition of a separate compatibility layer.

    But nothing about opera.
    I’m currently using opera stable 11.51 and I have the bug you’re telling about.
    But if you use Opera Next which is Opera 12.00 alpha. You can download it here : http://my.opera.com/desktopteam/blog/

    It works correctly.

    So I don’t know how to fix it for the current version of Opera… but we know it’s a bug form the innerhtml of the current version of Opera 🙂

    Hope it’ll help you and hope you’ll find a solution to make it works on current stable release of Opera.

    • 0