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=\">\" /><br /><br />\n";
echo "<input type=\"button\" style=\"width:40px\" id=\"options_left\" value=\"<\" /><br /><br />\n";
echo "<input type=\"button\" style=\"width:40px\" id=\"options_right_all\" value=\">>\" /><br /><br />\n";
echo "<input type=\"button\" style=\"width:40px\" id=\"options_left_all\" value=\"<<\" /><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();
}