Articles tagged 'jquery'

Blog Projects

Drag and Drop File Upload With Google Gears

Google Gears is an extension which adds new features to you browser. It lets your browser to interact with the desktop. You can store data locally to an SQLite based database. Browser will also have a worker pool for running JavaScript code on the background.

Update 20091007: I updated the tutorial and demo to support dragging and dropping multiple files for uploading simultaneously.

Below is how you can do basic drag and drop file upload. Gears, PHP and jQuery are needed. If you want to try there is a working demo. All source code for the demo can be found from GitHub.

PHP for Receiving the Files

PHP has easy way of accessing uploaded files using $_FILES array. For demo’s sake I am assuming we should upload only image files. Nothing special here. Just you plain old upload script.

<?php

$error_message[0] = "Unknown problem with upload.";
$error_message[1] = "Uploaded file too large (load_max_filesize).";
$error_message[2] = "Uploaded file too large (MAX_FILE_SIZE).";
$error_message[3] = "File was only partially uploaded.";
$error_message[4] = "Choose a file to upload.";

$upload_dir  = './tmp/';
$num_files = count($_FILES['user_file']['name']);

for ($i=0; $i < $num_files; $i++) {
    $upload_file = $upload_dir . basename($_FILES['user_file']['name'][$i]);

    if (!preg_match("/(gif|jpg|jpeg|png)$/",$_FILES['user_file']['name'][$i])) {
        print "I asked for an image
  

Continue reading >>


WYSIWYG Inline Edit with Jeditable

Latest custom input for Jeditable uses jWYSIWYG editor by Juan M Martinez. This code has been almost ready for a while. This week I finally had time to fix some outstanding FireFox bugs.

If you are interested in writing your own Jeditable custom inputs...

Continue reading >>


PUT Support for Jeditable

Until now Jeditable only supported submitting edited data using POST method. This was against REST principles. POST should be used for creating new objects. PUT should be used for updating existing objects.

Most browsers do not natively support PUT

Continue reading >>


Jeditable and TinyMCE

I have been working with Sam Curren lately improving Jeditable custom input API. At the same time Sam has been working with his TinyMCE custom input.

Inline editing with TinyMCE has been requested several times in mailinglists and forums. After MarkItUp! and WYSIWYG (beta) it is now third content editor plugin for Jeditable.

TinyMCE input needs Jeditable 1.6.0 to work. Download it as source, minified or packed.

Changes Since 1.5.0

You can now call function when onblur is triggered.

$(".editable").editable("http://www.example.com/save.php", { 
    onblur : function(value, settings) {
        console.log(this);
        console.log(value);
        console.log(settings);
    }
});

You can now use any custom event for triggering Jeditable.

$(".editable").editable("http://www.example.com/save.php", { 
    event : "make_editable"
});

Submit button now defaults to <button type=“submit”> instad of <input type=“submit”>. Cancel button now defaults to <button type=“cancel”> instead of <input type=“button”>. This allows you style buttons with something
like:

.editable button[type=submit] {
  
  

Continue reading >>


MarkItUp! for Jeditable

In the heels of autogrow textarea comes next custom input for Jeditable. This time we will use markItUp! universal markup editor by Jay Salvat.

If you are not familiar with Jeditable custom inputs read the introduction. Also see autogrow and timepicker tutorials.

If you are just looking for the code download it here.

Creating custom input

Throughout the tutorial we will be using following code to trigger Jeditable. Note variable called markitupHTML . It holds configuration of used markItUp! tagset. In this example I use slightly modified HTML tagset. For more information on tagsets see markItUp! documentation.

$(".edit").editable("http://www.example.com/save.php", { 
    type      : "markitup",
    submit    : 'OK',
    cancel    : 'Cancel',
    tooltip   : "Click to edit.",
    onblur    : "ignore",
    markitup  : markitupHTML
});

Again we start by adding custom input type called markitup.

$.editable.addInputType('markitup', {
});

Right now code does not do much anything. It only creates the buttons and hidden input. Click text below to see it in action.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Add textarea element

Next we add texarea element. Unlike in previous tutorials we do not copy and paste code from default textarea element. Instead we use a shortcut:

$.editable.addInputType('markitup', {
    element : $.editable.types.textarea.element
});

Now normal textarea is added. Click text below to see how it works.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Attach markItUp! to textarea

We wanted to see pretty textarea with toolbar. First we search textarea input inside Jeditable form. This is done with $(‘textarea’, this) selector. Then we attach markItUp! to it.

$.editable.addInputType('markitup', {
    element : $.editable.types.textarea.element,
    plugin  : function(settings, original) {
        $('textarea', this).markItUp(settings.markitup);
    }
});

Now you can edit code with tag editor. Click text below to test yourself.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

And we are done. This illustrates how easy it is to customize Jeditable with other plugins. Only six lines of code can create pretty inline tag editor. There is also separate Textile demo. As always, all suggestions and feedback are welcome.