altinkonlineConcrete5 Xcode

Load and use jQuery in your UIWebview


A fast, concise, library that simplifies how to traverse HTML documents, handle events, perform animations, and add AJAX.

In this tutorial you would learn to load and use jQuery in a UIWebView.


Start Xcode and create a new project based on the 'Empty Application' template.

Empty-Application.png

Creat a new file based on the 'UIViewController subclass' template. Give the new class a name (we use 'MyWebViewController') and select subclass of UIViewController.

UIViewController.png

Open the AppDelegate.m, and import the "MyWebViewController.h".

// Add this line on top of your AppDelegate.m
#import "MyWebViewController.h"

Change the application:didFinishLaunchingWithOptions: method in your 'AppDelegate.m' with the code below. First of all create a 'MyWebViewController'. Then create a UINavigationController with the 'Web' as the RootViewController.

Now we need to add the UINavigationController as a subview of the UIWindow.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];
    // Override point for customization after application launch.
    self.window.backgroundColor = [UIColor whiteColor];
 
    MyWebViewController *myWebViewController = [[MyWebViewController alloc] 
                                                    initWithNibName:@"MyWebViewController" 
                                                    bundle:[NSBundle mainBundle]];
 
    UINavigationController *nav = [[UINavigationController alloc] 
                                   initWithRootViewController:myWebViewController];
 
    [[self window] addSubview:[nav view]];
 
    [self.window makeKeyAndVisible];
    return YES;
}

Open your 'MyWebViewController.xib'. Add a UIWebView with the Interface Builder.

UIWebView.png

Now we need to set the delegate of the added UIWebView. Ctrl-click the webview and drag a line from the delegate to the 'File's owner'.

Delegate.png

Switch to the 'Assistant Editor'. Insert an outlet for the added object. Give it a name (we use webView). You could create outlets by 'ctrl-clicking' a object and drag it to the left side of the 'Assistant Editor'.

Now create a new file 'doc.js' based on the 'Empty' template.

Empty_template.png

Open the target of your project, drag the new 'doc.js' from the 'Compile Sources' to the 'Copy Bundle Resources'.

Copy_Bundle_Resources.png

Fill the 'doc.js' with jQuery related code. We have inserted the code below.

$(document).ready(function() {
                  foo();
                  });
 
function foo() {
    jQuery("h1").animate({opacity: 0}, {duration: 3000}).animate({opacity: 1.0}, {duration: 3000})
    .animate({opacity: 0}, {duration: 3000})
    .animate({opacity: 1.0}, {duration: 3000, complete: foo})
}

Change the viewDidLoad: method in your 'MyWebViewController.m' with the code below. Load your html in the UIWebView.

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    NSMutableString *htmlString = [[NSMutableString alloc] initWithString:@"<!DOCTYPE html><html><head>"];
    [htmlString 
     appendString:@"</head><body><h1 style='text-align: center;'>altinkonline.nl</h1></body></html>"];
 
    [webView loadHTMLString:htmlString baseURL:nil];
}

Then load jQuery and your 'doc.js'.

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    NSString *jqueryCDN = @"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
    NSData *jquery = [NSData dataWithContentsOfURL:[NSURL URLWithString:jqueryCDN]];
    NSString *jqueryString = [[NSMutableString alloc] initWithData:jquery encoding:NSUTF8StringEncoding];
    [webView stringByEvaluatingJavaScriptFromString:jqueryString];
 
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"doc" ofType:@"js" inDirectory:@""];
    NSData *fileData = [NSData dataWithContentsOfFile:filePath];
    NSString *jsString = [[NSMutableString alloc] initWithData:fileData encoding:NSUTF8StringEncoding];
 
    [webView stringByEvaluatingJavaScriptFromString:jsString];
}

Now you're ready to run your project with jQuery in a UIWebView.