I'm working on a jQueryMobile application with some form fields that need auto complete functionality. I'm working with jQueryUi Autocomplete plugin but can't get it to work properly. It works fine if my form is the initial page loaded in the browser but doesn't work if the form is loaded later via the jQueryMobile ajax loading mechanism.
The versions I'm working with are:
jQueryMobile: 1.0a4.1
jQueryUi: 1.8.9
jQuery: 1.4.4
My auto complete function looks like this:
$(function () {
$('#search').autocomplete({
source: '/Autocomplete/SearchAutoComplete',
minLength: 3,
select: function (event, ui) { }
});
});
My thinking is that this needs to be wired up to the current active page but I'm not sure how to do this. Can someone let me know how to accomplish this?
Also, I'm not tied to the jQueryUi autocomplete solution. If there is a better way to do this, please let me know.
Thanks,
Greg
Now that JQuery Mobile has matured quite a bit and is getting close to it's 1.0 release, I decided to take another stab at getting this to work properly. I've had good success so I'd like to share the solution here.
Here are the versions I am now currently working with (as of 01-Feb-2012):
jQuery Mobile 1.0.1
jQuery 1.6.4
jQuery UI 1.8.12
The order in which the scripts are referenced is critical. It needs to be jQuery, jQuery UI, jQuery Mobile, then your custom script file last. My page head looks like this:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
<title>My jQM App</title>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.0.1/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
<script src="/Scripts/script.js" type="text/javascript"></script>
<link rel="stylesheet" href="/Content/style.css" />
</head>
All of the autocomplete code should be in a separate .js file and should be the last file linked to. In this sample, mine is script.js.
Next, make sure that all of your page div's (data-role='page') also have an id set. For example, on my search page I have
<div data-role="page" id="searchPage">
Now that all the page div have id's you can bind to the jQuery Mobile pagecreate event for that div. In a standard jQuery page you would have something like this for the autocomplete:
$('#search').autocomplete({
source: '/Autocomplete/SearchAutoComplete',
minLength: 3,
select: function (event, ui) { }
});
To do the equivalent but have it hooked up to the specific page div looks like this:
$('#searchPage').live('pageinit', function (event) {
$('#search').autocomplete({
source: '/Autocomplete/SearchAutoComplete',
minLength: 3,
select: function (event, ui) { }
});
});
This has been working well for me so far. I've been able to strip out most of data-ajax="false" attributes I had in place as a workaround. This, in turn, has resulted in better application performance. I have by no means done an exhaustive compatibility test between jQuery UI and jQuery Mobile so your mileage may vary. Please leave a comment here if you run into any problems with this method. Good luck.
For future reference I recently released an autoComplete plugin written specifically for use with jQuery Mobile:
http://www.andymatthews.net/code/autocomplete/
$('div').live('pagebeforecreate',function(event,ui){
// do something in jquery
});
I have done a bunch of searching. The jQuery UI autocomplete sort of works for modifying a typing text box. The jQuery Mobile filter search box simulates an autocompete but I really didn't find it very useful for use with an actual data collection form.
This article got me started using the jQuery UI autocomplete but I kept runing into formatting problems. I ended up writing my own ajax only (at the moment) autocomplete and thought I would share it. The source is there for you to tweak as you see fit. Maybe someone can take it and improve it or just use it as it stands.
http://schworak.com/blog/e75/jquery-mobile---autocomplete-text-input/
I'm not sure if it is applicable in your case but a workaround would be to add the data-ajax="false" attribute to prevent the page to be loaded by ajax.
http://jquerymobile.com/demos/1.0a4.1/#docs/pages/link-formats.html
jQuery Mobile now has autocomplete, where the results are populated in a listview. Their demo page has great examples on how to implement it, for both local and remote data.
I recently released an autoComplete component with zero-dependency. (no-jQuery)
This completely support most mobile browser like Android, iOS.
https://github.com/skplanet/sweetsearch/
Related
Problem: datepicker is not showing up at all. No errors in the console. All files are included and accessible via Firebug.
After spending way too much time trying to get the jQuery UI datepicker to work, and that includes reading through dozens of Google results, I need your help. Not even the simplest, plain, straightforward implementation of the datepicker is working for me.
Current example I'm testing (stripped down to nothing but the datepicker):
<html>
<head>
<meta charset="UTF-8">
<title>DatePicker Test</title>
<!-- JavaScript -->
<script type="text/javascript" src="../js/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/jquery/jquery-ui-1.8.19.custom.min.js"></script>
<!--script type="text/javascript" src="../js/jquery/jquery.ui.datepicker.js"></script-->
<!-- Stylesheets -->
<link rel="stylesheet" href="../css/ui-lightness/jquery-ui-1.8.19.custom.css" />
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div><input type="text" id="datepicker" class="hasDatepicker" /></div>
</body>
</html>
This does NOT work. I've downloaded the entire jQuery UI code (jquery-ui-1.8.19.custom.min.js) and tried everything. I've even tried to add a simple datepicker field to the demo HTML page that comes with jQuery UI. Nothing.
Then I downloaded the developer bundle of jQuery UI, and tried just the datepicker.js with jQuery, but even that failed.
So although I get no errors, and I can see my selector in the code and through calling it up from the console, I just get plain old nothing.
Then I've tried numerous CSS modifications that have been posted in several forum posts, moved my JavaScript from the top to the bottom, after the datepicker . . . and all kinds of mutations, but nothing has worked.
Is it me?
Certainly, it's possible for others to use the datepicker plug-in, what am I doing wrong?
Hey so I looked into your issue. I suggest removing the class declaration in the input that helped me. Also make sure your script links are correct. You are currently asking them to pull from a folder that comes before your current page. If the page and css/js folders are in the same directory you can remove the "../" at the front.
<input type="text" id="datepicker" />
A helpful add-on in FireFox are the Web Developer tools
Check out this js fiddle here for a working example. It's pretty similar to what you are doing minus the class on the input field, aswell as in this case the example is using CDN's.
You must have something wrong (maybe a script or css isn't getting sourced).
I have this index.html and login.html and I use a href to link from index to login. and in each index.html and login.html I import the javascript. However, it seems that only the ones come from index.html that is being loaded. so if I place the js in index.html for the login.html, it works fine. but then, we I place it separately ( another js for login.html that is not in index.html) , it doesnt work
TIA
When JQM(jQuery mobile) loads a page it uses ajax to accomplish this. When this happens all code in the <head> section is ignored. JQM looks for the data-role="page" part and inserts it into the same dom as index.html. So basically you are doing it the correct way when you add your js in the index.html page.
If you would like to compartmentalize your js code to work for certain pages use this example:
$(document).on('pageinit', '#page1', function(){
// code for #page1
});
$(document).on('pageinit', '#page2', function(){
// code for #page2
});
$(document).on('pageinit', '[data-role=page]', function(){
// this code will execute for every page that is data-role="page"
});
So go ahead and put all your code in one file. Split your code into appropriate pages like above and include that in your index.html file.
Also if you are using JQM version 1.0.1 with jQuery version 1.6.4(recommended with 1.0.1) use .delegate() instead of .on(). i.e.
$(document).delegate('#page1', 'pageinit', function(){ // notice that pageinit and #page1 are switched around for delegate
// code for #page1
}); // interesting to note that if you use delegate in jQuery 1.7.x it actually just calls the .on() method.
Note If you were making a web application instead of a phonegap app you would be smart to put your javascript in that one file and include that in every page. This way if someone is following a link or bookmarked your page they will still get the correct javascript file they need.
Anyways I hope that helps you out. Good luck!
If you are doing a window.location.href then it will load the new HTML(In you case it is login.html) If you are using this approach then you have to reload all you scripts again and hence add these scripts in all your .html pages.
<script src="cordova-1.6.0.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
<link rel="stylesheet" href="jquerymobile/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="jquerymobile/jquery.mobile-1.1.0.min.js"></script>
However if you use the approach recommended by #deadlock then you will just need to load the script once. The later approach is the best one.
Please post your code, specifically how the pages link to each other, and the global config settings you set for app, if any. Like much with jQM, there are multiple practices and strategies supported for page arch.
You can also learn by using desktop browser tools and view the "Resources" to see what and when your resources are being loaded.
In my web app, I have a page where I use autocomplete widget from jQuery UI.
I link to jQuery Mobileand jQuery UI CSS from this page.
link rel="stylesheet" href="Styles/jquery.mobile-1.0.1.min.css"
type="text/css" link rel="stylesheet" type="text/css"
href="Styles/ui-lightness/jquery-ui-1.8.16.custom.css"
when I do this, my jQuery Mobile data-icons dont show at all. I just see a black hole in place. The other pages where I refer to only the jQuery Mobile have no issues. they display the data-icons fine.
Any idea as to what I could be doing wrong?
Put the jQuery UI css link BEFORE the jQuery mobile css and should work.
Try linking your Javascripts in the followng order:
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
If this doesn't help, try using the custom selector in your code :jqmData(), as it automatically incorporates namespaced data attributes into the lookup when they are in use. For example, instead of calling $("div[data-role='page']"), you should use $("div:jqmData(role='page')"), which internally maps to $("div[data-"+ $.mobile.ns +"role='page']") without forcing you to concatenate a namespace into your selectors manually specially for your data-icons
jQuery mobile shows the icon through a background-image and position CSS declaration, it's likely you have CSS that is overriding those styles.
To find your issue, use your debugger, Chrome's debugger is especially useful, under Computed Style look for the background-image/position style and the CSS class in conflict. Then you can see which class is winning and the actual value, if you see a black box you may very well just have a bad url to the image - which you can identify here as well by following the image link on the CSS style and seeing if that image really exists.
Also I don't see your < and > brackets around your CSS declaration, correct me if I'm wrong but I think you're supposed to link to each css file with a separate tag:
<link rel="stylesheet" href="Styles/jquery.mobile-1.0.1.min.css" type="text/css">
<link rel="stylesheet" type="text/css" href="Styles/ui-lightness/jquery-ui-1.8.16.custom.css">
I am trying to hide/show elements in a view using following code:
$('buttonClass/IDhere').click(function (){
$('theDivYouWantToShowClass/IDhere').toggle();
});
However, I am keep getting
Microsoft JScript runtime error: '$' is undefined
What might be the issue and how do I fix it?
This thread is pretty old, but I think an answer in the thread would be nice. I agree with the previous two answers - it's likely because jQuery wasn't loaded. You can load it this way (usually toward the top of the file):
<script src="~/Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
(or whatever the current version of jQuery is).
Hope it helps.
It sounds like jQuery hasn't been loaded yet.
did you make sure download the jquery javascript file and link in to your html/aspx page before attempting to use jquery scripting?
you need to:
download the jquery code/file from:
http://jquery.com/
copy the file (jquery-1.8.3.min.js) you just downloaded somewhere into your web project directory/folder
then insert the link to this file into html/aspx page:
now try to run webpage
references:
www.youtube.com/watch?v=Bf9Gs-09uzQ
www.ajaxtutorials.com/javascript/introduction-to-jquery-learn-jquery-from-scratch-in-asp-net-4-0/
$ is defined by default when you load jquery. I would try and use jquery() to see if somehow $ is being unloaded etc. You can also load up firebug and hit the page. It should show up as a global variable/function. NOTE: You can also setup jquery to not setup the short hand "$".
since it looks like your trying to target classes and ID's - try this
$('.buttonClass #IDhere').click(function (){
$('.theDivYouWantToShowClass #IDhere').toggle();
});
This is a definite case of jQuery module not being loaded. In my case, common.js had a jQuery related script
$( document ).ready(function() {
var divSessionWarning = $("#idivWarn");
divSesWarning.load(divSesWarning.data("src"));
});
This was called in header.jsp. Swapping the sequence of loading the jQuery followed by the common.js resolved the issue.
<script language="javascript" type="text/javascript" src="/JAVASCRIPT/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/JAVASCRIPT/mod/common.js"></script>
Hope this helps.
If jQuery is called then make sure jQuery is loaded before the stylesheet as its likely that calls it
I am loading jQuery UI as
google.load("jqueryui", "1.8.6");
from the Google CDN
And I want the theme UI Darkness to be associated with it.
Any other methods other than
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-darkness/jquery-ui.css" />
Something like
google.load("jqueryui", "1.8.6","{theme: 'UI-Darkness'}");
So far google loader doesn't support this syntax for jqueryui, you can check the documentation here.
http://code.google.com/intl/zh-CN/apis/loader/#GoogleLoad
I think refer to the link in a tag is still the best way in your case.