I'm trying to get Autocomplete working in a Bootstrap 3 project on a Modal window using the basic example:
$("#txtTest").autocomplete({
source: availableTags
});
CSS is not my strongest area and I've now spent a while googling this, as you can see the Autocomplete items are on a transparent background.
https://dl.dropboxusercontent.com/u/28316339/bootstrap3-jqueryui.autocomplete.png
I added this which at least got the text on top:
.ui-autocomplete {
z-index: 10000000;
}
Using JQuery 1.10.2 and jQuery-UI 1.10.4
Should I abandon jQuery-ui Autocomplete and try Twitter Typeahead?
Cheers
You need to use the CSS file that comes with jquery-ui: jquery-ui-1.10.4.custom.css
Related
I am trying to create an editable SlickGrid (which uses jquery-ui) and also use Dojo.
When my page contains
<script src="../../bower_components/dojo/dojo.js"></script>
<script src="../../bower_components/SlickGrid/lib/jquery-ui-1.11.3.js"></script>
<script src="../../mlads/fillDemo/FillDemo.js"></script>
the console shows
Error: multipleDefine
return mix(new Error(error), {src:"dojoLoader", info:info}); dojo.js (line 106)
src: dojoLoader dojo.js (line 1896)
info: Object { pid="dijit", mid="dijit/_WidgetsInTemplateMixin", pack={...}, more...}
If I comment out the jquery-ui line, the error goes away.
FillDemo.js is my source code, which starts with
require(
[ "dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dijit/registry",
"dijit/form/Button",
"dijit/form/DropDownButton",
It looks like this is an error with the order in which jQuery UI is loaded vs when the dojo loader is intialized.
See the discussion here for more context: https://geonet.esri.com/message/448542#comment-448449
The solution is to make sure dojo loader is called after jQuery UI and jQuery have loaded. For this, you can move the loading of dojo to the bottom of the HTML page, and leave jQuery and jQueryUI in the header.
First of all, I'm a novice at this stuff so excuse my "ignorance."
I am creating a form in order for customers to schedule a test drive on a vehicle they are interested in purchasing. I have found jquery code which I've included in the head section as follows:
$(function() {
$( "#datepicker" ).datepicker({ autoSize: true });
$("#time1").timePicker();
// 09.00 AM - 03.30 PM, 15 minutes steps.
$("#time2").timePicker({
startTime: "09.00", // Using string. Can take string or Date object.
endTime: new Date(0, 0, 0, 15, 30, 0), // Using Date object.
show24Hours: false,
separator:'.',
step: 15
});
});
In the form, I have added the following:
<b>Pick a Date and Time</b><br>
<span class="auto-style7">Date: </span>
<input type="text" id="datepicker" name="testdrivedate" style="width: 91px" /><br>
<span class="auto-style7">Time: </span>
<input type="text" id="time2" name="testdrivetime" size="10" value="09.00 AM" style="width: 87px"/><br>
The datepicker works well, when the user clicks in the field, the calendar shows up just below the field and when a date is selected, the field is populated with the date selected.
However, the timepicker field does not work. 09:00 AM appears in the form, but when the user clicks in the field, no drop down appears in order to allow for selection of a different time.
Where have I gone wrong?
Thanks for any assistance.
Anna
Based on your comment above, I would guess your code is not executing because you have not included jquery.timePicker.js in your code. Download the file and include it like this:
<script src="path/to/your/js/file/jquery.timePicker.js"></script>
You don't need to include datePicker.js because datepicker is a plugin included with the jquery-ui library. (So really you do have datepicker included!)
Also, looking at your comment, you do not need to have a ; after declaring a <script> tag
Like this:
<script></script>
Not like this:
<script></script>;
EDIT
I found the issue, it appears the jquery.timepicker.js library is quite old (2009). It was developed with a much older jquery version. When I run jquery.timepicker.js with a newer version of jquery, I get this error in the console:
Uncaught TypeError: Cannot read property 'opera' of undefined on jquery.timePicker.js line 130
When I checked line 130 in jquery.timepicker.js, the error was complaining about $.browser being undefined. You are using jquery 1.9.1, and as of jquery 1.9 the jquery website states this about the $.browser object:
This property was removed in jQuery 1.9 and is available only through the jQuery.migrate plugin. Please try to use feature detection instead.
See this page for more information on the jquery browser element: http://api.jquery.com/jQuery.browser/
It looks like you would have to try and use the jquery.migrate plugin if you want to get $.browser and jquery.timepicker.js to work. I'm not sure how difficult this will be as I've never used the jquery.migrate plugin before.
As another a solution, it looks like jquery 1.8.3 plays nicely with both jquery.timepicker.js and jquery-ui 1.10.3 (which is what you are also using). You can either use jquery 1.8.3 instead of 1.9.1:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Or you should use the latest version of jquery, jquery-ui and a newer jquery timepicker plugin. On google search, the first entry for jquery timepicker is this one http://trentrichardson.com/examples/timepicker/ dated May 5th, 2013 which is quite recent. That might work better for you.
Good luck!
I have trying to create file upload using jQuery-UI dialog and uploadify. I have seen that others also had similar problem, but it was always z-index in css or cross-browser issue, which is not case here because it just won't work in any browser. When I place uploadify div(div that is a placeholder for flash object) outside the jQuery dialog everything works fine, but when I try to put it inside, swf gets loaded but when dialog pops I get error: 'Object expected' in jquery.min.js on
var c=a.getAttributeNode("tabindex")
Is it possible that problem is caused by jquery version? Current version is 1.7.1 and I tried using also 1.9.0
Add the following CSS class to override the default z-index value 1
.swfupload {
z-index: 10000 !important;
}
this error in absence function getAttributeNode and getAttribute in Flash element.
change in "jquery-min.js"
elem.getAttributeNode(name) // OR a.getAttributeNode(b)
to
(elem.getAttributeNode?elem.getAttributeNode(name):null) // OR (a.getAttributeNode?a.getAttributeNode(b):null)
and
elem.getAttribute(name) // OR a.getAttribute(b)
to
(elem.getAttribute?elem.getAttribute(name):null) // OR (a.getAttribute?a.getAttribute(b):null)
The Loading message in JQuery Mobile 1.1.0 doesn't seem to be working. Here is the JSFiddle for the code.
When I use version 1.0b2, it works as expected. Is this a bug in 1.1.0?
It is not a bug. Latest Jquery supports more config options. You can define the laoding message theme etc.
Refer the documentation here
Sample code
$(document).bind("mobileinit", function(){
$.mobile.loadingMessageTheme = 'a';
$.mobile.loadingMessageTextVisible = true;
});
Save above mentioned code in a js file (e.g. config.js ) and import it before importing jquerymobile framwork.
Good luck.
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.
EDIT
I've re-done the same exercise yesterday. From the beginning to the end, each time I've introduced a behavior, I've tested my work in all 3 browsers (IE, Firefox, Chrome).
Everything works until I add option Show and Hide. Then only Chrome works.
If I remove Show and Hide, everything works again.
If I keep only Show and Hide, everything works perfectly
Maybe Show and Hide options for dialog widget do not mix up well with other options.
Thanks for helping.
No, jQuery UI works in any of those browsers. It's probably either the steps you're following don't work so well with the version you're using or the version you're using is old. I've used jQuery UI without issue on both browsers. If you don't believe me, then open this URL in your browser:
http://jqueryui.com/demos/dialog/
In Firefox 3.6, it loads just fine for me.
I'm not an expert on jQuery UI, but providing the code here might help.
jQuery supports all the major browsers however there are know issues with;
Firefox 1.0.x
Internet Explorer 1.0-5.x
Safari 1.0-2.0.1
Opera 1.0-8.x
Konqueror
We have successfully implemented a Dialog widget without major issues. We did have some problems making sure the correct versions of the libraries were created. I would suggest you build a custom file using the jQuery UI download tool. This will put all the necessary files in a single minified file.
If the Dialog examples don't help then posting code will be necessary to obtain further help.
EDIT:
I have anchors created with the classes dialogOpen and dialogClose and use the following code to utilise the created UI Dialog;
$(document).ready(function(){
var dialogOpts = {
autoOpen: false,
modal: true,
width: 840,
height: 560
};
$(".dialogOpen").click(function(){
$("#myDialog").dialog("open");
return false;
});
$(".dialogClose").click(function(){
$("#myDialog").dialog("close");
return false;
});
$("#myDialog").css('display','block').dialog(dialogOpts);
$(".ui-dialog-titlebar").hide();
});
NB: The use of the css function when creating the dialog stops the content appearing on the page before the Dialog is created. We needed this because our dialog has flash.
You may be missing something. It surely works in all major browsers.
jQuery is ment to be cross browser. Any errors with this can have to reasons
- Programmer's error
- Explicit incompatibilty
There are some explicit incompatibility's with IE5.5 and IE6 in jQuery. They are in the comments of jQuery and a good js compatible IDE like netbeans will allow targeting and warn you about it.
I never had any problems with the dialog widget positioning or contents.
jQuery UI is most definitly not designed to work with Google Chrome only.
I've successfully created applications using jQuery UI working on all major browser platforms.
jQuery UI (and jQuery) contain code to work around certain browser issues.
Of course there can be issues in jQuery UI which show on IE, like this one, but those are certainly not by design.