CSS jQuery

Todo app for iphone ipad using jquery mobile and web storage

I recently added article about web storage and demonstrated how to use local storage and session storage. So i thought to go further and create a application based on html5 web storage so that me and you all can better understand how web storage works and how it can be coded.     So here we are creating jquery mobile Iphone/Ipad application which is simple Todo app for iphone ipad using jquery mobile and web storage, where you can list your todo’s and once its completed you delete it from list. For this app i am using local storage so if you create a list and then come back after few days it will be there as it is, so you can use this app for your daily tasks management.
jquery mobile todo iphone ipad app
todo app for iphone ipad using jquery  mobile and web storage

Index.php

Clear

TODO

Add

<a href=”https://amitpatil.me/?s=iphone+ipad” data-theme=”b” data-icon=”star”>More iphone Apps</a> </div> </body> </html>

 

add_todo.html

Add TODO

Submit Cancel

24 Comments

  • Hi Amit. I noticed that when a note is a little long, you can’t see the rest of the text when viewed on small devices or when your browser is minimized. It shows … and when you click on it nothing happens.
    Is there any way to have it so when someone clicks on the message, it shows the rest of the message?

    • Kev, If you like to implement that functionality, open index.html file and make below changes to it, it will solve your problem.
      1) Locate the line which says // update todo list
      and replace the $("#todo_list").append('<li id="'+i+'"><a href="#" rel="nofollow">'+todo+'</a><a href="#" data-rel="dialog" data-
      transition="slideup" id="remove">Remove</a></li>');
      with $("#todo_list").append('<li id="'+i+'"><a href="#" rel="nofollow"><span style="white-space:normal;">'+todo+'</span></a><a href="#" data-rel="dialog" data-transition="slideup" id="remove" rel="nofollow">Remove</a></li>');

      Notice the change <span style="white-space:normal;">'+todo+'</span>

      2) Locate function create_new_list() in the same code and apply the same change, wrap '+todo+' with "<span style="white-space:normal;">+'todo'+</span>

      Or simply view source of the demo page and overwrite it with existing code in index.html page. Let me know if you have any problem with it.

    • Thank you for this example, it is really awesome.
      Is it possible to click on the item in the list and go to a seperate form and save additional information in that form?

      Thanks!
      Chris

    • hi amit. when you press ‘enter’, it doesn’t takes you back to the index page. it just refreshes and the dialog box where you enter your task comes up again. is there any way you can just press enter and not have to click submit everytime? thanks!

      • Yes it can be done, On keypress event check if keycode is 13 then call save_todo() function and return false; so form will not submit and todo will get saved.

  • Thanks for the quick response Amit. It worked perfectly, beautiful job.

    I have one more question for you. I noticed a link for docs-dialogs.html in the add_todo.html. I don’t have a page like that. Do I need it?

    Save

  • Hello Amit,
    I’m trying this out in Eclipse for an android app, but the clear and remove click functions won’t work. I’ve tried using the same versions of jquery and jquery mobile that you’re using, but still nothing. I’ve moved the js around: top, bottom, in the doc ready, but nothing again. Any ideas would be appreciated. Everything but clear and remove works. Thanks.

    • Are you trying o creae a app using Phonegap (cordova) ? As per my knowledge i believe that local storage is supported in android browsers so it should work. May be you would like to check is its really supported using below code

      if(typeof(Storage)!=="undefined")
      {
      // Yes! localStorage and sessionStorage support!
      }
      else
      {
      // Sorry! No web storage support..
      }

  • Thanks for this, it is awesome.

    Is it possible to click on an item in the list and go to a form to save additional information?

    Thanks!!
    Chris

  • Hey there! I just wanted to ask if you ever have any problems with hackers?
    My last blog (wordpress) was hacked and I ended up losing many months
    of hard work due to no backup. Do you have any methods to protect against hackers?

    • Its better to backup your blog data always. There are backup plugins too. Install one and be happy

  • Hello :). Just wanted to ask, where can I locate the saved todo list? And is ‘localStorage’ a fixed variable in HTML? Thank you.

  • How do you install this on IOS or do you have to package with some program? Can i just move the files to the ipad and click on the index.html file to get the website running?

    • I am not sure if it will work for you if you just copy them and run directly. But if you bundle those files with phonegap it will surely work.

Leave a Comment

*

Notify me of followup comments via e-mail. You can also subscribe without commenting.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Shares

Let your friends know what are you reading

Share this post with your friends!