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.
Related
This question already has an answer here:
How to change between pages using Jquery Mobile in Worklight
(1 answer)
Closed 8 years ago.
I am developing a sample mobile banking app in IBM Worklight V6.2 using the jQuery Mobile Framework. I read the Getting Started Documentation on IBM Worklight and it mentions a way to implement multi-page navigation using fragments. However, it also states that if you are using a JavaScript UI Framework, use its API's instead.
I read up on the jQuery Mobile pagecontainer method and am implementing it as below:
<li>Branch Locations</li>
However, I get the issue that the linked page loads after clicking the link but the original page then reloads. Could someone explain to me why this is happening? Is this a known issue?
I found the problem. I had a link to the
<script src="jqueryMobile/jquery.mobile-1.4.3.js"></script>
In the linked pages. That is the reason it was reinitializing the original index page.
See this project for a Worklight 6.2-based app using jQuery Mobile 1.4.3's Pagecontainer widget.
In the app, you click on a button to transition from index.html to page1.html by using:
HTML
load page1
JavaScript
function changeToPage1() {
$(':mobile-pagecontainer').pagecontainer('change','page1.html');
}
You may also take a look at the following questions that are answered with explanation and project examples for using changePage.
Note that the projects may be from Worklight 6.0 and 6.1 rather than 6.2 but that does not matter as here it's about the JavaScript, simply review it.
How to change between pages using Jquery Mobile in Worklight
IBM Workligt Single HTML file containing all application pages: How to load new page?
IBM Worklight 6.1 - Why is Cordova code not working when placed in a sub-page?
IBM Worklight - Page fragmentation
IBM Worklight - Navigation errors in a multipage app
In all of them, the idea is that Worklight is a Single Page Application. Thus you cannot load another HTML file and expect the application to continue functioning. By doing so you lose the "context" of the Worklight framework - the references to the included JS files, etc.
Instead, you can use jQuery's load or jQuery Mobile's changePage (deprecated in v1.4, to be removed in v5), to load different "pages". Ample examples are provided above.
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.
We encounter the following problems with Jquery Mobile.
Our site is divided in a mobile and a fixed desktop site.
Both use the same database and php code. Only the templates are different.
On our mobile site we use Jquery mobile for a better user experience and that works fine. However we integrated a button "goto desktop".
This link should bring us back to our "normal" desktop site.
But there is the problem. In the desktop-site, Jquery mobile is still activated and it replaces drop down fields, input fields and make a complete mess of the desktop site.
We tried everything to disable JQM but nothing seems to work.
How we can switch from our mobile site template to the desktop site template and disable JQM completely when we are on the desktop template?
Thanks a lot for help!
There are few available solutions but only one will really do.
Working example: http://jsfiddle.net/Gajotres/NvEcW/
Few things are needed, first we need to set this:
<script>
$(document).on('mobileinit', function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
it will give us an ability to programatically turn on/off content enhancement. If you already don't know this mobileinit event must be initialized before jQuery Mobile initialization but after the jQuery initialization. This must always be a part of a page.
There's one last step. When we want to move from mobile to desktop page we need to reload page and use this javascript:
$(document).on('pagebeforecreate', '#index', function(){
$(this).attr('data-enhance','false');
});
Pagebeforecreate event is important because at this point content is still not enhanced and attribute data-enhance = false will prevent any further page enhancement. If you want to turn it on again just set attribute value to true.
If you want more solutions then take a look at my other answer, search for the topic Methods of markup enhancement prevention : jQuery Mobile: Markup Enhancement of dynamically added content.
I'm working on a Meteor project at the moment that utilises Meteor JS & jQuery Mobile. All is going well apart from certain circumstances where Meteor updates an element.
For example, JQM automagically adds a few surrounding divs to a select box for formatting purposes (.ui-select, .ui-btn, .ui-shadow, etc.) but when Meteor updates this element, whether from a remote or local db change, it reverts the element to a standard select box, in effect ruining the UI.
I was just wondering if there is a easy solution to this issue where Meteor calls on jQuery to make changes prior to updating the element?
Dynamically added jQuery Mobile content must be enhanced.
It can be done in few ways, but most common ones are:
In case you want to enhance only content
$('#page-id').trigger('create');
In case you want to enhance full page (content + header + footer)
$('#page-id').trigger('pagecreate');
It is good to know that these method are performance extensive so you can always enhance widgets (buttons, listviews ...) separately. To find out more take a look at my other ARTICLE, to be transparent it is my personal blog, or find it HERE.
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.