javascript include in webview not working
I'm trying to include a js file (jquery-1.3.2.js copied from KitchenSink webview example) in an html page hosted in a webview:
var webview = Ti.UI.createWebView();
webview.url = 'test.html';
win1.add(webview);
and the html page code:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
</head>
<body style="height:0px;width:0px;">
<script>
Ti.API.info("Page is Loaded');
try{
$.ajax(...);
}catch(e){
Ti.API.error(e);
}
</script>
</body>
The page loads just fine in the webview (I can see the load message) BUT
I get an error messages saying that $ is undefined…
In KitchenSink it works perfectly (local_webview.html).
I even tried to copy the example "as is" (including all js, folder structure etc) to my project and it fails to load the js!
Tried running both in 1.2.0 AND 1.1.2 with same result.
Any clue?
Thanks,
Chen.
16 Answers
-
A working solution for this is to give your js files a different extension. In my case I used .jsf.
<script type="text/javascript" src="jquery-1.4.2.min.jsf"></script>Granted you'll lose syntax highlighting, so you'll likely have to rename back and forth until you're ready to sync with your device.
-
Hi Chen, I am having the exact same problem. I can't work it out at all and I have been trying for two days now.
The same code works fine in the iphone simulator but fails to fire in the ipad one. Normal JS is fine too. I can do alerts and messages. Just files won't load.
-
I'm having the problem too. Hello devs, please fix this.
-
Same here - trying many things without any progress. js Files just want load.
Any help from someone who solved this issue is appreciated,
Thanks,
Chen.
-
I even tried using normal script tags and then dynamically loading the files, both by using a document.write, and appending to the dom manually, but neither worked.
I am wondering if rather than our scripts not getting loaded, our scripts aren't getting included?
I am not on my testing computer right now, but if you have a chance check with the file system api if you can detect the actual files at runtime.
I just had a thought now, could we read the file contents, and then eval it as a string? Ugly workaround, but it might work.
-
ok, here is something for you. I copied the entire resources directory from KS over to my app. Webviews don't work anylonger in ks.
it must be something outside the resources folder that is required
-
Any update on this issue ?
I have the exact same problem, trying to use jQuery in a webview.
Tried :
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery-1.4.2.min.js"></script>But the only working solution is to include the code from a remote location :
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>Problem is, this won't work offline.
Any help would be GREATLY appreciated.
-
Is there a reason why this is neccesary in some places, but not in others (such as when a web view is created in an event listener versus not)
-
Very strange but I tried every solutions and my js file is never imported… A simple "alert" won't be executed and the debug console says that is a chromium error -6…
The html file is in "screens" directory, my jsfile too..I tried src=:
- jsfile.jsf
- ./jsfile.jsf
- screens/jsfile.js
- /screens/jsfile.jsf
- app://screens/jsfile.jsf
And same with ".js" extension… If I put my code inside "script" tag in my webview, it works… So, what is the correct solution to import jsfile in webview
-
Because I didn't found any solution… I now use a template system that I shared here:
titanium-template on githubIf you want to help, fork project and please send pull requests
Regards
-
also you can try this:
<script type="text/javascript"> document.write("<sc"+"ript type=\"text/javascript\" src=\"jquery.txt\"></scri"+"pt>"); </script>it worked for me.
-
1- for android application you have to put
<property name="ti.android.compilejs" type="bool">false</property>
to avoid processes all javascripts files on recources folder. so you can you relative paths as web development2- also keep in mind that don't use minify files
-
1- for android application you have to put
<property name="ti.android.compilejs" type="bool">false</property>
to avoid processes all javascripts files on recources folder. so you can you relative paths as web development2- also keep in mind that don't use minify files
-
Michael Reyes and Leslie Rohde
See Michael Reyes solution above. I confirm that this works as well. Leslie Rohde has a similar solution. Awesome job Michael and Leslie!!! Saved me a lot of trouble.
Thanks to You Both
-
Michael Reyes solution works fine for me. Also make sure to have a type="text/javascript" in your script tag to tell the browser (web view) how to handle the contents of your file. Finaly I added the .jsf file extension to content types list to get back code highlighting and validaton
-
The ultimate cause of this problem is likely buried deep in the Titanium tool chain somewhere, but the symptom I observed in my own successful resolution of this is that .js files in the Resources directory do not make it into your app as is – they are probably compiled to ObjC!
What I am doing is this:
var f0 = Titanium.Filesystem.getFile(Titanium.Filesystem.resourcesDirectory, 'jquery.txt'); var webkitScript0 = f0a.read().text; webview.evalJS(webkitScript0);Because I need to poke jquery into a remote page, but by extension I would think you could simply rename the jquery file as I have and make your html script tag load it under the changed name.