GetListItems issue

Feb 1, 2011 at 4:17 PM

Thought I'd post this here too to get more visibility Marc.

I am using the GetListItems function to retrieve an ID (not the internal id, just a text field) from a list where a lookup column exists.  I want to automatically populate a field on my form with that value and it works great.  This is the isue.  This column contains over 20 items so in IE it renders differently than in FireFox where I'm seeing no issues.  I have one other lookup column in my list that has over 20 items as well.  The column I'm running the SPServices script on is defined as having an id="customddl", my other drop down list is the default code.  When this second drop down list is changed, it's callin my SPServices function when it should not, and thus clears out my populated field.

Here is the code, any suggestions are welcome.

<script type="text/javascript">
$('#customddl').change(function() {
  //alert('change triggered');
  var lid = "";
  var item = $('#customddl option:selected').text();
  var itemenc = xmlencode(item);
  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Labs",
    CAMLQuery: "<Query><Where><Eq><FieldRef Name='Lab_x0020_Location'/><Value Type='Text'>" + itemenc + "</Value></Eq></Where></Query>",
    completefunc: function (xData, Status) {
        lid = $(xData.responseXML).find("[nodeName=z:row]").attr("ows_LabID");
        } 
   }); 
  $("input[title='Lab ID']").val(lid);
 return lid;
}); 

function xmlencode(string) {
    return string.replace(/\&/g,'&'+'amp;').replace(/</g,'&'+'lt;')
        .replace(/>/g,'&'+'gt;').replace(/\'/g,'&'+'apos;').replace(/\"/g,'&'+'quot;');
}
</script>

Coordinator
Feb 1, 2011 at 4:28 PM

Eric:

It's got to be a selector issue. Can you copy out the part of the markup for the two dropdowns and post it here?

M.

Feb 1, 2011 at 4:42 PM
Edited Feb 1, 2011 at 4:44 PM

These are the 3 table rows returned in IE at the top of my form that are doing all this.  I've cleaned up a bunch of the choices and hopefully formatted it well enough to make it readable.  The first and third rows are the DDls with the second being the one I'm trying to automatically set.

<table border="0" cellspacing="0" width="100%">
	<tr>
		<td colspan="2" class="DetailHeader">Lab Details</td>
	</tr>
	<tr>
		<td width="190px" valign="top" class="ms-formlabel">
		<H3 class="ms-standardheader">
		<nobr>Lab<span class="ms-formvalidation"> *</span></nobr>
		</H3></td>
		<td width="400px" valign="top" class="ms-formbody" id="customddl">
		<span dir="none">
		<span style="vertical-align:middle">
		<input name="ctl00$m$g_6de5b2f4_8043_4319_b175_04957dea0e84$ff2_1$ctl00$ctl01" type="text" id="ctl00_m_g_6de5b2f4_8043_4319_b175_04957dea0e84_ff2_1_ctl00_ctl01" class="ms-lookuptypeintextbox" onfocusout="HandleLoseFocus()" opt="_Select" title="Lab" optHid="SPLab_Hiddenctl00$m$g_6de5b2f4_8043_4319_b175_04957dea0e84$ff2_1$ctl00" onkeypress="HandleChar()" onkeydown="HandleKey()" match="" choices="ACE|74|Activity Promotion Lab / Minges 101|91..." onchange="HandleChange()" />
		<img alt="Display lookup values" onclick="ShowDropdown('ctl00_m_g_6de5b2f4_8043_4319_b175_04957dea0e84_ff2_1_ctl00_ctl01');" src="/_layouts/images/dropdown.gif" style="border-width:0px;vertical-align:middle;" />
		</span>
		<br/>
		</span>What SCTF lab is this for?</td>
	</tr>
	<tr>
		<td width="190px" valign="top" class="ms-formlabel">
		<H3 class="ms-standardheader"><nobr>Lab ID</nobr></H3></td>
		<td width="400px" valign="top" class="ms-formbody" id="LabID"><span dir="none">
		<input name="ctl00$m$g_6de5b2f4_8043_4319_b175_04957dea0e84$ff200_1$ctl00$ctl00$TextField" type="text" maxlength="6" id="ctl00_m_g_6de5b2f4_8043_4319_b175_04957dea0e84_ff200_1_ctl00_ctl00_TextField" title="Lab ID" class="ms-long" /><br></span></td>
	</tr>
	<tr>
		<td width="190px" valign="top" class="ms-formlabel">
		<H3 class="ms-standardheader"><nobr>Owner Department<span class="ms-formvalidation"> *</span></nobr></H3></td>
		<td width="400px" valign="top" class="ms-formbody" id="deptddl">
		<span dir="none">
		<span style="vertical-align:middle">
		<input name="ctl00$m$g_6de5b2f4_8043_4319_b175_04957dea0e84$ff18_1$ctl00$ctl01" type="text" id="ctl00_m_g_6de5b2f4_8043_4319_b175_04957dea0e84_ff18_1_ctl00_ctl01" class="ms-lookuptypeintextbox" onfocusout="HandleLoseFocus()" opt="_Select" title="Owner Department" optHid="SPOwner_x0020_Department_Hiddenctl00$m$g_6de5b2f4_8043_4319_b175_04957dea0e84$ff18_1$ctl00" onkeypress="HandleChar()" onkeydown="HandleKey()" match="" choices="AHS|48|Allied Health Sciences|42|.." onchange="HandleChange()" />
		<img alt="Display lookup values" onclick="ShowDropdown('ctl00_m_g_6de5b2f4_8043_4319_b175_04957dea0e84_ff18_1_ctl00_ctl01');" src="/_layouts/images/dropdown.gif" style="border-width:0px;vertical-align:middle;" />
		</span><br/>
		</span></td>
	</tr>
Coordinator
Feb 1, 2011 at 4:57 PM

You have the id 'customddl' on the TD, not one of the input elements. That's probably the problem.

M.

Feb 1, 2011 at 5:17 PM

I moved the ID to the formfield code but that didn't help.  This is the SPD code.  It does select the right cell initially and sets the value, I just don't understand why it's occurring for the other drop down.

<tr>
	<td width="190px" valign="top" class="ms-formlabel">
		<H3 class="ms-standardheader">
			<nobr>Lab<span class="ms-formvalidation"> *</span></nobr>
		</H3>
	</td>
	<td width="400px" valign="top" class="ms-formbody" id="customddl">
		<SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="Lab" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Lab')}"/>
		<SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="Lab" ControlMode="New"/>
	</td>
</tr>
<tr>
	<td width="190px" valign="top" class="ms-formlabel" >
		<H3 class="ms-standardheader">
			<nobr>Lab ID</nobr>
		</H3>
	</td>
	<td width="400px" valign="top" class="ms-formbody" id="LabID">
		<SharePoint:FormField runat="server" id="ff200{$Pos}" ControlMode="New" FieldName="Lab ID" __designer:bind="{ddwrt:DataBind('i',concat('ff200',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Lab_x0020_ID')}"/>
	</td>
</tr>
<tr>
	<td width="190px" valign="top" class="ms-formlabel">
		<H3 class="ms-standardheader">
			<nobr>Other Contact</nobr>
		</H3>
	</td>
	<td width="400px" valign="top" class="ms-formbody">
		<SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New" FieldName="Other_x0020_Contact" __designer:bind="{ddwrt:DataBind('i',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Other_x0020_Contact')}"/>
		<SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="Other_x0020_Contact" ControlMode="New"/>
	</td>
</tr>

Feb 1, 2011 at 5:31 PM

If I change the selector to $("input[title='Lab']").change(function(), it still removes the value from the Lab ID text box.  Could it be possible the onChange(HandleChange) function is causing an issue in the html output? It is truely baffling to me.  For once Firefox is playing nice and not IE :-(

Feb 1, 2011 at 6:40 PM

One option would be to hard code this as a select element and use SPServices to fill it. This way it does not matter if there are more than 20 items or not. Not sure exactly what you are doing but I have done this and it seems to work well.

Feb 1, 2011 at 6:57 PM

The select may work for one of them by not the other, it has nearly 300 entries.  I'm just not understanding why this works in Firefox and not IE.  I've tried a variety of selectors to ensure it's isolating the proper input field, but the second ddl is always triggering the function.

Coordinator
Feb 1, 2011 at 7:10 PM

Keep in mind, Eric, that SharePoint renders the control very differently in IE than in Firefox. In Firefox the 20+ dropdowns are still plain old selects; in IE they are rendered as a hybrid input/select combination with a bunch of script behind it. Your script needs to manage the two differently, as I showed you in my SPDisplayRelatedInfo function.

Also, View Source shows you the page as it is sent to the browser, not as it currently is at any point in time. For that, you need to use the Developer Tools in IE8 or Firebug.

M.

Feb 1, 2011 at 7:45 PM

I'm just going to table this for the time being.  I looked at SPDisplayRelatedInfo and I don't see how it handles things any differently.  Or did you mean the actual function inside spservices.js?

Coordinator
Feb 1, 2011 at 9:04 PM
Yup, I meant the function inside SPServices. If you look at it, you'll see how I handle the difference between 'simple' and 'complex' dropdowns, which is what you need to do if you want things to work in IE and Firefox. M.
Feb 1, 2011 at 9:20 PM

I'd be lying if I said I see what you're doing there. 

I can always make it a presave action instead in this instance, but the scenario I really want to use it I'll face this issue still.  So one way or another, I'll have to resolve it.

Coordinator
Feb 2, 2011 at 3:28 AM

Yeah, it's a bit of a mess what you have to do to handle the different renderings.

As you know, it's always a little hard to do this debugging stuff remotely. Any chance you could save a Site Template and send it to me? NDA and all that.

M.

Feb 2, 2011 at 1:30 PM
Edited Feb 2, 2011 at 2:46 PM

I can try, the site is getting large, so I'll have to do some trickeration to get a template together.  Would it be possible to work around it using some if else functions?  Like:

var cell = $("input[title='Lab ID']").val();
if (cell != "") {
...do my normal function

}

else
{
$("input[title='Lab ID']").val(cell);
}

And what's frustrating is that this only happens when you use the drop down menu on the second field.  If you start typing and use the up/down arrows and hit enter, the value stays.

Coordinator
Feb 2, 2011 at 4:53 PM

Yes, some if/then/else is what you'll need, but I'm not sure about what you show above.

Remember that there's script behind the input/select combo. and the events when you type and then use the arrows are different than if you simply select the value.

M.

Feb 2, 2011 at 5:48 PM

I sent you a STP, I'll keep plugging away and see what I can come up with.

Mar 4, 2011 at 5:02 AM
Edited Mar 4, 2011 at 5:06 AM

I'm not sure if I'm understanding the issue correctly, but as Marc mentioned there is some script behind the crazy IE combo control. Your best bet when attaching onChange handlers to these hybrid controls is to use the hidden input field. Check out this post from Boris Gomiunik for details.

You'll still have to handle the lookup fields differently for FireFox/Safari/etc. but it's a lot easier since you can use $("select[title='fieldname']) to select a standard Select control.