Home Contact Me Tutorials

Using JQuery Mobile Inside A UIWebView



Instead of using native UIViews to create a GUI for an iOS application, we can use JQuery Mobile to create a HTML5 app and use a single UIWebView to display our GUI. In fact, this technique is not limited to just JQuery Mobile, and you can use other HTML5 JavaScript/CSS frameworks as well.

The JQuery Mobile files used in this tutorial are the same as the one in my other JQuery Mobile Example. I recommend reading the notes on that page.

Create Folder References

First of all, I highly recommend adding your HTML5 resouce files as folder references in XCode. This will allow you to use relative paths in your HTML hyperlinks.

To do this just select the Create Folder References For Any Added Folders option as shown in the following image:

Loading the HTML into the UIWebView

Use the pathForResource method and the NSURLRequest class to load the initial HTML page.

    NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"jquery-index" ofType:@"html" inDirectory:@"HTML5"];
    if (htmlPath == nil) {
        [self alert:@"Could not find jquery-index.html in resource bundle" title:nil];
    NSURL* htmlURL = [NSURL fileURLWithPath:htmlPath];
    NSURLRequest* request = [NSURLRequest requestWithURL:htmlURL];
    [self.webView loadRequest:request];


The XCode source code is now hosted at Github at the following link. It includes all the Objective-C and JQuery Mobile source files.