Unable to add custom js in main html file..

Thu Mar 07, 2013 6:56 am

Hi..
i;ve created a todo app and able to add task and delete them but i;d like click to edit task with textbox..and i also create a custom javascript in my project but unable to add in main html file like startscreen.html coz without this i cannot call the function..
i m giving u an external link of example..u can add task and when u;ll click on task then it'll b editable..
"http://yuilibrary.com/yui/docs/app/ap..."..
thanks

Thu Mar 07, 2013 9:14 am

Hello! There is no need to add JS to html file. Just click Create New - JavaScript

Thu Mar 07, 2013 9:16 am

yeah...and created a new js from create new bt its not working with my app...

Thu Mar 07, 2013 9:19 am

did u see the link- "http://yuilibrary.com/yui/docs/app/ap..."
here is an example of which i want...

Thu Mar 07, 2013 10:00 am

It's not that easy to merge that code with Tiggzi Backend Services. It would be easier to make todo app using just Tiggzi functionality. Here is an example http://docs.tiggzi.com/tutorials/buil...

Fri Mar 08, 2013 6:13 am

Hi.. im enclosing my app code so u can understand..and i want to implement this on tiggzi..
code:-

#todo-app {
margin: 1em;
text-align: center;
}

#todo-list,
#todo-stats {
margin: 1em auto;
text-align: left;
width: 450px;
}

#todo-list {
list-style: none;
padding: 0;
}

#todo-stats,
.todo-clear { color: #777; }

.todo-clear { float: right; }

.todo-done .todo-content {
color: #666;
text-decoration: line-through;
}

.todo-edit,
.editing .todo-view { display: none; }

.editing .todo-edit { display: block; }

.todo-input {
display: block;
font-family: Helvetica, sans-serif;
font-size: 20px;
line-height: normal;
margin: 5px auto 0;
padding: 6px;
width: 420px;
}

.todo-item {
border-bottom: 1px dotted #cfcfcf;
font-size: 20px;
padding: 6px;
position: relative;
}

.todo-label {
color: #444;
font-size: 20px;
font-weight: bold;
text-align: center;
}

.todo-remaining {
color: #333;
font-weight: bold;
}

.todo-remove {
position: absolute;
right: 0;
top: 12px;
}

.todo-remove-icon {
/*
Delete icon courtesy of The Noun Project:
http://thenounproject.com/noun/delete/
*/
background: url(../assets/app/remove.png) no-repeat;
display: block;
height: 16px;
opacity: 0.6;
visibility: hidden;
width: 23px;
}

.todo-remove:hover .todo-remove-icon { opacity: 1.0; }

.todo-hover .todo-remove-icon,
.todo-remove:focus .todo-remove-icon { visibility: visible; }

.editing .todo-remove-icon { visibility: hidden; }

<!-- This is the main container and "shell" for the todo app. --

<!-- This template HTML will be used to render each todo item. --

<!-- This template HTML will be used to render the statistics at the bottom
of the todo list. --

<!-- Include YUI on the page if you haven't already. --

keypresses on the "new todo" input field.
'#new-todo': {keypress: 'createTodo'},

Code: Select all

     // Clear all completed items from the list when the "Clear" link is 
     // clicked. 
     '.todo-clear': {click: 'clearDone'}, 

     // Add and remove hover states on todo items. 
     '.todo-item': { 
         mouseover: 'hoverOn', 
         mouseout : 'hoverOff' 
     } 
 }, 

 // The 'template' property is a convenience property for holding a 
 // template for this view. In this case, we'll use it to store the 
 // contents of the #todo-stats-template element, which will serve as the 
 // template for the statistics displayed at the bottom of the list. 
 template: Y.one('#todo-stats-template').getHTML(), 

 // The initializer runs when a TodoAppView instance is created, and gives 
 // us an opportunity to set up the view. 
 initializer: function () { 
     // Create a new TodoList instance to hold the todo items. 
     var list = this.todoList = new TodoList(); 

     // Update the display when a new item is added to the list, or when the 
     // entire list is reset. 
     list.after('add', this.add, this); 
     list.after('reset', this.reset, this); 

     // Re-render the stats in the footer whenever an item is added, removed 
     // or changed, or when the entire list is reset. 
     list.after(['add', 'reset', 'remove', 'todoModel:doneChange'], 
             this.render, this); 

     // Load saved items from localStorage, if available. 
     list.load(); 
 }, 

 // The render function is called whenever a todo item is added, removed, or 
 // changed, thanks to the list event handler we attached in the initializer 
 // above. 
 render: function () { 
     var todoList = this.todoList, 
         stats    = this.get('container').one('#todo-stats'), 
         numRemaining, numDone; 

     // If there are no todo items, then clear the stats. 
     if (todoList.isEmpty()) { 
         stats.empty(); 
         return this; 
     } 

     // Figure out how many todo items are completed and how many remain. 
     numDone      = todoList.done().length; 
     numRemaining = todoList.remaining().length; 

     // Update the statistics. 
     stats.setHTML(Y.Lang.sub(this.template, { 
         numDone       : numDone, 
         numRemaining  : numRemaining, 
         doneLabel     : numDone === 1 ? 'task' : 'tasks', 
         remainingLabel: numRemaining === 1 ? 'task' : 'tasks' 
     })); 

     // If there are no completed todo items, don't show the "Clear 
     // completed items" link. 
     if (!numDone) { 
         stats.one('.todo-clear').remove(); 
     } 

     return this; 
 }, 

 // -- Event Handlers ------------------------------------------------------- 

 // Creates a new TodoView instance and renders it into the list whenever a 
 // todo item is added to the list. 
 add: function (e) { 
     var view = new TodoView({model: e.model}); 

     this.get('container').one('#todo-list').append( 
         view.render().get('container') 
     ); 
 }, 

 // Removes all finished todo items from the list. 
 clearDone: function (e) { 
     var done = this.todoList.done(); 

     e.preventDefault(); 

     // Remove all finished items from the list, but do it silently so as not 
     // to re-render the app view after each item is removed. 
     this.todoList.remove(done, {silent: true}); 

     // Destroy each removed TodoModel instance. 
     Y.Array.each(done, function (todo) { 
         // Passing {remove: true} to the todo model's 'destroy()' method 
         // tells it to delete itself from localStorage as well. 
         todo.destroy({remove: true}); 
     }); 

     // Finally, re-render the app view. 
     this.render(); 
 }, 

 // Creates a new todo item when the enter key is pressed in the new todo 
 // input field. 
 createTodo: function (e) { 
     var inputNode, value;

//alert(e.keyCode);
if (e.keyCode === 13) { // enter key
inputNode = this.get('inputNode');
value = Y.Lang.trim(inputNode.get('value'));

Code: Select all

         if (!value) { return; } 

         // This tells the list to create a new TodoModel instance with the 
         // specified text and automatically save it to localStorage in a 
         // single step. 
         this.todoList.create({text: value}); 

         inputNode.set('value', ''); 
     } 
 }, 

 // Turns off the hover state on a todo item. 
 hoverOff: function (e) { 
     e.currentTarget.removeClass('todo-hover'); 
 }, 

 // Turns on the hover state on a todo item. 
 hoverOn: function (e) { 
     e.currentTarget.addClass('todo-hover'); 
 }, 

 // Creates and renders views for every todo item in the list when the entire 
 // list is reset. 
 reset: function (e) { 
     var fragment = Y.one(Y.config.doc.createDocumentFragment()); 

     Y.Array.each(e.models, function (model) { 
         var view = new TodoView({model: model}); 
         fragment.append(view.render().get('container')); 
     }); 

     this.get('container').one('#todo-list').setHTML(fragment); 
 }

}, {
ATTRS: {
// The container node is the wrapper for this view. All the view's
// events will be delegated from the container. In this case, the
// #todo-app node already exists on the page, so we don't need to create
// it.
container: {
valueFn: function () {
return '#todo-app';
}
},

Code: Select all

     // This is a custom attribute that we'll use to hold a reference to the 
     // "new todo" input field. 
     inputNode: { 
         valueFn: function () { 
             return Y.one('#new-todo'); 
         } 
     } 
 }

});

// -- Todo item view -----------------------------------------------------------

// The TodoView class extends Y.View and customizes it to represent the content
// of a single todo item in the list. It also handles DOM events on the item to
// allow it to be edited and removed from the list.

TodoView = Y.TodoView = Y.Base.create('todoView', Y.View, [], {
// This customizes the HTML used for this view's container node.
containerTemplate: '',

Code: Select all

 // Delegated DOM events to handle this view's interactions. 
 events: { 
     // Toggle the "done" state of this todo item when the checkbox is 
     // clicked. 
     '.todo-checkbox': {click: 'toggleDone'}, 

     // When the text of this todo item is clicked or focused, switch to edit 
     // mode to allow editing. 
     '.todo-content': { 
         click: 'edit', 
         focus: 'edit' 
     }, 

     // On the edit field, when enter is pressed or the field loses focus, 
     // save the current value and switch out of edit mode. 
     '.todo-input'   : { 
         blur    : 'save', 
         keypress: 'enter' 
     }, 

     // When the remove icon is clicked, delete this todo item. 
     '.todo-remove': {click: 'remove'} 
 }, 

 // The template property holds the contents of the #todo-item-template 
 // element, which will be used as the HTML template for each todo item. 
 template: Y.one('#todo-item-template').getHTML(), 

 initializer: function () { 
     // The model property is set to a TodoModel instance by TodoAppView when 
     // it instantiates this TodoView. 
     var model = this.get('model'); 

     // Re-render this view when the model changes, and destroy this view 
     // when the model is destroyed. 
     model.after('change', this.render, this); 

     model.after('destroy', function () { 
         this.destroy({remove: true}); 
     }, this); 
 }, 

 render: function () { 
     var container = this.get('container'), 
         model     = this.get('model'), 
         done      = model.get('done'); 

     container.setHTML(Y.Lang.sub(this.template, { 
         checked: done ? 'checked' : '', 
         text   : model.getAsHTML('text') 
     })); 

     container[done ? 'addClass' : 'removeClass']('todo-done'); 
     this.set('inputNode', container.one('.todo-input')); 

     return this; 
 }, 

 // -- Event Handlers ------------------------------------------------------- 

 // Toggles this item into edit mode. 
 edit: function () { 
     this.get('container').addClass('editing'); 
     this.get('inputNode').focus(); 
 }, 

 // When the enter key is pressed, focus the new todo input field. This 
 // causes a blur event on the current edit field, which calls the save() 
 // handler below. 
 enter: function (e) { 
     if (e.keyCode === 13) { // enter key 
         Y.one('#new-todo').focus(); 
     } 
 }, 

 // Removes this item from the list. 
 remove: function (e) { 
     e.preventDefault(); 

     this.constructor.superclass.remove.call(this); 
     this.get('model').destroy({'delete': true}); 
 }, 

 // Toggles this item out of edit mode and saves it. 
 save: function () { 
     this.get('container').removeClass('editing'); 
     this.get('model').set('text', this.get('inputNode').get('value')).save(); 
 }, 

 // Toggles the 'done' state on this item's model. 
 toggleDone: function () { 
     this.get('model').toggleDone(); 
 }

});

// -- localStorage Sync Implementation -----------------------------------------

// This is a simple factory function that returns a 'sync()' function that can
// be used as a sync layer for either a Model or a ModelList instance. The
// TodoModel and TodoList instances above use it to save and load items.

function LocalStorageSync(key) {
var localStorage;

Code: Select all

 if (!key) { 
     Y.error('No storage key specified.'); 
 } 

 if (Y.config.win.localStorage) { 
     localStorage = Y.config.win.localStorage; 
 } 

 // Try to retrieve existing data from localStorage, if there is any. 
 // Otherwise, initialize 'data' to an empty object. 
 var data = Y.JSON.parse((localStorage && localStorage.getItem(key)) || '{}'); 

 // Delete a model with the specified id. 
 function destroy(id) { 
     var modelHash; 

     if ((modelHash = data[id])) { 
         delete data[id]; 
         save(); 
     } 

     return modelHash; 
 } 

 // Generate a unique id to assign to a newly-created model. 
 function generateId() { 
     var id = '', 
         i  = 4; 

     while (i--) { 
         id += (((1 + Math.random()) * 0x10000) | 0) 
                 .toString(16).substring(1); 
     } 

     return id; 
 } 

 // Loads a model with the specified id. This method is a little tricky, 
 // since it handles loading for both individual models and for an entire 
 // model list. 
 // 
 // If an id is specified, then it loads a single model. If no id is 
 // specified then it loads an array of all models. This allows the same sync 
 // layer to be used for both the TodoModel and TodoList classes. 
 function get(id) { 
     return id ? data[id] : Y.Object.values(data); 
 } 

 // Saves the entire 'data' object to localStorage. 
 function save() { 
     localStorage && localStorage.setItem(key, Y.JSON.stringify(data)); 
 } 

 // Sets the id attribute of the specified model (generating a new id if 
 // necessary), then saves it to localStorage. 
 function set(model) { 
     var hash        = model.toJSON(), 
         idAttribute = model.idAttribute; 

     if (!Y.Lang.isValue(hash[idAttribute])) { 
         hash[idAttribute] = generateId(); 
     } 

     data[hash[idAttribute]] = hash; 
     save(); 

     return hash; 
 } 

 // Returns a 'sync()' function that can be used with either a Model or a 
 // ModelList instance. 
 return function (action, options, callback) { 
     // 'this' refers to the Model or ModelList instance to which this sync 
     // method is attached. 
     var isModel = Y.Model && this instanceof Y.Model; 

     switch (action) { 
     case 'create': // intentional fallthru 
     case 'update': 
         callback(null, set(this)); 
         return; 

     case 'read': 
         callback(null, get(isModel && this.get('id'))); 
         return; 

     case 'delete': 
         callback(null, destroy(isModel && this.get('id'))); 
         return; 
     } 
 };

}

// -- Start your engines! ------------------------------------------------------

// Finally, all we have to do is instantiate a new TodoAppView to set everything
// in motion and bring our todo list into existence.
new TodoAppView();

});

Code: Select all

 What do you want to do today? 

 ul/ul 

     span class="todo-content"{text}/span 

 [url=http://#] 
     span class="todo-remove-icon"/span 
 [/url] 

 span class="todo-count" 
     span class="todo-remaining"{numRemaining}/span 
     span class="todo-remaining-label"{remainingLabel}/span left. 
 /span 

              [url=http://#] 
     Clear span class="todo-done"{numDone}/span 
     completed span class="todo-done-label"{doneLabel}/span 
 [/url]

Fri Mar 08, 2013 5:31 pm

It's very easy to add 3rd party JavaScript to your app (Marina showed you above). There is a lot of custom JavaScript -- that falls outside the scope of our support.

Mon Mar 11, 2013 5:28 am

sir i've done that but still have some prblm like when i click on test button then app is working but page is continously refreshing in the mobile screen..why its happening sir..??

Mon Mar 11, 2013 5:30 am

Hi marina..
i've done that but still have some prblm like when i click on test button then app is working but page is continously refreshing in the mobile screen..why its happening..??

Mon Mar 11, 2013 5:32 am

It's outside the scope of our support to debug 3rd party JavaScript code. I hope you understand. It has nothing to do with Tiggzi platform.