Prototype jQuery noConflict test - 1

fiddle.html

<a href="#" id="show_cols" class="pos_r" onClick="return false">Show Columns</a><div style='clear:right;display:none'></div>
<div id="show_cols_blk" class="modal1" style="display: none">
<ul id="list_to_sort" class="ltable">
    <li class="lrow ltab">
    <div class="lcell l1"><input type="checkbox" onclick="checkall('show_cols[]',this,this.up('form'));" name="dummy" value=""></div>
    <div class="lcell l2 ll">Column</div>
    <div class="lclear"></div>
    </li>

<li id="order_1" class="lrow ls "><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="display_name" checked "/></div><div class="lcell l2 ll">Display Name</div><div class="lclear"></div></li><li id="order_2" class="lrow ls lhighlight"><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="staff_work_id" checked "/></div><div class="lcell l2 ll">Staff Work Id</div><div class="lclear"></div></li><li id="order_3" class="lrow ls "><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="position" checked "/></div><div class="lcell l2 ll">Position</div><div class="lclear"></div></li><li id="order_4" class="lrow ls lhighlight"><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="pay_group" checked "/></div><div class="lcell l2 ll">Pay Group</div><div class="lclear"></div></li><li id="order_5" class="lrow ls "><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="divisions" checked "/></div><div class="lcell l2 ll">Stores</div><div class="lclear"></div></li><li id="order_6" class="lrow ls lhighlight"><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="tasks" checked "/></div><div class="lcell l2 ll">Tasks</div><div class="lclear"></div></li><li id="order_7" class="lrow ls "><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="experience" checked "/></div><div class="lcell l2 ll">Experience</div><div class="lclear"></div></li><li id="order_8" class="lrow ls lhighlight"><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="username" checked "/></div><div class="lcell l2 ll">Username</div><div class="lclear"></div></li><li id="order_9" class="lrow ls "><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="email_address" checked "/></div><div class="lcell l2 ll">Email Address</div><div class="lclear"></div></li><li id="order_10" class="lrow ls lhighlight"><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="user_group"  "/></div><div class="lcell l2 ll">User Group</div><div class="lclear"></div></li><li id="order_11" class="lrow ls "><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="access_level_name"  "/></div><div class="lcell l2 ll">Access Level Name</div><div class="lclear"></div></li><li id="order_12" class="lrow ls lhighlight"><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="last_signed_in"  "/></div><div class="lcell l2 ll">Last Signed In</div><div class="lclear"></div></li><li id="order_13" class="lrow ls "><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="last_activity"  "/></div><div class="lcell l2 ll">Last Activity</div><div class="lclear"></div></li><li id="order_14" class="lrow ls lhighlight"><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="last_ipaddress"  "/></div><div class="lcell l2 ll">Last Ipaddress</div><div class="lclear"></div></li><li id="order_15" class="lrow ls "><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="status"  "/></div><div class="lcell l2 ll">Status</div><div class="lclear"></div></li><li id="order_16" class="lrow ls lhighlight"><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="mobile"  "/></div><div class="lcell l2 ll">Mobile Number</div><div class="lclear"></div></li><li id="order_17" class="lrow ls "><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="address"  "/></div><div class="lcell l2 ll">Address</div><div class="lclear"></div></li><li id="order_18" class="lrow ls lhighlight"><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="postcode"  "/></div><div class="lcell l2 ll">Postcode</div><div class="lclear"></div></li><li id="order_19" class="lrow ls "><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="access_level"  "/></div><div class="lcell l2 ll">Access Level</div><div class="lclear"></div></li><li id="order_20" class="lrow ls lhighlight"><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="age"  "/></div><div class="lcell l2 ll">Age</div><div class="lclear"></div></li><li id="order_21" class="lrow ls "><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="dob_f"  "/></div><div class="lcell l2 ll">Date Of Birth</div><div class="lclear"></div></li><li id="order_22" class="lrow ls lhighlight"><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="default_division"  "/></div><div class="lcell l2 ll">Default Store</div><div class="lclear"></div></li><li id="order_23" class="lrow ls "><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="desired_hrs"  "/></div><div class="lcell l2 ll">Desired Hrs</div><div class="lclear"></div></li><li id="order_24" class="lrow ls lhighlight"><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="division_tasks"  "/></div><div class="lcell l2 ll">Store Tasks</div><div class="lclear"></div></li><li id="order_25" class="lrow ls "><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="division_tasks_exp"  "/></div><div class="lcell l2 ll">Store Tasks Exp</div><div class="lclear"></div></li><li id="order_26" class="lrow ls lhighlight"><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="home"  "/></div><div class="lcell l2 ll">Home</div><div class="lclear"></div></li><li id="order_27" class="lrow ls "><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="work"  "/></div><div class="lcell l2 ll">Work</div><div class="lclear"></div></li><li id="order_28" class="lrow ls lhighlight"><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="other"  "/></div><div class="lcell l2 ll">Other</div><div class="lclear"></div></li><li id="order_29" class="lrow ls "><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="private_email"  "/></div><div class="lcell l2 ll">Private Email</div><div class="lclear"></div></li><li id="order_30" class="lrow ls lhighlight"><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="gender"  "/></div><div class="lcell l2 ll">Gender</div><div class="lclear"></div></li><li id="order_31" class="lrow ls "><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="job_title"  "/></div><div class="lcell l2 ll">Job Title</div><div class="lclear"></div></li><li id="order_32" class="lrow ls lhighlight"><div class="lcell l1"><input type="checkbox" name="show_cols[]" value="target_hrs"  "/></div><div class="lcell l2 ll">Target Hrs</div><div class="lclear"></div></li></ul>

<input type="hidden" id="list_to_sort_order" name="show_cols_o[]" value="" />
<!--input type="hidden" name="details[user_id_order]" value="" /-->
<input type="submit" name="task" value="change">
<input type="submit" id="show_cols_can" name="task" value="cancel" onClick="return false;">
</div>

fiddle.js

/*global $: true, window: true, base_url: true, show_shift_division: true, jQuery: true, document: true, sprintf: true, alert: true, console: true, plotGraph: true*/

jQuery.noConflict(true)(function(jQ) {
    jQ('#show_cols').unbind('click');
    jQ('#show_cols_can').unbind('click');
    
    jQ('#show_cols').bind('click', function(ev) {
        jQ('#show_cols_blk').show();
        console.log('clicked Show Columns');
        return false;
    });
    jQ('#show_cols_can').bind('click', function(ev) { 
        jQ('#show_cols_blk').hide();
        console.log('clicked Cancel button');
        return false;
    });
        
    jQ('input[value="change"]').click(function() {
        jQ('#show_cols_blk').hide();
        jQ('#list_to_sort').sortable({items: 'li'});
        jQ('list_to_sort_order').val = jQ('#list_to_sort').sortable('serialize');
        console.log('clicked Change button');
        console.log(jQ('#list_to_sort').sortable('serialize'));        
    });
        
});

fiddle.manifest

name: jsFiddle/Gist demo - Prototype jQuery noConflict()
description: jsFiddle demo hosted on Gist using Prototype & jQuery/jQueryUI
authors:
  - Gary Smith
title:
  - JS Fiddle - Prototype jQuery noConflict()
resources:
  - /js/empty.js
  - https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js
  - https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js
  - http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css
  - https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js
  - https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.js
normalize_css: yes

...

http://jsfiddle.net/gh/gist/jquery/edge/1768194/