jQuery possible in webView?

Discussion in 'iOS Programming' started by Danneman101, Mar 5, 2011.

  1. Danneman101 macrumors 6502

    Joined:
    Aug 14, 2008
    #1
    I'm wondering if it's possible to use jQuery inside local html-files loaded into a webview?

    I'm trying to construct a sortable tableview using jQuery as per this page:
    http://tablesorter.com/docs/

    Unfortunately, my attempts are not going so well.

    Below is my attempt, and it tries to automatically sort the table in ascending order of the first column. The js-files are simply dragged into the project (into the same folder as the html-file).

    .html
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <title></title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, minimum-scale=0.1, maximum-scale=1.6">
        <meta name="apple-mobile-web-app-capable" content="YES">
        <link rel="stylesheet" href="main.css">
    
    	<script type="text/javascript" src="jquery-1.5.1.mini.js"></script> 
    	<script type="text/javascript" src="jquery.tablesorter.min.js"></script> 
    
    </head>
    
    
    <body>
    
    <script type="text/javascript">
    	$(document).ready(function() { 
    		// call the tablesorter plugin 
    		$("table").tablesorter({ 
    			// sort on the first column and third column, order asc 
    			sortList: [0,0] 
    		}); 
    	}); 
    </script>
    
    <table id="myTable" class="tablesorter"> 
    <thead> 
    <tr> 
        <th>Last Name</th> 
        <th>First Name</th> 
        <th>Email</th> 
        <th>Due</th> 
        <th>Web Site</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
        <td>Smith</td> 
        <td>John</td> 
        <td>jsmith@gmail.com</td> 
        <td>$50.00</td> 
        <td>http://www.jsmith.com</td> 
    </tr> 
    <tr> 
        <td>Bach</td> 
        <td>Frank</td> 
        <td>fbach@yahoo.com</td> 
        <td>$50.00</td> 
        <td>http://www.frank.com</td> 
    </tr> 
    <tr> 
        <td>Doe</td> 
        <td>Jason</td> 
        <td>jdoe@hotmail.com</td> 
        <td>$100.00</td> 
        <td>http://www.jdoe.com</td> 
    </tr> 
    <tr> 
        <td>Conway</td> 
        <td>Tim</td> 
        <td>tconway@earthlink.net</td> 
        <td>$50.00</td> 
        <td>http://www.timconway.com</td> 
    </tr> 
    </tbody> 
    </table> 
    
    </body>
    </html>
    
     
  2. chown33 macrumors 604

    Joined:
    Aug 9, 2009
    #2
    1. Describe what you expected to happen.
    2. Describe what actually happened.

    "Not going so well" is not a description.
     
  3. Danneman101 thread starter macrumors 6502

    Joined:
    Aug 14, 2008
    #3
    Point taken :)

    Well, the table appears, but it does not sort which I expected from the function-call:

    Code:
    <script type="text/javascript">
    	$(document).ready(function() { 
    		// call the tablesorter plugin 
    		$("table").tablesorter({ 
    			// sort on the first column and third column, order asc 
    			sortList: [0,0] 
    		}); 
    	}); 
    </script>
    
     
  4. chown33 macrumors 604

    Joined:
    Aug 9, 2009
    #4
    (A) What happens when you open the html file (and load the js files) from Safari running on a Mac? Confirm whether it works at all when used on a WebKit browser.

    (B) What happens when you store the html file (and js files, etc.) on a web server, or put them in a sharable place on the Mac then enable web sharing. If you load the web page from a Mac, does it work? If you load the web page from an iPhone, does it work?

    (C) Is it something simple like a file not getting copied into the iPhone build? Are there any console or debugging messages on iPhone due to browser?


    (A) establishes basic go/no-go functionality. If the page doesn't work at all, with any WebKit browser, then the fact that it doesn't work when stored locally on iPhone is irrelevant. You first need to make the page work.

    (B) establishes whether it works or fails from a web-server, and whether it works or fails on two different clients: Mac and iPhone. If it works on Mac client but not iPhone, then you may have an iPhone-dependent bug in the html or js or css. If it works on both, then you can proceed to the iPhone-resident files.

    (C) establishes whether the build has all the parts to work or not. If it's missing a part, then it can't work.


    Enabling the Debugging Console on iOS Safari:
    http://developer.apple.com/library/...neContent/DebuggingSafarioniPhoneContent.html
     

Share This Page