The demos for the jquery ui dialog all use the "flora" theme. I wanted a customized theme, so I used the themeroller to generate a css file. When I used it, everything seemed to be working fine, but later I found that I can't control any input element contained in the dialog (i.e, can't type into a text field, can't check checkboxes). Further investigation revealed that this happens if I set the dialog attribute "modal" to true. This doesn't happen when I use the flora theme.
Here is the js file:
topMenu = {
init: function(){
$("#my_button").bind("click", function(){
$("#SERVICE03_DLG").dialog("open");
$("#something").focus();
});
$("#SERVICE03_DLG").dialog({
autoOpen: false,
modal: true,
resizable: false,
title: "my title",
overlay: {
opacity: 0.5,
background: "black"
},
buttons: {
"OK": function() {
alert("hi!");
},
"cancel": function() {
$(this).dialog("close");
}
},
close: function(){
$("#something").val("");
}
});
}
}
$(document).ready(topMenu.init);
Here is the html that uses the flora theme:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ".dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>sample</title>
<script src="jquery-1.2.6.min.js" language="JavaScript"></script>
<link rel="stylesheet" href="flora/flora.all.css" type="text/css">
<script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"></script>
<script src="TopMenu.js" language="JavaScript"></script>
</head>
<body>
<input type="button" value="click me!" id="my_button">
<div id="SERVICE03_DLG" class="flora">please enter something<br><br>
<label for="something">somthing:</label> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
</body>
</html>
Here is the html that uses the downloaded themeroller theme:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ".dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>sample</title>
<script src="jquery-1.2.6.min.js" language="JavaScript"></script>
<link rel="stylesheet" href="jquery-ui-themeroller.css" type="text/css">
<script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"></script>
<script src="TopMenu.js" language="JavaScript"></script>
</head>
<body>
<input type="button" value="click me!" id="my_button">
<div id="SERVICE03_DLG" class="ui-dialog">please enter something<br><br>
<label for="something">somthing:</label> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
</body>
</html>
As you can see, only the referenced css file and class names are different. Anybody have a clue as to what could be wrong?
@David: I tried it, and it doesn't seem to work (neither on FF or IE). I tried inline css:
style="z-index:5000"
and I've also tried it referencing an external css file:
#SERVICE03_DLG{z-index:5000;}
But neither of these work. Am I missing something in what you suggested?
Edit:
Solve by brostbeef!
Since I was originally using flora, I had mistakenly assumed that I have to specify a class attribute. Turns out, this is only true when you actually use the flora theme (as in the samples). If you use the customized theme, specifying a class attribute causes that strange behaviour.
The demos for the jquery ui dialog all use the "flora" theme. I wanted a customized theme, so I used the themeroller to generate a css file. When I used it, everything seemed to be working fine, but later I found that I can't control any input element contained in the dialog (i.e, can't type into a text field, can't check checkboxes). Further investigation revealed that this happens if I set the dialog attribute "modal" to true. This doesn't happen when I use the flora theme.
Here is the js file:
topMenu = {
init: function(){
$("#my_button").bind("click", function(){
$("#SERVICE03_DLG").dialog("open");
$("#something").focus();
});
$("#SERVICE03_DLG").dialog({
autoOpen: false,
modal: true,
resizable: false,
title: "my title",
overlay: {
opacity: 0.5,
background: "black"
},
buttons: {
"OK": function() {
alert("hi!");
},
"cancel": function() {
$(this).dialog("close");
}
},
close: function(){
$("#something").val("");
}
});
}
}
$(document).ready(topMenu.init);
Here is the html that uses the flora theme:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>sample</title>
<script src="jquery-1.2.6.min.js" language="JavaScript"></script>
<link rel="stylesheet" href="flora/flora.all.css" type="text/css">
<script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"></script>
<script src="TopMenu.js" language="JavaScript"></script>
</head>
<body>
<input type="button" value="click me!" id="my_button">
<div id="SERVICE03_DLG" class="flora">please enter something<br><br>
<label for="something">somthing:</label> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
</body>
</html>
Here is the html that uses the downloaded themeroller theme:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>sample</title>
<script src="jquery-1.2.6.min.js" language="JavaScript"></script>
<link rel="stylesheet" href="jquery-ui-themeroller.css" type="text/css">
<script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"></script>
<script src="TopMenu.js" language="JavaScript"></script>
</head>
<body>
<input type="button" value="click me!" id="my_button">
<div id="SERVICE03_DLG" class="ui-dialog">please enter something<br><br>
<label for="something">somthing:</label> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
</body>
</html>
As you can see, only the referenced css file and class names are different. Anybody have a clue as to what could be wrong?
@David: I tried it, and it doesn't seem to work (neither on FF or IE). I tried inline css:
style="z-index:5000"
and I've also tried it referencing an external css file:
#SERVICE03_DLG{z-index:5000;}
But neither of these work. Am I missing something in what you suggested?
Edit:
Solve by brostbeef!
Since I was originally using flora, I had mistakenly assumed that I have to specify a class attribute. Turns out, this is only true when you actually use the flora theme (as in the samples). If you use the customized theme, specifying a class attribute causes that strange behaviour.
- Not sure why you removed your code and substituted links ... that are now broken so unable to reference. – clairestreb Commented Dec 24, 2014 at 21:51
- oops, totally forgot about that. I'll see if I can edit the post to bring back the code. – Ovesh Commented Dec 25, 2014 at 1:17
4 Answers
Reset to default 3I think it is because you have the classes different.
<div id="SERVICE03_DLG" class="flora"> (flora)
<div id="SERVICE03_DLG" class="ui-dialog"> (custom)
Even with the flora theme, you would still use the ui-dialog class to define it as a dialog.
I've done modals before and I've never even defined a class in the tag. jQueryUI should take care of that for you.
Try getting rid of the class attribute or using the "ui-dialog" class.
After playing with this in Firebug, if you add a z-index attribute greater than 1004 to your default div, id of "SERVICE03_DLG", then it will work. I'd give it something extremely high, like 5000, just to be sure.
I'm not sure what it is in the themeroller CSS that causes this. They've probably changed or neglected the position attribute of the target div that it turns into a dialog.
I tried implementing a themeroller theme with a dialog and tabs and it turns out that the themeroller CSS doesn't work with official jQuery! Especially for dialog and tabs, they modified the element classes from the official jquery ones. See here: http://filamentgroup./lab/introducing_themeroller_design_download_custom_themes_for_jquery_ui/
A user's ment:
3) the generated theme that I downloaded seems to be inplete - when I attempt to use it my tabs (which work with the flora theme, code identical to the documentation example) do not get styled as tabs
Having run into 3 I thought I was stuck and would have to revert using “flora"… I have since discovered by reading the source code of the “demo” file that if I adjust my html and give the < li> items I’m using for my tabs the “ui-tabs-nav-item” class then it will work.
The theme generated by themeroller is thus unfortunately inplete. If the tabs stuff is inplete, it makes me wonder what else is inplete. It was rather frustrating. :(
followed by the themeroller developers ment:
3) We’ll take a look at that. You’re right that those classes should be added by the plugin. For now though, it probably wouldn’t hurt much to just add them to your markup so you can use themeroller themes. We’ll check it out, though. I think our selectors could be based off of the parent ui-tabs selector instead, but I think we were trying not to use elements in our selectors. Consider it on the to-do list
Man, this is a good one. I've tried doing a bunch of things on these two pages. Have you tried just leaving the CSS out altogether and trying both pages then? I used Firebug to remove the CSS from the header on both pages, and the input still worked on one and not on the other - but, I'm inclined to believe that Firebug doesn't pletely remove the CSS from the rendering, and you'll get different results if you actually remove it from the code.
I also found that you can paste text into the text box using the mouse - it just won't accept keyboard input. There doesn't seem to be any event handler on it that would interfere with this, though.