Yii Playground Multiselect - Jquery

I am curious if anyone out there has tried to use the MultiSelect JQuery code in Yii Playground.

I found it pretty easy to get installed and running, built a simple two list screen to manage some data

(lists of urls) moving from list A to list B.

But I would like the ability to use the data that is selected by the user. The doubleclick will move from one

list to the other. I created another button that I want to be able to select a record (url) and click the button

to then open a tab in the window to go to the url that was selected.

Having all kinds of issues.

I thought it would be easy to create the list of data as urls, but that proved difficult.

Any help would be appreciated.

Thanks in Advance!

My view code




<?php echo $form = CHtml::beginForm($this->createUrl('ApproveSites')); ?>


{$this->widget('ext.widgets.multiselects.XMultiSelects',array(

	'leftTitle'=>$lefthead,

	'leftName'=>'PartnerSite[needreview][]',

	'leftList'=>PartnerSite::model()->findSites($model->id,'NeedReview'),

	'rightTitle'=>$righthead,

	'rightName'=>'PartnerSite[approved][]',

	'rightList'=>PartnerSite::model()->findSites($model->id,'Approved'),

	'size'=>20,

	'width'=>'300px',

	));


...



My javascript code jquery.multiselect.js




[b]jQuery.fn.goUrl = function(to, options) {

	

	// alert(to);  select_left

	

	options = $.extend({

		trigger: null,     // selector of elements whose 'click' event should invoke a move

		allTrigger:null,    // select all of options

		autoSubmit: true,  // true => select all child <option>s on parent form submit (if any)

		beforeGo: null,  // before move callback function

		afterGo: null    // after move callback

	}, options);


	// alert(options.trigger);  //output ==> # options_web

	var $select = this;

	

	var goFunction = function() { goOptions($select, to); }; 

	

	// moves the options

	function goOptions(from, toUrl) { 

       // open window?

		myRef = window.open('toUrl','mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0');


	}

[/b]

jQuery.fn.multiSelect = function(to, options) {

	// support v0.1 syntax

	if (typeof options == "string")

		options = {trigger: "#"+options};


	options = $.extend({

		trigger: null,     // selector of elements whose 'click' event should invoke a move

		allTrigger:null,    // select all of options

		autoSubmit: true,  // true => select all child <option>s on parent form submit (if any)

		beforeMove: null,  // before move callback function

		afterMove: null    // after move callback

	}, options);


	// for closures

	var $select = this;


	// make form submission select child <option>s

	if (options.autoSubmit)

		this.parents("form").submit(function() { selectChildOptions($select); });


	// create the closure

	var moveFunction = function() { moveOptions($select, to, options.beforeMove, options.afterMove); };


	var moveAllFunction = function(){

		jQuery("option", $select).each(function(){

			jQuery(this).attr('selected',true);

		});

		moveFunction();

	};


	// attach double-click behaviour

	this.dblclick(moveFunction);


	// trigger element behaviour

	if (options.trigger)

		jQuery(options.trigger).click(moveFunction);


	if (options.allTrigger)

		jQuery(options.allTrigger).click(moveAllFunction);


	return this;


	// moves the options

	function moveOptions(from, toSel, beforeMove, afterMove) {

	  if (beforeMove && !beforeMove())

			return;


		jQuery("option:selected", from).each(function() {

		 jQuery(this)

			.attr("selected", false)

			.appendTo(toSel);

	  });


		afterMove && afterMove();

	}




	// selects all child options

	function selectChildOptions($select) {

		$select.children("option").each(function() {

			this.selected = true;

		});

	}

};



Code for XMultiselects


public function run()

	{

		echo "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n";

		echo "<tr>\n";

		echo "<td>\n";

		if(isset($this->leftTitle))

		{

			echo "<label for=\"leftTitle\">{$this->leftTitle}</label><br />\n";

		}

		echo "<select name=\"{$this->leftName}\" id=\"select_left\" multiple=\"multiple\" size=\"{$this->size}\" style=\"width:{$this->width}\">\n";

		foreach($this->leftList as $value=>$label)

		{

			echo "<option value=\"{$value}\">{$label}</option>\n";

		}

		echo "</select></td>\n";


		echo "<td style=\"width:60px; text-align:center; vertical-align:middle\">\n";

		echo "<input type=\"button\" style=\"width:40px\" id=\"options_right\" value=\"&gt;\" /><br /><br />\n";

		echo "<input type=\"button\" style=\"width:40px\" id=\"options_left\" value=\"&lt;\" /><br /><br />\n";

		echo "<input type=\"button\" style=\"width:40px\" id=\"options_right_all\" value=\"&gt;&gt;\" /><br /><br />\n";		

		echo "<input type=\"button\" style=\"width:40px\" id=\"options_left_all\" value=\"&lt;&lt;\" /><br /><br />\n";

		[b]echo "<input type=\"button\" style=\"width:40px\" id=\"options_web\" value=\"go\" /><br /><br /></td>\n";[/b]


		echo "</td>\n<td>\n";

		if(isset($this->rightTitle))

		{

			echo "<label for=\"rightTitle\">{$this->rightTitle}</label><br />\n";

		}

		echo "<select name=\"{$this->rightName}\" id=\"select_right\" multiple=\"multiple\" size=\"{$this->size}\" style=\"width:{$this->width}\">\n";

		foreach($this->rightList as $value=>$label)

		{

			echo "<option value=\"{$value}\">{$label}</option>\n";

		}

		echo "</select></td>\n";

		echo "</tr></table>\n";


		$this->registerClientScript();


		echo "<script type=\"text/javascript\"><!--\n";

		echo "\$(function() {\n";

		echo "\$(\"#select_left\").multiSelect(\"#select_right\", {trigger: \"#options_right\"});\n";

		echo "\$(\"#select_right\").multiSelect(\"#select_left\", {trigger: \"#options_left\"});\n";

		echo "\$(\"#select_left\").multiSelect(\"#select_right\", {allTrigger:\"#options_right_all\"});\n";

		echo "\$(\"#select_right\").multiSelect(\"#select_left\", {allTrigger:\"#options_left_all\"});\n";

		[b]echo "\$(\"#select_left\").goUrl(\"#select_web\", {trigger: \"#options_web\"});\n";[/b]

		echo "});\n";

		echo "// --></script>\n";

		parent::init();

	}



I managed to sort this out.

I found the correct call to get the string value from JQuery, then had to put in some simple checks.

Was able to strip out most of the code I tried to copy from the multiselect function. I still need

to add functionality to open multiple windows if the user selects multiple items in the list.