JQuery Mobile not working inside UIWebView

Question

I'm coming here after many many hours of looking for a solution and trying different approaches to fix this issue I'm having with JQuery Mobile and my iPad app.

What I'm trying to do is a reporting app with Fusion Charts. I have successfully rendered the charts within web views (UIWebView) using different methods, and following different examples, but what I'd like to do now is accomplishing the same task using the JQuery Mobile framework.

I'm not using phonegap and I've followed the steps to the letter regarding JQuery Mobile + Xcode integration (I think). The charts load without a problem on my desktop and mobile browsers (iPad , iPhone 4, and iPod Touch 2G), but there's no way they load inside my UIWebView (even though I'm using the same exact code).

This is what I'm doing:

1) Adding required files (JS, CSS, and HTML) to the project to use them locally. After adding them I move everything with .js extension from "Compile Sources" to "Copy Bundle Resources". It looks like this:

2) Load my HTML test file (page_A1.html) into the web view:

3) Check that everything is set up on the HTML file with correct paths and latest version of frameworks:

4) Build and Run only to get a blank web view.

If I test Javascript with an alert like this:

It will show the alert proving Javascript is working:

And if I put some text on the container where the chart is supposed to be displayed:

I'll get the text inside the web view:

I have also tested with remote framework links instead of the local ones and older version of the libraries with no luck. Nothing different happens:

It seems obvius to me that

$(document).ready(function(){

is not being noticed or invoked by xcode.

This is what I'd like to accomplish:

I don't know what else to test. If you have any idea I'd be more than grateful.

Miscellaneous

Answer 1

Nevermind guys. I finally got it.

Some old habits from the web development days played me here.

It tuns out you don't have to specify the inner directory structure for your CSS and JS files so this:

<link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" />

<script src="js/jquery-1.7.2.min.js"></script>

<script src="js/jquery.mobile-1.1.0.min.js"></script>

shoudl really be like this in Xcode:

<link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" />

<script src="jquery-1.7.2.min.js"></script>

<script src="jquery.mobile-1.1.0.min.js"></script>

Unbelievable how much time it took me to find that out.

Now it's working.

Miscellaneous

I'm having the same problem, but with a accordion test. Can you help me? – Frigidarium

Didn't the information posted here help you already? If not, what's the specific problem you're having? – Genitalia

Unless you check "Create folder references for added folders" when you add the files to your project. – Prestige

One of one those moments.. Gah. Spending hours to frustration figuring out it was a to obvious solution – Stopover

What if you did want it to work with folders? How do you do this? Is the only way Miles comment answer? – Julian

Answer 2

The correct way to do this is to load the JS file as in a String and invoke the UIWebView's [stringByEvaluatingJavascriptFromString:@"Javascript here..."] method.

 NSString *filePath = [[NSBundle mainBundle] pathForResource:@"content" ofType:@"js" inDirectory:@""];
NSData *fileData = [NSData dataWithContentsOfFile:filePath];
NSString *jsString = [[NSMutableString alloc] initWithData:fileData encoding:NSUTF8StringEncoding];

[webView stringByEvaluatingJavaScriptFromString:jsString];

Although this isn't much different then hardcoding them into the html files, it does modularize it even more. Happy Coding :)

Skewness