I'm getting a blank screen when I try to load java script into a web view

Question

Here's my code:

- (void)viewDidLoad
{
[super viewDidLoad];
NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSError *error;
NSURL *baseURL = [NSURL fileURLWithPath:path];
NSString *html = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:&error];
NSLog(@"%@", html);
[webview loadHTMLString:html baseURL:baseURL];
NSLog(@"error: %@", error);
}

Here's the contents of the html:

<html>
<head>
<script src="jquerymin.js"></script>
<script src="highcharts.js"></script>
<script src="exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

<script src="script.js"></script>
Test

<input type="button" id="button" />
</body>

</html>

Script.js:

$(function () {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Therapist productivity by Region'
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Therapist Productivity',
            data: [
                ['South Carolina',   45.0],
                ['Michigan',       26.8],
                {
                    name: 'California',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Florida',    8.5],
                ['New York',     6.2],
                ['Maine',   0.7]
            ]
        }]
    });
});

});

$('#button').click(function() {
$(chart.container).hide();
chart.series[0].remove();
$(chart.container).show();
});

When I run my code, the button from the HTML and "Test" show up on the screen, but not the contents of the .js files being loaded. Am I doing this right?

Have you attempted to load this code in a desktop browser? What happens? — Jim, Jul 31 '12 at 20:20
First add `alert('Done.');` to the bottom of `script.js`. Is it being run on the device? Maybe move it to ``. Next empty `script.js` of every thing except `$('#button').click(function() { alert('clicked'); });` Is this getting fired when the button is tapped/clicked? You might then try `.on('click', ...)` and next, though I don't think taps register as `tap` try `.on('tap', ...)`. Just some more thoughts. — Brett Pontarelli, Aug 01 '12 at 00:49

score 0 · Answer 1 · answered Jul 31 '12 at 20:09

0

This should probably be a comment, but I don't have enough rep, so you're getting an "answer".

I don't know if you mean you can't physically see your js code in the source, or if you can't see the results of what it is supposed to do. If you mean the former: calling the script.js with the script tag, will not embed your code inline in your html. If the latter: your js code should either get called using the onload attribute or the ready listener. If you provide your script.js, I can be of more help.

Either way, a good place to start would be to validate your html code: http://validator.w3.org/

answered Jul 31 '12 at 20:09

Dan Collins

1,018
1
11
20

I see you've uploaded your code. As Jim mentioned, have you tried running this in a regular browser? My jQuery is a little rusty, but I would try commenting out "$(function () {" on the first line, and the "});" line right above the "$('#button')....." line, because I think that might be preventing the .ready() function from firing, but I could be mistaken. – Dan Collins Jul 31 '12 at 20:26
I tried to comment those lines out and I'm still running into the same issue. When I open the index.html file from the desktop, it works fine in the browser. But when I use the above code, all that outputs is Test – Sean Smyth Jul 31 '12 at 21:53

score 0 · Answer 2 · edited May 23 '17 at 11:55

Try escaping the backslashes and spaces in your baseURL. Joe D'Andrea has a good answer on a similar (but not quite duplicate) question. To summarize:

 NSString *resourcePath = [[[[NSBundle mainBundle] resourcePath]
     stringByReplacingOccurrencesOfString:@"/" withString:@"//"]
     stringByReplacingOccurrencesOfString:@" " withString:@"%20"];
 [webView loadHTMLString:markup baseURL:[NSURL URLWithString:
     [NSString stringWithFormat:@"file:/%@//", resourcePath]]];

score 0 · Accepted Answer · answered Aug 02 '12 at 17:00

0

The problem was that I never brought the .js files over to Copy Bundle Resources under Build Phases. I moved the files over and it worked perfectly

answered Aug 02 '12 at 17:00

Sean Smyth

1,509
3
25
43

Wat if the .html file and the .js file a required to be in the Sand box of the App instead of the App bundle(I am stuck here.)? – Ishank Oct 30 '12 at 12:41

I'm getting a blank screen when I try to load java script into a web view

3 Answers3