test.js

<div id="channel_info">
  

<div style="clear:both"/>

  <div id="dialog0" class="column" > </div>
  <div id="dialog1" class="column" > </div>

</div>
<div style="clear:both"></div>

<div id="chartConfig"  style="display:none">
    <%= render :partial => "charts/config",
      :locals => {
        :displayconfig => false,
        :title => t(:chart_example),
        :src => "https://api.thingspeak.com/channels/3/charts/1",
        :options => '&timescale=60&round=2',
        :index => 0,
        :width => @width,
        :height => @height
      } %>
</div>

<script type="text/javascript">
$("#chartConfig").dialog({autoOpen : false });
var divArray;
$.getJSON('/channels/<%[email protected] %>/windows.json', 
	  function(data) {
	      var id_content_map = new Array;
	      
	      for (var i in data) {
		  colId = data[i].window.col;
		  title = data[i].window.title;
		  var content = data[i].window.html;
		  //Crazy JQuery voodoo to do an htmlEncode
		  id_content_map[data[i].window.id] =  $("<div/>").text(data[i].window.html).html();
    		  
		  portlet = $("#portlet_"+data[i].window.id);
		  
		  if (portlet.length == 0) {
                      portlet = $("#dialog"+colId).append("<div class='portlet' id='portlet_" + 
							  data[i].window.id + "'><div class='portlet-header'>"+title +
							  "</div><div class='portlet-content'>"+content+"</div>") ;
		  }
		  
	      }
	      alert("Running");

	      
	      
	      $(function() {		     
		    $( ".column" ).sortable({
						opacity: 0.7,
						helper: function( event ) {
						    return $("<div class='ui-widget-header'>Drop to re-position</div>");
						},
						connectWith: ".column",
						cursor: 'move', 
						update:  updatePortletPositions 
					    });
		    
		    $(".portlet").addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
			.find( ".portlet-header")
			.addClass("ui-widget-header ui-corner-all" )
			.prepend( "<span id='minusBtn' class='ui-toggle ui-icon ui-icon-minusthick'></span>")
			.prepend( "<span id='commentBtn' class='ui-comment ui-icon ui-icon-comment'></span>")
			.prepend( "<span id='pencilBtn' class='ui-edit ui-icon ui-icon-pencil'></span>")
			.end()
			.find( ".portlet-content" );
		    
		    $( ".ui-toggle" ).click(
			function() {
			    $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
			    $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
			    
			});
		    $( ".ui-edit" ).click(
			function() {
			    $("#chartConfig").dialog('open');
			});

		    $( ".ui-comment" ).click(
			function() {
			    var x =  $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).offset().left;
			    var y =  $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).offset().top;
 			    var id =  $( this ).parents( ".portlet:first" ).attr("id").substring(8);
			    
			    $("body").append("<div id='iframepopup"+id+"' style='display:none'>" + 
					     "<div style='font-size:1.2em;border:1px solid grey;height:115px;background-color:white'>" + 
					     id_content_map[id] + 
					     "</div></div>");
			    $("#iframepopup"+id).dialog({
							    resizable:false,
							    position:[x+200,y-200]
							});
			    
			    
			});
		});
	      

</script>