Manipulate Element in jQuery

Here are some frequently used functions in jQuery to handle DOM elements

1. empty() removes all child elements and other child nodes (such as text nodes) from each element in the matched set, leaving the selector element empty
2. remove() removes matched elements and child nodes, deletes all jQuery data and events associated with the removed elements
3. detach() behaves exactly like remove(), except that it doesn't delete the jQuery data and events associated with the removed elements (for later use)
4. unwrap() function removes the parent of an element (or the parents of a set of elements) from the DOM
5. replaceWith() lets you replace an element, or set of elements, with new content.
6. replaceAll() does the same job as replaceWith(), but you pass in the elements that you want to replace
7. Adding content at the start of an element (or elements) with prepend() and prependTo()
8. Adding content at the end of an element (or elements) with append() and appendTo()
9. Adding content before an element (or elements) with before() and insertBefore()
10. Adding content after an element (or elements) with after() and insertAfter() 
11. Wrapping content around an element (or elements), or around an element's contents, with wrap(), wrapAll() and wrapInner()

jQuery mobile swipe event double firing

When I import jquery mobile latest js library and bind some div to swipeleft or swiperight event, I receive double events for every swipe. This is very frustrated as I need do some action on each swipe. After some google, there are couple of solutions.

Solution 1:
Change jquery mobile source code - add return false in $.event.special.swipe

Solution 2:
Use the on() method with event.stopImmediatePropagation() to stop the double bubble
$(function(){   
    $('somediv').on('swipeleft swiperight',function(e, data){
              e.stopImmediatePropagation();
    });
});

Solution 3:
Bind the swipe event to documen
$(document).on('swipeleft',function(e, data){
        e.preventDefault();
});

Solution 4:
Find other libraries which has no such an issue like jquery.touchSwipe.js

I selected #4 solution because I want a lightweight js library for just swipe/touch events (btw, jquery mobile provides custom build), and I don't want HTML5 pushstate (which is enabled by default in jquery mobile)

Debug Mobile Web

Recently I start to develop mobile web, so summarize the debug methods I have explored. Apart from traditional annoying alert and verbose console.log, on desktop I prefer to Chrome developer tool (cmd+shift+I) which is so developer friendly to debug web site. (Safari has developer tool, Firefox has firebug, Opera has dragonfly, IE has F9). Fortunately on mobile web, we also can get similar tools and methodologies to help mobile web development.

Weinre
http://people.apache.org/~pmuellr/weinre-docs/latest/Home.html
It's a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.

It has debug server, debug client and debug target.

Adobe® Shadow
http://labs.adobe.com/technologies/shadow/
Shadow is a new inspection and preview tool that allows front-end web developers and designers to work faster and more efficiently by streamlining the preview process, making it easier to customize websites for mobile devices.

As Flash is dropped in iOS, it seems that Adobe is putting more effort to HTML5 and mobile web now (There is a free upcoming event Create the web tour in San Francisco, Sept 2012), and Adobe is creating many good resources and tools for the prominent Web.

iWebInspector
http://www.iwebinspector.com
iWebInspector is a free tool to debug, profile and inspect web applications running on iOS Simulator (iPhone or iPad). @firt is a true expert in Mobile Web, I had his 'Programming the Mobile Web' book with his signature from last year's Velocity conference at Santa Clara. He also created the excellent http://mobilehtml5.org/

Chrome
Chrome settings - Override User Agent/Override device metrics

Safari
Enable Safari's developer tools, then set Safari's UserAgent to Safari iOS

Bookmarklets
I know there are a bunch of bookmarklets to help mobile Web debug, but I have not explored them yet, will update this post when I get chance to try them out.

Non-multipart file upload

The well-known swfupload ()http://demo.swfupload.org/Documentation/ uses multipart/form-data to post parameters and file binary data. I could not find an option to turn off multipart to stream file content to server which doesn't support multipart/form-data content-type.

However, after some research, there are two options for non-multipart file upload.

One is jQuery-File-Upload (https://github.com/blueimp/jQuery-File-Upload/wiki/Options) which provides an option 'multipart: false' to turn off multipart upload.
Official documentation:
multipart

By default, XHR file uploads are sent as multipart/form-data.
The iframe transport is always using multipart/form-data.
If this option is set to false, the file content is streamed to the server url instead of sending a RFC 2388 multipart message for XMLHttpRequest file uploads.
Non-multipart uploads are also referred to as HTTP PUT file upload.

Note: Additional form data is ignored when the multipart option is set to false.
Non-multipart uploads (multipart: false) are broken in Safari 5.1 - see issue #700.

Type: boolean
Default: true

The other is plupload (http://www.plupload.com/documentation.php) which also provides an option 'multipart: false' to upload file using direct binary streams.
Official documentation:
multipart

Boolean state if the files should be uploaded using mutlipart instead of direct binary streams. Doesn't work on WebKit using the HTML 5 runtime.