+ Start a Discussion
XactAndyXactAndy 

Salesforce example S-Control problem

Hi,

I've been trying to reuse the code from:http://wiki.apexdevnet.com/index.php/Create_a_many_to_many_relationship_with_a_multi-select_picklist

I have just changed the api names to my custom objects, but nothing else, and am
hitting a problem.

When I click on the Add button, nothing happens, and I get an error in Fire bug:
DuelingListBoxesElement is not defined
moveOption(select#select_0, select#select_1, "--None--", [], null, "--None--", undefined, undefined, undefined)functions.js (line 797)
DuelingListBoxesElement.moveOption(sourceSelect, targetSelect, keepSourceLab...

I tracked it down to the following line:

<td align=center><a href="javascript:moveOption(document.placebook.select_0,document.placebook.select_1,'--None--', [],null,'--None--');"><img src="/img/arrow_rt.gif" border="0" alt="Add" title="Add" width=23 height=23></a></td>
</tr>

Does anyone have any thoughts on this? Really appreciate it, as this is key functionality for me.

Full code is below, with error line about 2/3rds down.

Andy





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<link href="/css/ie_global.css" rel="stylesheet" type="text/css">
<link href="/css/ie_navigation.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.row1 {
background-color: #EEEEEE;
padding: 0px 3px 0px 3px;
vertical-align: top;
}
.row2 {
background-color: #DDDDDD;
padding: 0px 3px 0px 3px;
vertical-align: top;
}
A, A:visited, A:active {
color: #000000;
text-decoration: underline;
}
A:hover {
color: #FFCC00;
text-decoration: underline;
}
-->
</style>

<script language="JavaScript1.2" src="/js/functions.js"></script>
<script src="/soap/ajax/9.0/connection.js" type="text/javascript"></script>
<script id="clientEventHandlersJS" language="javascript">

function toIsoDateTime(theDate) {

var today = new Date(theDate);
var year = today.getYear();
if (year < 2000) {
    year = year + 1900;
}
var month = today.getMonth() + 1;
var day = today.getDate();
var hour = today.getHours();
var hourUTC = today.getUTCHours();
var diff = hour - hourUTC;
var hourdifference = Math.abs(diff);
var minute = today.getMinutes();
var minuteUTC = today.getUTCMinutes();
var minutedifference;
var second = today.getSeconds();
var timezone;

if (minute != minuteUTC && minuteUTC < 30 && diff < 0) { hourdifference--; }
if (minute != minuteUTC && minuteUTC > 30 && diff > 0) { hourdifference--; }
if (minute != minuteUTC) {
    minutedifference = ":30";
} else {
    minutedifference = ":00";
}
if (hourdifference < 10) {
    timezone = "0" + hourdifference + minutedifference;
} else {
    timezone = "" + hourdifference + minutedifference;
}
if (diff < 0) {
    timezone = "-" + timezone;
} else {
    timezone = "+" + timezone;
}
if (month <= 9) month = "0" + month;
if (day <= 9) day = "0" + day;
if (hour <= 9) hour = "0" + hour;
if (minute <= 9) minute = "0" + minute;
if (second <= 9) second = "0" + second;
return year + "-" + month + "-" + day + "T" + hour + ":" + minute + ":" + second + timezone;
}

// InitPage Called by OnLoad.
function initPage() {
var existingSel = document.getElementById('select_0');
try
    {
  var qr = sforce.connection.query("Select Name, Id From AppTest2__Assessment__c ORDER BY Name") ;   
    }
catch (error)
    {
    alert(error.faultstring);
    }

if (qr.records.length > 0)
    {
    for (var i=0;i<qr.records.length;i++)
        {
         existingSel.options[i] = new Option(qr.records[i].get("Name"), qr.records[i].get("Id"));
         }
    }
    else
    {
        alert("Query to populate picklist failed. No Rows.");
    }
// End Init Page with the bracket below.
}

// Create Placement is called when the submit button is pushed.
function CreatePlacement() {
var bp = [];
var NewSel = document.getElementById('select_1');
var nd = toIsoDateTime(document.getElementById('inputDate').value);
var qt = document.getElementById('quantity');
if ((NewSel.options[0].value == '--None--') || (NewSel.options[0].value == '')) {
    alert("You Must select a book to be added!");
}
else
{
for (var i=0;i<NewSel.options.length;i++)
    {
    var placement = new sforce.SObject("AppTest2__Assessment_Judges_Influencer__c");
    placement.set("AppTest2__Assessing_Assessment__c", NewSel.options[i].value);
    placement.set("AppTest2__Assessed_Influencer__c", "{!AppTest2__Influencer__c.Id}");
    //placement.set("Delivery_Date__c",nd);
    //placement.set("Quantity__c",qt.value);
    bp.push(placement);
    }
var cr = sforce.connection.create(bp);
for (var i=0; i<cr.length ;i++ )
    {
    if (cr[i].getBoolean("success"))
        {
        } else {
        alert("Failed to create Book Placement: " + cr[i]);
        }
    }
}
parent.frames.location.replace("/{!AppTest2__Influencer__c.Id}");
}

//-->
</script>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
      } else if (test!='R') { num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  } if (errors) alert('The following error(s) occurred:\n'+errors);
  document.MM_returnValue = (errors == '');
}
//-->
</script>
</head>
<body onload="javascript:initPage();">
<form name="placebook" id="placebook">
<table width="100%" cellpadding=0 cellspacing=0 border=0>
<tr>
<td> <table width="100%" cellpadding=0 cellspacing=0 border=0>
<tr>
<td align=LEFT class="pageTitle" nowrap><img src="/img/campaign_target_large.gif" border="0" alt="Accounts"

width=30 height=20 align="texttop">Mass Place Books for: &nbsp<b>{!AppTest2__Influencer__c.Name}</b></td>
<td width="100%" align=RIGHT bgcolor="#FFFFFF" nowrap><a href="#"><img src="/img/help_icon.gif" border="0"

width=25 height=18 align="texttop">Help</a></td>
</tr>
</table></td>
</tr>
<tr>
<td class="moduleLine"><img src="/s.gif" height="2"></td>
</tr>
<tr>
<td><img src="/s.gif"></td>
</tr>
<tr>
<td align=LEFT bgcolor="#CCCCCC" height=15 class="bodySmallBold"><a href="javascript:history.back()">� Back</a></td>
</tr>
</table>
<table border=0 cellspacing=1 cellpadding=0 id="ep" width="100%">
<tr id="btn">
<td colspan=5 align=center><input type="button" name="save" value=" Save " class="button"

onclick="javascript:CreatePlacement();">
  
<input type="button" name="cancel" value="Cancel" class="button" onClick="javascript:history.back();"><div

class=errorMsg id="error_General"></div></td>
</tr>
<tr>
<td colspan=5> </td>
</tr>
<tr id="head_1_ep">
<td class="bodyBold" colspan=4 nowrap>Book Placement Information:</td>
<td nowrap colspan=1 align=left><img src="/img/required_icon.gif" border="0" alt="Required Information" title="Required Information" width=18 height=18 align="texttop"><span class="bodySmallBold"> = Required Information</span></td>
</tr>
<TR >
<TD CLASS="blackLine" COLSPAN=5><img src="/s.gif"></TD>
</TR>
<tr >
<td class="requiredInput">Book Name:</td>
<td colspan="4"><table border=0 cellspacing=1 cellpadding=0 id="selbook" width="100%">
<TR>
<TD COLSPAN=5 ><table cellpadding=1 cellspacing=1 border=0>
<tr>
<div class=errorMsg id="error_select_0"></div></td>
</tr>
<tr>
<td height=5 colspan=100%></td>
</tr>
<tr>
<td align=center valign=bottom class=bodyBold>Available Books </td>
<td width=3 rowSpan=2><IMG src="/s.gif" width=3 border=0></td>
<td> </td>
<td width=3 rowSpan=2><IMG src="/s.gif" width=3 border=0></td>
<td align=center valign=bottom class=bodyBold>Selected Books </td>
</tr>
<tr>
<td align=center valign=top><select name="select_0" id="select_0" MULTIPLE width="200" size="10">
<option value="">--None--</option>
</select></td>
<td align=center valign=center class=bodySmall><table cellpadding=0 cellspacing=0 border=0>
<tr>
<td valign=bottom align=center class=bodySmall>Add</td>
</tr>
<tr>
<td align=center><a href="javascript:moveOption(document.placebook.select_0,document.placebook.select_1,'--None--', [],null,'--None--');"><img src="/img/arrow_rt.gif" border="0" alt="Add" title="Add" width=23 height=23></a></td>
</tr>
<tr>
<td><IMG src="/s.gif" height=3>
<tr>
<td align=center><a href="javascript:moveOption(document.placebook.select_1,document.placebook.select_0,'--None--', [],null,'--None--');"><img src="/img/arrow_lt.gif" border="0" alt="Remove" title="Remove" width=23 height=23></a></td>
</tr>
<tr>
<td align=center valign=top class=bodySmall>Remove</td>
</tr>
</table></td>
<td align=center valign=top><select name="select_1" id="select_1" MULTIPLE width="200" size="10">
<option value="">--None-- </option>
</select></td>
</tr>
<tr><td colspan="5"><div class=errorMsg id="error_select_1"></div></td></tr>
</table></TD>
</TR>
</table></td>
</tr>
<tr >
<td nowrap class="dataLabel">Date Delivered:</td>
<td style="border-left: 5px solid #990000;"><nobr>
<input name="inputDate" id="inputDate" type="text" size=12 tabindex="3">
<a href="javascript:openPopupFocus('/home/calendar.jsp?form=placebook&field=inputDate&mo=0', '_blank', 193, 148,'width=193,height=148,resizable=yes,toolbar=no,status=no,scrollbars=no,menubar=no,directories=no,location=no,dependant=yes',true, true);" tabindex="3" onclick="setLastMousePosition(event)"><img src="/img/date_picker.gif" border="0" alt="Pick A Date" title="Pick A Date" width=24 height=16></a><span class="bodySmall">[ <a href="#" onclick="if(document.getElementById('inputDate') && document.getElementById('inputDate').disabled == false) { document.getElementById('inputDate').value = '{!Today}';}return false;">{!Today}</a> ]</span></nobr><div class=errorMsg id="error_inputDate"></div></td>
</tr>
<tr>
<td nowrap class="dataLabel"><label>Quantity</label></td>
<td style="border-left: 5px solid #990000;">
<input name="quantity" type="text" value="1" id="quantity" onblur="MM_validateForm('quantity','','RisNum');return document.MM_returnValue" />
</td>
</tr>
</table>
</form>
<hr><br>
</body>
</html>
werewolfwerewolf
I would expect that there's a js file you need to include here.  Have a look at some built-in page that already has dueling listboxes and look at the js files it includes, and compare and contrast with yours.
mfarbodmfarbod
Hi XactAndy,
 
I'm having the same problem with the Many to Many S-Control. I get the DuelingListboxesElement Undefined. I was wondering if you found a solution to this problem. It would help me a lot.
 
Thanks
 
mfarbod
 
 
blntblnt
Same issue here. Anyone figured this one out?

Thanks.
werewolfwerewolf
Try including /dJS/en/library.js.
mtbclimbermtbclimber

werewolf wrote:
Try including /dJS/en/library.js.



Do that and you get the unenviable task of retesting your code with every release salesforce does since we have and will continue to change things in that and all other libraries without notice. We offer no backwards compatibility guarantee or "API" for our Javascript libraries, request parameters, URL patterns, or DOM Ids.

If you want to leverage any standard salesforce.com javascript then you should take a copy of it and store it somewhere permanent so it won't get updated out from under you in the future.


Message Edited by mtbclimber on 07-25-2008 09:59 PM
sornasorna

Hi,

I too got a similar kind of issue. And finally after seeing this post, I added "/djs/en/library.js" and the issue got resolved. But actually I am not clear about what is the issue and how adding this js file resolved the issue. Could anyone tell  me?

 

 

Thanks,

Sorna

mtbclimbermtbclimber

Somewhere in that spaghetti there is a reference to a function or object that is provided by library.js.  Following this example and referencing library.js in this way is a recipe for disaster. You are better off moving to Visualforce and utilizing static resources if you need to copy out any of the standard JS to shield you from unexpected changes.