Is JQuery UI meant to work only with Google Chrome??? (How about IE and Firefox??!)

Posted by Richard77 on Stack Overflow See other posts from Stack Overflow or by Richard77
Published on 2010-03-11T11:56:09Z Indexed on 2010/03/11 17:29 UTC
Read the original article Hit count: 409

Filed under:

Hello,

I'm using "Jquery UI 1./Dan Wellman/Packt Publishing" to learn JQuery UI. I'm working on the 'Dialog widget' chapiter.

After I've completed a series of exercises in order to build a Dialog widget (using Google Chrome), I then tried my work with Internet Explorer and Firefox.

The result has been disappointing.

  • Chrome was perfet
  • With Internet Explorer, (1) the title of the Dialog widget did not appear, (2) The location of the dialog widget was not correct (given the position: ["center", "center"]). It was rather offset toward left.
  • With Firefox, the location was respected. However, only the outer container was visible. the content was missing, just a blank container.
  • Also using Option Show:true and Hide:true did only work with Chrome.

I wonder now if JQuery UI was meant to be used only with Google Chrome. I just think that I might be missing some directives to make it work with major browsers (as the author claimed in his book).

Here's the code. Since, I'm using ASP.NET MVC, certain codes, such as the element to the css, do not appear. But, for the rest, all the functioning code is bellow.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<p>
    The goal of this tutorial is to explain one method of creating 
    model classes for an ASP.NET MVC application. In this tutorial, 
    you learn how to build model classes and perform database access 
    by taking advantage of Microsoft LINQ to SQL. In this tutorial, 
    we build a basic Movie database application. We start by creating 
    the Movie database application in the fastest and easiest way possible. 
    We perform all of our data access directly from our controller actions.
</p>
<div style = "font-size:.7em" id = "myDialog" title = "This is the title">
    In this tutorial -- in order to illustrate how you can build model classes
    -- we build a simple Movie database application. 
    The first step is to create a new database. Right-click the
    App_Data folder in the Solution Explorer window and select the menu option
    Add, New Item. Select the SQL Server Database template, give it the name
    MoviesDB.mdf, and click the Add button (see Figure 1).
</div>
</asp:Content> 

<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent" 
runat="server">

<script src="../../Content/development-bundle/jquery-1.3.2.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.core.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.dialog.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.draggable.js" 
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.resizable.js"
type="text/javascript"></script>
<script 
src="../../Content/development-bundle/external/bgiframe/jquery.bgiframe.js"
type="text/javascript"></script>

<script type = "text/javascript">
    $(function() {
        var execute = function() { }
        var cancel = function() { }
        var dialogOpts = {
            position: ["center", "center"],
            title: '<a href="/Home/About">A link title!<a>',
            modal: true,
            minWidth: 500,
            minHeight: 500,

            buttons: {
                "OK": execute,
                "Cancel": cancel
            },
            show:true,
            hide: true,
            bgiframe:true

        };
        $("#myDialog").dialog(dialogOpts);
    });
</script>

Thank for helping.

© Stack Overflow or respective owner

Related posts about jquery-ui