Solved

jQuery Dialog isn't formatted properly in IE8 browsers

Posted on 2014-03-19
14
1,433 Views
Last Modified: 2014-04-03
Attached is the screen shot of this close button outside of the dialog.  It's displaying properly in both Chrome and FF.  I also attached the jQuery that we're using for this.
dialog-IE8.jpg
0
Comment
Question by:lapucca
  • 6
  • 5
  • 3
14 Comments
 

Author Comment

by:lapucca
ID: 39940889
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39941198
Which version of jQuery are you using?  The newest version (jQuery 2.x) does not work with IE less than IE9.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39941437
The best thing to do for us to help you is to post a link to your code.  If you feel your content may have private data, just create a sample test case and post that link for us.
0
 

Author Comment

by:lapucca
ID: 39942965
Sorry, I forgot to provide the test file.  This is a Intranet so I can't provide access but I do have this test file.  However, The test file works fine in IE 8.  It's when I use the jQuery code in our application that it creates the problem in IE 8.  

The following is what is used in our web app.  It's a bit different than what I used in my test file.  
jquery-ui.min.css - v1.10.3 - 2013-05-03

jquery-ui.min.js - v1.10.1 - 2013-02-15
jQuery v1.7.1

I wonder what i need is to put in some css statement that if IE8 then move the button to the left, something like that?
Thank you.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39942980
You should consider getting jQuery v 1.10.1 to go along with the jquery-ui version.
0
 

Author Comment

by:lapucca
ID: 39942996
This is a jQuery widget, https://api.jqueryui.com/dialog/ 
Do I need to download and install the ThemeRoller to our web server?
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39943015
I don't know what ThemeRoller is.  At the bottom of the jqueryui page you have linked is this demo code showing that they are loading the current version of jquery, jquery-1.10.2.js.  I could be wrong but I thought that the UI versions were supposed to match the main jQuery versions.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dialog demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>
</body>
</html>

Open in new window

0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:lapucca
ID: 39943024
I can have both jQuery-ui js and css files to be version 1.10.3 on our web server.  The jquery.js file is older at 1.7/1.  However, are you suggesting upgrading that to jquery.min.js 1.10.3 version?  I google but din't find find this version.  I think what works in the test file is with 1.10.1.  Will that work or can you tell me where to download 1.10.3 for jquery.min.js

Thanks.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39943083
The available versions are listed here on the jQuery web site: http://jquery.com/download/  Down at the bottom of the page are the older versions including 1.10.1.  And this page http://code.jquery.com/jquery/ provides links to more versions that you can download or link to.
0
 

Author Comment

by:lapucca
ID: 39943095
The test file works fine and the jquery and jquery-ui version didn't match either but I will sync them seems like a good idea.  Is there a risk upgrading jQuery to newer version on our web server?  Would it break any current code or plug in?

Also, I was playing around in Firebug and noticed I can create the IE8 problem in FF if I disable the "right:0.3em" in the screen shot file attached.

Thank you.
firebug2.jpg
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39943113
There is always some risk... but I haven't encountered any specific problems myself.  If you 'upgraded' to jQuery 2.x it probably wouldn't work because they say it does not support IE less than IE9.
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39944052
When you start fooling around with work arounds you will just get yourself into trouble.

Using jquery 1.1x with the matching jquery ui
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

Open in new window


First test the issue out on the jquery site http://jqueryui.com/dialog/ and if you can't duplicated it, the  problem is with other issues in your code.

>This is a Intranet so I can't provide access
Create a simple test case with minimal data that can be public. Post just that link.  Another option is to recreate your page on jsbin.  I have added the required files for you here http://jsbin.com/cogumozu/1/edit  We don't need your 1000 lines of code, just the test case http://css-tricks.com/reduced-test-cases/

It's very possible that creating a simplified test will not be able to reproduce the issue.  This is where creating a public link will help us help you.
0
 

Author Closing Comment

by:lapucca
ID: 39976137
Sorry for the delay in responding.  I did try using all the matching and proven working when using my test file jquery libraries.  However, it still doesn't work right with IE8.  I very much appreciate the tip to setup an example but this is a SharePoint 2013 web page so that's not possible to simulate external of what you recommend.  
Thank you.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39976263
Do you really get a lot of users for ie8?  Anybody using windows XP at this point is at risk because it is not being updated.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now