I wanted to use jQuery Mobile for an app with Ember framework, but it seems that jquery mobile is modifying the URL of ember ?
For example, I have this basic url from ember :
=> localhost/Marco/Dev/Project1/#/home
It will automatically modify the url like that :
=> localhost/home
and this is causing me some issue with a lot of thing, and I was wondering if it was possible to disable this thing on Jquery mobile ?
Thanks
Use jquery mobile custom builder and uncheck all related to url based components like Navigate in events etc.
http://jquerymobile.com/download-builder/
Related
I have to show a table in a widget based on the device(mobile, laptop, tablet) selected by user.
For Desktop/Laptop I am loading ExtJs libraries. I wrote following code which is working fine.
var container = new Ext.BoxComponent({ id: "demoBox" });
for mobile I load Jquery Mobile libraries. I am getting an error like
Uncaught Reference Error: Ext is not defined
. could you tell me which is equal component for 'Box Component' in Jquery mobile.
JQuery Mobile and ExtJS are not compatible in a way that you could copy over the code, optimize and be done with it. JQuery requires you to write HTML code, ExtJS doesn't. If you have a working ExtJS application, the best way to go mobile is ExtJS6-modern, previously called Sencha Touch.
The way you write JQuery Mobile means that you don't need a BoxComponent there. You would just write a bit of HTML/CSS - a DIV with a certain width and height - and be done with it.
i already build a website using bootstrap UI . and now i want implement small portion in that website using jquery mobile .bootstrap use keyword role and jquery mobile use keyword data-role so my question can use bootstrap and jquery mobile together . will it cause and conflict when using both in same page ?
No there is no conflict and you can use the libraries together. Try to load only the Jquery UI components that you need, this can be done by building a custom jQuery UI js file asset. It would include jQuery UI core and components such as the DatePicker and Draggable. That way you keep your 3rd party libraries smaller and thus increase page load speed.
I wish to implement angularjs with jquery mobile all works fine except that the jquery mobile css is not applied.
It works when I don't use routing in angularjs but with routing, the css stops working.
What do I do? I also included the jquery-mobile-angular-adapter still it's not working.
"if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup." - http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html
To solve this problem you have to tell JQuery to initialize all plugins after Angular loads the content, you can do this in your controller.
$scope.$on('$viewContentLoaded', function() {
$(document).trigger('create'); //$(document) or just the part that was loaded with ajax
});
I don't know jquery-mobile-angular-adapter, so I can't help with that.
I'm preparing a very basic Backbone application using jQuery Mobile for the UI and Backbone (with RequireJS) for the rest.
I used the following project as a base:
https://github.com/fiznool/mobile-backbone-boilerplate
And used Christophe Coenraets guide for using jQuery Mobile along with Backbone:
http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/
And found a couple of good information, for example in here:
jquery mobile require.js and backbone
However, I'm having a lot of issues with new generated content and styles: more with pages that have more than one uri segment (for example: /movie/1).
My method that changes the view looks like the following:
var changeView = function(newView) {
newView.render();
newView.$el.addClass("ui-page").attr('data-role', 'page');
$(container).append(newView.$el);
$.mobile.changePage(newView.$el, {changeHash:false});
};
The page is actually changed, but it looks without any style. I found a solution by using the following code on the jquery.mobiile.config.js file:
$(document).bind('pagechange', function(e) {
$('.ui-page-active .ui-listview').listview('refresh');
$('.ui-page-active').page("destroy").page();
});
However, the styles are applied really late (after the page is rendered, like 500ms after).
Is there a better solution for this?
Well, I opted by removing jQuery Mobile and just style my components on my own.
I love jQuery Mobile and I used it in a couple of applications before, but the decision was more likely because the application felt too heavy when using jQuery Mobile and I just needed like 10% of jQuery Mobile.
I have a backbone.js / jquery mobile app:
when i make a GET to mydomain.com/#map, then jquery executes "/" and then loads #map.
because "/" is triggered first, all backbone.js scripts are loaded including the backbone.js routes in my map-controller.js ("map": "functionForMapRoute").
since the URL contains /#map, the backbone.js route "map" gets triggered before jquery mobile has rendered the dom.
so "functionForMapRoute" can´t operate on divs cause the DOM isn´t fully loaded at this point.
how can i ensure, that the "map" route is triggered not until the DOM is fully loaded?
use something more integrated with jquery mobile, for instance jquerymobile-router (you can find it on github). It replaces backbone's router and it's to be used with jquery mobile and backbone.js or spine.js
I figured out that if you dont use "/" in backbone router it will do fine.
e.g.:
use
"category-:id": "category"
instead of this
"category/id/:id": "category"
I guess thats why they used same concept in the official tutorial :P
http://jquerymobile.com/test/docs/pages/Backbone-Require/js/routers/mobileRouter.js
"category?:type": "category"
I had the same issue, and here is the solution to avoid using jquerymobile-router : Backbone.js and jQueryMobile routing without hack or other router