Create a Dynamic Content Editing System: New Premium Tut
plusvideos

Create a Dynamic Content Editing System: New Premium Tut

on Mar 3rd 2011 with 25 comments
Tutorial Details
  • Topic: jQuery UI Widget Factory
  • Difficulty: Intermediate - Advanced
  • Availability: Premium or Tuts+ Marketplace
Download Source Files

In this week’s in depth Premium tutorial – in both written and video formats – we are going to learn how to create a dynamic content editing system using the jQuery UI Widget Factory. We’ll go over how to develop a logical, object orientated jQuery UI Widget, transform various nodes to editable text fields, delegate events within the widget framework, manage context, toggle icons, serialize data, and of course edit, restore and delete data using jQuery’s fantastic AJAX functionality!

Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

Example

Join Net Premium

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of Tuts+ sites runs a premium membership service. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+ For the price of a pizza, you’ll learn from some of the best minds in the business. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I am an independent Web Developer who enjoys working with PHP, JavaScript, HTML, CSS and PhotoShop. I'm an enthusiast of the CodeIgniter PHP Framework as well as the jQuery JavaScript library and am hoping to learn Ruby in the near future.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.learneveryda.net arifur rahman

    Nice tutorial. Is there any way to subscribe nettus without paypal. Do you apply a option to subscribe one month by master card. As some country do not support pay pal.

  • philwinkle

    Why is it so hard to log in and get to the premium content for paying customers??? I can never figure it out and I’ve given up more than one time..

    • http://www.jeffrey-way.com Jeffrey Way

      There’s two links at the top of this article, or, you can sign in at tutsplus.com.

      • k

        yeah I’m having the same issue as philwinkle. I signed up and paid, but now I’m trying to look for the “Read more” link. I logged in and there are still ads to sign up. I just want to read this article.

        thanks

    • Mickey

      I, too, did not understand why there is no video, but then I saw “members area” at the top-right, near “Hello” and “logout”. Go there, find the tutorial and there will be “view screen cast” for videos.

      Hope it helped

  • Nikola Malich
    Author

    Thanks! :D

    You can use PayPal or MoneyBooks to sign up for premium.

    Nettuts+ Signup

  • David S

    So where is this premium article to be found??????

  • ronka

    Can you show a demo?

  • noname

    Are you from Ukraine or what?

  • Eastern Block

    Okay, this tut is the one that has pushed me to re-up my premium status. You had me at jQuery UI Widget Factory…

  • Ben

    Sorry for off topic, but I don’t understand your useless fucking search function at the top right of this website. I _NEVER_ find anything when I’m searching something. For example: I searched for “Vim” because I want all your articles and tuts about Vim (which I really like by the way) but instead of results related to Vim I get a list of all recent news/tuts/articles on the start page. WTF?!

    Sorry for posting this here but your contact form stuff is also annoying. I dont want to make nettuts bad, I like your tuts etc., but this is just nerve-wracking and need to be fixed.

    • http://t2p.se Fredrik

      Same for me! The search function won’t work, no matter what i type!

    • http://www.DealPage.ca wes bos

      Yeah, the wordpress search is garbage.

      http://lmgtfy.com/?q=site%3Atutsplus.com+vim

    • http://www.jeffrey-way.com Jeffrey Way

      Hey guys — yeah, it’s broken at the moment. It’s in the process of being fixed.

      • eu4ria

        I too have felt your search pain so what i do is use the “site:” prefix in google to limit searching to a single domain. So enter into google this

        site:tutsplus.com vim

        Damn, maybe I should have submitted this as a quick tip and made some money :D

  • http://www.shiftedwork.de/blog/ Daniel S

    Nice Article. I personally hate graphical captchas where i have to decode hyroglyphics. For our german readers, i’ve written a similar article last year: http://www.shiftedwork.de/blog/2010/08/10/spam-bekampfen-aber-richtig/

    • Adam A

      I really dig the ‘full’ version of your logo – nice!

  • Adam A

    Great article! However, in the short code snippets throughout the page, there are commas at the end of quite a few statements when they should be semi-colons. (i.e. ‘Properties’ section for _create function)

    • Nikola Malich
      Author

      Good catch and you’re absolutely right. JSLint actually pointed that out to me and although I updated the source code with semi-colons, it looks like I didn’t update a few of the snippits – force of habit from variable initializations / definitions. Yeesh! haha

      Thanks for the heads up and the update has been submitted!! :D

  • Purple

    Thanks Nikola.

    This is an Incredibly well done tutorial! I love and highly recommend it. Picked up a lot of new things.

    P.S. If $9 a month for information like this is not a bargain, I don’t know what is.

  • flo

    for me the “save” function juste doesn’t work, even in the demo :(

    • Pab

      Same here, it doesn’t work in the Demo.

      • http://marketplace.tutsplus.com/user/NikolaMalich?ref=NetPremium Nikola Malich
        Author

        It’s just the dummy url for the AJAX calls: “http://localhost/ui.editable.tut/demo/”

        Just update or remove them from the widget setup..

  • http://www.gratisws.se Fronix

    This is very neat!

    Though after i have saved something i want it to update and then take the edit part away or is this just because its html and nothing really gets updated?

  • Xafar

    I cannot find video tutorial links to this one? Can you tell me where is the link to its videos?