I have a page with handsontable and the jquery UI datapicker component ?
By themselves, they work fine.
Jquery UI datepicker, http://jsfiddle.net/7Bvap/355/
$( "#datepicker" ).datepicker();
Handsontable , http://jsfiddle.net/ngpxZ/
But when I put them together,
the datepicker doesnt work (as in the calendar doesnt pop out)
http://jsfiddle.net/cuj3V/
I found a similar problem here,
https://github.com/warpech/jquery-handsontable/issues/498
For page with handsontable as workaround I'm reloading jquery ui css after handson table css and works fine.
So I placed the handsontable.css before the jqueryui.css. But still no avail. Anyone can help ?
Looks like there was a problem with the jsFiddle including the scripts/styles in the css section. You should not need to use the CSS section to include external files. Use the "External Resources" menu instead
external resources
Datepicker and handsontable jsFiddle
Related
I am building an application using jquery mobile and phone gap. As I am about to start the application, have a doubt on how to change the theme of an application on the fly or with minimum changes involved so that I can use the same app with different themes for different client.
Please let me know is there a configuration or common place available to update/change the theme of an entire application at any moment during the development.
EDIT: sorry to confuse a bit, the question is with how to switch between the themes provided by default by jquery mobile like a, b, c, d and e without doing any or much code change.
Thanks.
jQuery Mobile has 3 different CSS files, you can get them when you download whole package.
jQuery Mobile CSS file
jQuery Mobile Structure CSS file
jQuery Mobile Theme CSS file
If you want to use different themes all you need to do is use second and third mentioned file. Structure CSS holds jQuery Mobile structure CSS and it is a backbone of whole structure. What you need to change is jQuery Mobile theme CSS file. This is a file you get when you create a new theme.
On the other hand jQuery Mobile will have several more CSS files but logic is the same. If you download jQuery Mobile from this link: http://jquerymobile.com/
You will find these files:
jquery.mobile.external-png-1.4.2.min.css
jquery.mobile.icons-1.4.2.min.css
jquery.mobile.inline-png-1.4.2.min.css
jquery.mobile.inline-svg-1.4.2.min.css
jquery.mobile.structure-1.4.2.min.css
jquery.mobile.theme-1.4.2.min.css
jquery.mobile-1.4.2.min.css
If you want to use customized themes you will need to remove jquery.mobile-1.4.2.min.css and jquery.mobile.theme-1.4.2.min.css. Theme builder will give you new jquery.mobile.theme-1.4.2.min.css file, or even if you download it from somewhere you will get alternative jquery.mobile.theme-1.4.2.min.css file.
Update
Working example: http://jsfiddle.net/Gajotres/LfLFm/
JavaScript:
$(document).on('pagebeforecreate', '#index',function (e, ui) {
$(this).removeClass('ui-page-theme-a').addClass('ui-page-theme-b');
});
or even better: http://jsfiddle.net/Gajotres/ML2F6/
$(document).on('pagebeforecreate', '#index',function (e, ui) {
$(this).page({theme:'b'});
});
You can simply do it through .page({ theme : "a, b, c" }) widget. It will change the whole page's theme.
$(document).on("pagecreate", function () {
$(".selector").on("click", function () {
$.mobile.pageContainer.pagecontainer("getActivePage").page({
theme: "b"
});
});
});
Demo
I'm developing a app, using backbone, underscore, and jquerymobile. Following jqmobile's way, I have an index page which loads every visited page in special divs tags, flagged with the attribute data-role="page". For each page, i have its corresponding style file (or code snippet embedded in a style html tag). My problem is that the names of my stylable stuff started to collide. Other thing is that I would not like unnecessary style files loaded for each page. Is there any way of dynamically import only the required css for the current page?
I am accomplishing exactly what you ask using RequireJS and the RequireCSS plugin.
Here is a snippet from one of my views:
define([
'jquery',
'underscore',
'backbone',
'views/company/form',
'text!templates/company/company.html',
'css!../../../css/company/company',
], function($, _, Backbone, Form, pageTemplate) {
var Page = Backbone.View.extend({
...
});
return Page;
});
Line 7, 'css!../../../css/company/company' is where the css file becomes a requirement for loading this view.
Once the company.css stylesheet is loaded, it's in the browser even when other "pages" load because there are no actual page refreshes. Thus I have my main page views toggle a class on the <html> element:
// remove any old route-* classes existing on the html element
$('html').removeClassRegEx(/^route-.*/);
// add in the company's top-level class name
$('html').addClass('route-company');
And all my page-specific styles for the company page are scoped to the .route-company class.
You can find the jQuery plugin removeClassRegEx here.
One way of doing that is with jquery (which you 90% are already using with backbone), and its load or get ajax functions, or whatever, plus callbacks.
Then you can call such functions from your backbone app if you need to, and simply inject that css inside <style> tags into your document, as a template.
Or I think there are also specialized jquery functions.
Another way I can think of doing that would be with require.js and it's plugins (it has text plugin, I believe, which will also enable you to load your javascript templates).
I am trying to use jquery UI based transition sliders on my homepage. I tried different jquery plugins but I always get an error in the console : jQuery is not a function or some function error related to jQuery . Plugins i have tried are Lof JSliderNews 1.0,featured-content-slider, etc..
Even after following several posts on the web , iam not able to make the plugin work at all. Jquery part doesn't work. I have used carousels and other plugins with jquery.noConflict but this time nothing works!
Here's what iam doing:
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
I also tried replacing all $ with jQuery in the included scripts but that too doesn't work in magento. Please help, i need to finish the project soon
Have you tried putting all the jQuery stuff into a function and map the window.jQuery variable as an argument? Like so:
(function($){
//... do your jQuery thing here
})(jQuery);
BTW: "jQuery is not a function" might also be a hint that you forgot to load the jQuery library into your project.
Do you have "JS file merging" enabled? If yes, try to disable it, clear your cache and try again. It helped me once when I had a smiliar issue.
Regards
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/
I am using JQuery themes in my html. ThemeRoller works correctly and applies right themes. However I want to change the default theme that it sets when Page loads. For example, I want to use the 'Start' theme when html loads. Can anybody please help?
You can use the "loadTheme" option like that:
$("#themeSwitcher").themeswitcher({
"loadTheme": "Start"
});
You need to download the generated CSS and images from the ThemeRoller and reference the CSS in your page.
As SLaks suggests, you need do the following:
Download a new theme (jquery theme downloader)
Unzip the files and put them into your website (south-street theme gets copied to: MyWebproject\Content\themes\south-street)
Make a reference in your html to the css:
<link href="Content/themes/south-street/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />