Category: JQuery Mobile

Posted on

AngularJS + JQueryMobile and Dynamic Loading of pages

I was experimenting with using AngularJS and JQueryMobile together and loading pages dynamically. The page loading and routing can either be handled by JQueryMobile ($.mobile.pageContainer.pagecontainer(“change”,“page_name”)) or AngularJS. With AngularJS you can use $route service along with ngView and/or use ngInclude .

ngInclude looked easy enough to start with, but did not turn out to be that easy. I will take as simple example of a login application. If user is not logged-in, the app will display the login page and after successfully logging in, the application will display the main page, with the option to logout. Continue reading “AngularJS + JQueryMobile and Dynamic Loading of pages”

Posted on

Creating CFMobile Application using AngularJS

In my previous blog articles I had explained how to create CFMobile applications using JQuery, Bootstrap/JQueryMobile. Here are links to sample (CFMobileExpenseTracker) applications using the two UI frameworks –

I wanted to create the same application using AngularJS. It had been on my ‘to learn’ list for sometime now. So I spent the last weekend learning it. If you already know concepts of MVC and Dependency Injection, then understanding AngularJS is not difficult. The well documented tutorials also helped.

I decided to re-write CFMobileExpenseTracker using AngularJS and JQueryMobile. Since AngularJS provides very easy way to manipulate DOM, you really don’t need JQuery. But I had to include it in the application anyway because JQueryMobile depends on it. I also used JQuery for basic event handling.

Earlier in my application I had used client side custom tag (expenseList.cfm) to display expense items by calling JQuery APIs to modify DOM and update UI. I could get rid of this custom tag entirely after using AngularJS, because of templating features  and automatic synchronisation between model and view provided by Angular JS.

Here are the screen shots of the application –
2014_04_24_image12014_04_24_image2

Though I said that I re-wrote the application, it was not a complete re-write. I could reuse CFCs and made small modifications to index_include.cfm. I added a new JS file (angular_app.js) to crate AngularJS application and controllers – Continue reading “Creating CFMobile Application using AngularJS”

Posted on

Creating dynamic popup menus with JQuery Mobile

Creating popup menus in JQuery Mobile is not quite simple. I am talking about menu that you might want to display when user clicks on, for example, a list item or a button. Refer to JQuery Mobile documents for select menus and custom menus . These menus are actually drop down lists and in all the cases, the menu has to be already visible.

However this is not what I wanted in my mobile apps. I do not want menu to be visible initially, but want to display it when user clicks on a button on a list item. So I started investigating how this could be done. As it turned out, the menu that JQuery Mobile shows (when nativeMenu attribute is set to false), is different from the select tags that you create for the menu. JQM hides the menu that you create and creates a new (wrapper) menu using div and anchor tags. Option tags become anchor tags in the new menu. This is all fine, but the problem is that JQM does not have any direct APIs to access elements of the new menu. This makes it difficult to attach event handlers to menu options.

Continue reading “Creating dynamic popup menus with JQuery Mobile”

Posted on

Dynamic loading of JavaScript files

I am working on a JavaScript framework that uses JQueryMobile. The framework can be used for both mobile and non-mobile sites. You can set the page for mobile by calling, for example, enableMobile method. So the framework does not load JS files for JQueryMobile up front. It does so only when enableMobile method is called.

First I tried to include JS file for JQueryMobile using document.write method –

document.write("<script src='jquery.mobile-1.1.0.js' type='text/javascript'><\/script>\n");

However this did not work – the page was not converted to JQueryMobile page, i.e. CSS styles of JQM were not applied to the page. Instead I got following error –
Continue reading “Dynamic loading of JavaScript files”

Posted on

Passing data between pages in JQuery Mobile

I am working on a JQuery Mobile application which is based on single page template design. In this design, there is one main page in the application and all other pages are loaded by JQuery using AJAX and content is embedded into the DOM of the main page.

I have a couple of pages in the application and I switch between pages using changePage. One of the issues I struggled a bit initially was, how to pass data between pages? The signature of changePage is
Continue reading “Passing data between pages in JQuery Mobile”

Social