Global complex to simple lookups fields from the master page.

May 13, 2013 at 3:56 PM
Edited May 13, 2013 at 4:01 PM
Hi folks,

I wanted to share this snippet. It could be placed directly in the master page in the page head but I prefer to keep my javascript customizations in a separate JS file, which prevent the need to checkin the master page for changes. I've wrapped this in the document.ready function which is not required if you already have the wrapper defined in your code.
  $(document).ready(function (){
         var selects = $('.ms-lookuptypeintextbox');
if (selects.length > 0) {
    $(selects).each(function(index, value) {
        $().SPServices.SPComplexToSimpleDropdown({
            columnName: $(this).attr('title') 
        }); 
    });
}
  });
At runtime, the jQuery selector will select all the complex dropdowns and convert them to simple dropdowns. -enjoy-
May 14, 2013 at 1:29 AM
Good tip. Thanks for sharing.

_____
Paul

Sent from mobile device.
Coordinator
May 14, 2013 at 4:50 AM
+1

I'm going to add this into the docs as an example.

M.
Coordinator
May 14, 2013 at 5:05 AM
BTW, I haven't tested it, but I think you can simplify this to:
$(document).ready(function (){
  $('.ms-lookuptypeintextbox').each(function() {
    $().SPServices.SPComplexToSimpleDropdown({
      columnName: $(this).attr('title') 
    }); 
  });
});
M.
May 14, 2013 at 1:33 PM

Hi Marc,

Yes you may, however, I’m not sure if it is as efficient if there are no dropdowns selected. I used the brute force approach to short-circuit the library calls. I’d have to single step through the debugger to know for sure if I gained anything. Additionally, I frequently use this pattern because it provides me a variable to analyze my selections. By setting a breakpoint, I can look at the local variables and see what was returned from the select, which in most case when things don’t work, is where I’ve run aground.

Daniel C  Kline  CEO

Coordinator
May 14, 2013 at 2:47 PM
If the selector doesn't return any elements, the .each() won't happen, so it won't loop. I'm not positive that your way isn't slightly more efficient, but it's not necessary.

I generally do a variable assignment like you are doing if I'm going to use the collection more than once. Otherwise, I just use the selector directly.

M.
May 19, 2013 at 10:10 PM

Hi Marc,

This may have a place in your library. The first section is the library portion and the last part demonstrates the callback that can be used when a value is selected from the dropdown. The rest is fairly obvious. Insert the empty option in the select and disable the save button if necessary until an option is selected.

$(document).ready (function() {

//create a namespace for our object

var noDefault = {};

// cache some key DOM elements

noDefault.titleElem = $("td.ms-formbody input[title='Title']")[0];

// Disable the calculate index column

noDefault.titleElem.disabled = true;

//Initialize our “required field” array

noDefault.lookupFlds=['Title', 'RequestID', 'CertID'];

noDefault.fldCnt = noDefault.lookupFlds.length;

// If first selection option not already "" then prepend it

noDefault.addEmpty = (function (selTitle) {

var fldElem = $("td.ms-formbody select[title='" + selTitle + "']");

// if bad field name passed, ignore it

if (typeof(fldElem[0]) != 'undefined') {

var selectID = '#'+ (fldElem[0].id);

var already = ($(selectID)[0][0].text === "");

if (!already) {

$(selectID).prepend("<option value=''></option>").val('');

}

}

});

// Return the text of the selected option for the Selection

noDefault.rqdValid = (function(selTitle) {

var fldElem = $("td.ms-formbody select[title='" + selTitle + "']");

if (typeof(fldElem[0]) != 'undefined') {

var selectID = '#'+ (fldElem[0].id);

var selectedOpt = selectID + ' :selected'

return $(selectedOpt).text();

}

});

// Check if ALL required fields have selected options.

noDefault.allRqdValid = (function() {

var valCnt = 0;

$.each(noDefault.lookupFlds, function(index, selTitle) {

var selText = noDefault.rqdValid(selTitle);

if (selText !== ""){

valCnt +=1;

}

});

return (valCnt === noDefault.fldCnt);

});

// If all required fields have selected text values, then enable the save button

noDefault.setSaveStatus = (function() {

var cmdSubmit = $('input[id$="_diidIOSaveItem"]');

var allRqdAreValid = noDefault.allRqdValid();

if (allRqdAreValid) {

$(cmdSubmit).removeAttr('disabled');

// this is a callback for validation success

if (typeof(reqdValidCallback) != 'undefined') {

// if it exists as a function call it.

reqdValidCallback.call();

}

}

else {

$(cmdSubmit).attr('disabled','disabled');

}

});

// This is the end of our object declaration

// Now apply the functions to the elements

// Iterate the required field array adding the empty node if not already found

$.each(noDefault.lookupFlds, function(index, selTitle) {

noDefault.addEmpty(selTitle);

});

noDefault.setSaveStatus();

// Add an event handler to validate the required fields after every change.

$("select[title=RequestID]").change(function() {

noDefault.setSaveStatus();

});

$("select[title=CertID]").change(function() {

noDefault.setSaveStatus();

});

function reqdValidCallback() {

// in our callback set our title to the calculated field

var requestElem = $("td.ms-formbody select[title='RequestID']");

var rqElemID = '#'+ (requestElem[0].id);

var reqOpt = rqElemID + ' :selected';

var reqSelOpt = $(reqOpt).text();

var certElem = $("td.ms-formbody select[title='CertID']");

var certElemID = '#'+ (certElem[0].id);

var certOpt = certElemID + ' :selected';

var certSelOpt = $(certOpt).text();

noDefault.titleElem.value = reqSelOpt + '-' + certSelOpt;

return;

}

});

</script>

Feb 7, 2015 at 7:37 AM
Thanks for this Great Tip.

When i use this function to convert all my lookups with more than 20 items to simple dropdown it works in Ie10,perfectly.

However in my edit Form.aspx when i try to edit an item in the lookup all other lookups are filled with the same value..

For example in Edit form.aspx for lookup 1 if i select value as "USA" all other lookups in edit form has the same value as "USA". It happens only in ie10.

It works in Chrome,IE11,Mozilla.

Can you please let me know if it an issue in ie10. I want this to work in ie10. Can you please help me in this regard.
Feb 7, 2015 at 2:57 PM

Hi Sandy,

I don’t have a setup at this time to run this in a debugger, so it’s hard to give you a specific answer. My “guess” is that the select statement is based on the assumption that there was a single dropdown. You may need to modify the HTML markup on the page to make each dropdown unique. Sometimes, I simply wrap the SharePoint field in a span with an ID so that I can do an explicit select on the element when there are more than one element with no unique identifiers. Then, when you are updating the vales from the user selection, you will need to target the assignment of the value to the specific element that issued the click event.

I’m sorry that I’m not set up to code a more specific example. Why it behaves differently in IE10 than FF and Chrome, I can’t imagine. That’s a good place to use your browser developer tools to set breakpoints and figure out where the jQuery selects are being handled differently. It may be as simple as using a different version of jQuery to solve the problem. Good luck. By the time you figure it out, you will own the solution. It might be good to come back and post your solution.

Dan