Yii Framework Forum: Yii Playground Multiselect - Jquery - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Yii Playground Multiselect - Jquery Rate Topic: -----

#1 User is offline   AustinGeek 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 173
  • Joined: 22-September 12

Posted 08 December 2012 - 11:45 PM

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();
	}

0

#2 User is offline   AustinGeek 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 173
  • Joined: 22-September 12

Posted 09 December 2012 - 12:25 PM

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.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users