NimbleKit - fast iOS app development

Javascript files not working? Here's how to fix the issue

Problem discussions

Javascript files not working? Here's how to fix the issue

Postby HalfMoon » Sun May 22, 2011 3:20 pm

After adding a javascript file to your app you may find that it isn't working as expected. This isn't a NimbleKit issue but rather the way Xcode deals with source code files.

Xcode will treat any source code file that you add to it as needing to be compiled (.c, .m .js & so on…) and hence adds it to the Compile Sources folder under the application target. However, we don't want Xcode to actually do this to our javascript files as it will then throw an error something like the code below:

Code: Select all
warning: no rule to process file '$(PROJECT_DIR)/KillerApp/script.js' of type sourcecode.javascript for architecture i386



--------------------------------------------------------------------------------------
Xcode 4
--------------------------------------------------------------------------------------

You'll know that there's an issue when using Xcode 4 as there will be a yellow warning icon in the central bezel:
xcodebezelwarning.png
xcodebezelwarning.png (8.59 KiB) Viewed 5386 times


You can also check for issues by clicking the warning icon above your file list:
showwarningsxcode4.png
showwarningsxcode4.png (31.22 KiB) Viewed 5386 times


This is how to move your .js file from the "Compile Sources" folder to the "Copy Bundle Resources" folder:
xcode4window.png
xcode4window.png (144.97 KiB) Viewed 5386 times


And courtesy of Big-O, here's a video demonstration

--------------------------------------------------------------------------------------
Xcode 3
--------------------------------------------------------------------------------------

It's a little easier to find in Xcode 3. Just drag the files from the Compile Sources folder to the Copy Bundle Resources folder. These are found in the Targets folder, in your Groups & Files pane (on the L/H side of Xcode 3)
xcode3drag.png
xcode3drag.png (183.09 KiB) Viewed 5386 times
User avatar
HalfMoon
NimbleKit Guru
 
Posts: 662
Joined: Thu Jun 04, 2009 6:21 pm
Location: Brighton, UK

Re: Javascript files not working? Here's how to fix the issu

Postby Big-O » Mon May 23, 2011 4:56 pm

Glad you posted this. It's a very common problem for new users.
-- Big-O
-- Nimblekit Guru, Web Developer, Hopeless Geek

I do freelance!
http://realisticweb.com
User avatar
Big-O
NimbleKit Guru
 
Posts: 1231
Joined: Thu Sep 24, 2009 4:02 am

Re: Javascript files not working? Here's how to fix the issu

Postby shmu » Thu May 26, 2011 11:42 am

Hello,

I'am using Jquery on my app, during all the test i have no problem, All jquery function worked perfectly.
Five days ago i had submited my app to the app store, and it was accepted, but when you download and launch it, all jquery functions don't working.

I'am not familiar with the new Xcode and build an app for production is always hard for a beginner like me :)

So if you have an idea or have the same problem ....


Thanks in advance
shmu
 
Posts: 31
Joined: Thu Mar 10, 2011 11:45 pm

Re: Javascript files not working? Here's how to fix the issu

Postby floz » Fri May 27, 2011 3:01 pm

Wow, that sounds scary! Please keep us posted if you find out anything!!
User avatar
floz
NimbleKit Guru
 
Posts: 272
Joined: Sat Feb 05, 2011 2:07 pm
Location: Newcastle, Australia

Re: Javascript files not working? Here's how to fix the issu

Postby HalfMoon » Fri May 27, 2011 5:55 pm

TBH I don't know why that would happen... I've not submitted an app built with Xcode 4 yet, so I can't comment on the build for distribution process and if there might be anything there that would cause this issue.
:|
User avatar
HalfMoon
NimbleKit Guru
 
Posts: 662
Joined: Thu Jun 04, 2009 6:21 pm
Location: Brighton, UK

Re: Javascript files not working? Here's how to fix the issu

Postby rwhg » Fri Jul 29, 2011 1:48 pm

Thanks, HalfMoon, for sharing this!

I knew how to do it in Xcode 3; this post was very helpful for Xcode 4.
http://russellgordon.ca/

"Goodness without knowledge... is weak and feeble, yet knowledge without goodness is dangerous.... Both united form the noblest character and lay the surest foundation of usefulness to mankind." -- John Phillips
User avatar
rwhg
 
Posts: 10
Joined: Thu Apr 14, 2011 4:11 pm

Re: Javascript files not working? Here's how to fix the issu

Postby Sean2122dd » Sat Nov 12, 2011 7:30 pm

GRRR I'm going insane here, I've followed your tutorial and it's still not executing the javascript.

Code: Select all
<html>
    <head>
        <meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
               
        <script type="text/javascript" src="NKit.js"></script>
        <script type="text/javascript">
            var navController = new NKNavigationController();
            navController.setTitle("Photo Gallery")
            navController.setTintColor(51,87,24);
            navController.show();
            </script>
       
        <script type="text/javascript" src="prototype.js"></script>
        <script type="text/javascript" src="effects.js"></script>
        <script type="text/javascript" src="showcase.js"></script>
       
        <style>
           
            #showcase {
                position: relative;
                width: 700px;
                height:170px;
            }
           
            #showcase li {
                width: 170px;
                height: 170px;
                float: left;
                list-style-type: none;
            }
           
            #showcase li img {
                width: 100%;
                height: 100%;
            }
            </style>
        <script>
            new Showcase.Vertical($$('#showcase li'), $$('a.controls'), {[options]});
            </script>
                   
    </head>
   
    <body>
       <a href="#next" class="controls" rel="next">Next</a>
        <a href="#previous" class="controls" rel="previous">Previous</a>
        <ul id="showcase">
            <li><img src="bowden.png" alt="1" /></li>
            <li><img src="bowden.png" alt="2" /></li>
            </ul>
       
       
       
       
       
   
       
    </body>
</html>
Attachments
rage.tiff
Inside "Copy Bundle Resources (136 items)"
rage.tiff (629.25 KiB) Viewed 4741 times
Sean2122dd
 
Posts: 58
Joined: Thu Oct 13, 2011 9:28 pm


Re: Javascript files not working? Here's how to fix the issu

Postby blazeman » Sat Nov 12, 2011 8:01 pm

You have 16 issues still. One of them could be a reason you are not getting the javascript to run. Until you can rule each of them out... I'd try and fix them.
User avatar
blazeman
NimbleKit Expert
 
Posts: 722
Joined: Sat May 30, 2009 5:58 pm

Re: Javascript files not working? Here's how to fix the issu

Postby Sean2122dd » Sun Nov 13, 2011 7:26 pm

blazeman wrote:You have 16 issues still. One of them could be a reason you are not getting the javascript to run. Until you can rule each of them out... I'd try and fix them.



Cleared all the warning issues but still nothing!

Code: Select all
<html>
    <head>
        <meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
               
        <script type="text/javascript" src="NKit.js"></script>
        <script type="text/javascript">
            var navController = new NKNavigationController();
            navController.setTitle("Photo Gallery")
            navController.setTintColor(51,87,24);
            navController.show();
            </script>
       
        <script type="text/javascript" src="prototype.js"></script>
        <script type="text/javascript" src="effects.js"></script>
        <script type="text/javascript" src="showcase.js"></script>

       
        <style>
           
            #showcase {
                position: relative;
                width: 700px;
                height:170px;
            }
           
            #showcase li {
                width: 170px;
                height: 170px;
                float: left;
                list-style-type: none;
            }
           
            #showcase li img {
                width: 100%;
                height: 100%;
            }
            </style>
       
    </head>
   
    <body>
       
        <a href="#next" class="controls" rel="next">Next</a>
        <a href="#previous" class="controls" rel="previous">Previous</a>
        <ul id="showcase">
            <li><img src="bowden.png" alt="1" /></li>
            <li><img src="bowden.png" alt="2" /></li>
            </ul>
       
        <script>
            new Showcase.Horizontal($$('#showcase li'), $$('a.controls'), {[options]});
            </script>
       
       
       
       
   
       
    </body>
</html>
Attachments
rage.tiff
rage.tiff (425.9 KiB) Viewed 4724 times
Sean2122dd
 
Posts: 58
Joined: Thu Oct 13, 2011 9:28 pm

Next

Return to Troubleshooting

Who is online

Users browsing this forum: No registered users and 1 guest