Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Added a default value for options and support for swipe up/down #394

Closed
wants to merge 3 commits into
from

Conversation

Projects
None yet
5 participants

I kept getting errors when calling var jQT = new $.jQTouch();, but not when running var jQT = new $.jQTouch({}); so I have set a default value for the options argument.

@davidkaneda davidkaneda was assigned Mar 15, 2012

ns-1m commented Mar 20, 2012

@danjordan

I got this error in porting this app.

http://www.ibm.com/developerworks/opensource/library/os-html5data/

ReferenceError: Can't find variable: jQuery JQTouch/src/jqtouch.js:
763TypeError: Result of expression 'options' [undefined] is not an object.

Try downloading this and see if you can make it working.

Thanks.

Can you provide a reduced case for this error please? Possibly in http://jsfiddle.net/

ns-1m commented Mar 20, 2012

I don't know how to setup a jQTouch framework in http://jsfiddle.net/

Setup a jQTouch (this version) in jsfiddle.net and I will edit it to include the code found the the URL that I mentioned.

Thanks.

The instructions for the index.html file are wrong if you want to use jquery. You still need this file:

/jqtouch.min.js" type="text/javascript" charset="utf-8"

Without this file you will received the error of missing $

ns-1m commented Mar 24, 2012

I could not see any jqtouch.min.js in JQTouch.

These are only jqtouch_._ that I could find:

  • jtouch.js
  • jtouch-jquery.js

While the jquery are:

  • jquery-1.7.js
  • jquery-1.7.min.js

Probably meant jquery.min.js (i.e. jquery-1.7.min.js in this case).

In this new b4, if you want to use jQuery do, we need to include the following (below) in order for AJAX to work (e.g. jQTouch file)?

  • jtouch.js
  • jtouch-jquery.js
  • jquery-1.7.min.js

ns-1m commented Mar 25, 2012

I just check my project again.

I got this line in the project.

   <script src="./jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="./jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>

Yet the could not still get the AJAX call, in this example.
http://www.ibm.com/developerworks/opensource/library/os-html5data/

ns-1m commented Mar 28, 2012

OK. Sorted this jqtouch.min.js" type="text/javascript" charset="utf-8"

However, I still got the $ error and page is blank.

The code is this:

div id="recipe4" class="recipe">
div class="toolbar">
h1>Recipe of the Day
a class="back" href="#">Back
/div>

  • At request time the recipe will be populated here -->
    /div>
    <--

-->
And I will load the JSON file (i.e. sample.json).

   (sample.json)
       [ { "title" : "Doggie Delight", "ingredients" :  ["1 cup dry kibble", "1 pound butter",
            "1 beef bouillon cube", "2 tbsp oregano" ], "instructions": "Combine all ingredients in bowl. Season to
          taste.  Serve immediately." }]

This is the sample.js.

      /* Initialize jQTouch on startup. 

           This code comes directly from jQTouch.
        */
     var jQT = new $.jQTouch({
      icon: 'jqtouch.png',
      addGlossToIcon: false,
     startupScreen: 'jqt_startup.png',
     statusBar: 'black',

preloadImages: [
'../../themes/jqt/img/back_button.png',
'../../themes/jqt/img/back_button_clicked.png',
'../../themes/jqt/img/button_clicked.png',
'../../themes/jqt/img/grayButton.png',
'../../themes/jqt/img/whiteButton.png',
'../../themes/jqt/img/loading.gif'
]
});

// Any methods for onload go here.
jQuery(document).ready(function () {

// If online, show all online-only resources
if (window.navigator.onLine) {
jQuery('.online-required').show();
}

// Query for the recipe-of-the-day if the user selects the menu item
jQuery('#recipe4').bind('pageAnimationStart', function () {

// This routine should only populate the DOM once, so check if we have loaded before
if (!$(this).data('loaded')) {
  jQuery.ajax({ url: "sample.json",
              success: function (data) {

                // Set the recipe title
                jQuery('#recipe4 h1').text(data[0].title);


                // Create a UL and add each recipe item to it
                var ul = jQuery('<ul class="rounded">');
                jQuery.each(data[0].ingredients, function (index, item) {
                  jQuery('<li>').text(item).appendTo(ul);
                });

                // Add the ingredients list and the recipe instructions
                jQuery('#recipe4').append(ul).append(
                  jQuery('<p>').text(data[0].instructions)
                );                    
              },
              error: function (e, e2, e3) {
                // Error-handling
              },
              dataType: 'json'
            }
            );
  $(this).data('loaded', true);
}

});
});

I have changed the default folders but the files are the same:

<style type="text/css" media="screen">@import "themes/jqt/jqtouch.css";</style>
<style type="text/css" media="screen">@import "css/imicas.css";</style>
<script src="jqtouch/lib/jquery-1.7.js" type="text/javascript" charset="utf-8"></script>
<script src="jqtouch/jqtouch.js" type="text/javascript" charset="utf-8"></script>
<script src="jqtouch/jqtouch-jquery.js" type="application/x-javascript" charset="utf-8"></script>

ns-1m commented Mar 28, 2012

Yes, I mentioned I sort that out.

<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript" charset="utf-8" src="NativeControls.js"></script>
    <link rel="stylesheet" href="./themes/css/apple.css" title="jQTouch">
    <!-- Uncomment the following two lines (and comment out the previous two) to use jQuery instead of Zepto. -->
    <script src="./src/lib/jquery-1.7.min.js" type="application/x-javascript" charset="utf-8"></script> 
    <script src="./src/jqtouch-jquery.min.js" type="application/x-javascript" charset="utf-8"></script>

    <script src="./src/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>
Member

thomasyip commented Dec 18, 2012

We have refactored related code since. Swipeup / down were added (by bringing in touch.js from Zepto). undefined error was fixed in jquery-jqtouch2.js.

I am closing this. Let me know if I missed anything.

@thomasyip thomasyip closed this Dec 18, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment