SPCascadedDropdown fails in Firefox

Jun 7, 2010 at 4:40 PM

All,

I am using WSS 3.0 and implementing the SPCascadedDropdowns.  It works wonderfully in IE8, but fails (without error) in Firefox 3.5.5).

 

I've narrowed down where the error occurs in SPServices:

 

function cascadeDropdown(opt) {
        var choices = "";
        var childSelectSelected = null;
        var parentSelectSelected = [];
        var master;
        var MultiLookupPickerdata;
        var newMultiLookupPickerdata;
        var childColumnRequired;

        // Find the parent column's select (dropdown)
        var parentSelect = new dropdownCtl(opt.parentColumn);
        // Get the parent column selection(s)
        switch(parentSelect.Type) {
            case "S":
                parentSelectSelected.push(parentSelect.Obj.find("option:selected").text());
                break;
            case "C":
                parentSelectSelected.push(parentSelect.Obj.attr("value"));
                break;
            case "M":
                parentSelections = parentSelect.Obj.closest("span").find("select[ID$='SelectResult'][Title^='" + opt.parentColumn + " ']");
                $(parentSelections).find("option").each(function() {
                    parentSelectSelected.push($(this).html());
                });
                break;
            default:
                break;
        }
        alert("F");
        // If the selection hasn't changed, then there's nothing to do right now.  This is useful to reduce
        // the number of Web Service calls when the parentSelect.Type = "C" or "M", as there are multiple propertychanges
        // which don't require any action.  The attribute will be unique per child column in case there are
        // multiple children for a given parent.
        alert( parentSelect.Obj.attr[0] + " : " + parentSelect.Obj.attr[1] + " : " + opt.childColumn );
        alert( parentSelect.Obj.attr("cascadeDropdownSelected_" + opt.childColumn) + " : " + parentSelectSelected.join(";#"));
        if(parentSelect.Obj.attr("cascadeDropdownSelected_" + opt.childColumn) == parentSelectSelected.join(";#")) return;
        parentSelect.Obj.attr("cascadeDropdownSelected_" + opt.childColumn, parentSelectSelected.join(";#"));

        alert("G");
        // Find the child column's select (dropdown)
        var childSelect = new dropdownCtl(opt.childColumn);
        if(childSelect.Obj.html() == null && opt.debug) { errBox("SPServices.SPCascadeDropdowns", "childColumn: " + opt.childColumn, "Column not found on page"); return; }

in the bolded line, in Firefox, the first argument in the comparison comes back as undefined, whereas in IE it has the proper value.

I can post my lists and such if necessary.

Thanks for any help you can provide.

Steve

Coordinator
Jun 7, 2010 at 5:52 PM

Steve,

Is this the default SPServices code from Marc's library, or have you modified the library in any way?

Which version are you running?

Jun 7, 2010 at 6:06 PM
Edited Jun 7, 2010 at 6:09 PM

The only mods I've made is alert statements to find where the code failed.  I'm running 0.5.4.

Note: updated to 0.5.5 and still having same problem

S

 

Coordinator
Jun 7, 2010 at 6:08 PM

Generally when you see something like this it's a simple little JavaScript bug; Firefox tends to be a little more picky sometimes...

Can you do me a favor and comment out the two alert lines above the bolded line, just to see if the code executes without them? Then we'll know 100% where to focus.

Jun 7, 2010 at 6:12 PM
Edited Jun 7, 2010 at 6:17 PM

Sorry, no, it doesn't run without those alert lines.  I just used the alert lines to pinpoint where code execution stopped and to see if I could see anything obvious in the values that were being compared.  The first value is undefined when change() is called in Firefox, but properly populated with the value of the select in IE.

Here's the actual setup and call to SPCascadeDropdowns:

<script type="text/javascript" language="javascript" src="https://xxx.xxx.xxx/_LAYOUTS/jquery.js"></script>
<script type="text/javascript" language="javascript" src="https://xxx.xxx.xxx/_LAYOUTS/jquery.SPServices-0.5.5.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $().SPServices.SPCascadeDropdowns({
            relationshipList: "{B61486E8-6E9E-46A1-B630-DD245F37C048}",
            relationshipListParentColumn: "SURVICE_x0020_Site",
            relationshipListChildColumn: "SURVICE_x0020_Division",
            parentColumn: "SURVICE Site",
            childColumn: "SURVICE Division"
        });
     
         $().SPServices.SPCascadeDropdowns({
            relationshipList: "{2BD93A3C-665C-45BB-9C52-239629052ED9}",
            relationshipListParentColumn: "SURVICE_x0020_Division",
            relationshipListChildColumn: "SURVICE_x0020_Teams",
            parentColumn: "SURVICE Division",
            childColumn: "SURVICE Team"
        });

        $().SPServices.SPArrangeChoices({
            columnName: "Interview Type",
            perRow: 3,
            randomize: false
        });
        $().SPServices.SPArrangeChoices({
            columnName: "Last Contacted via",
            perRow: 3,
            randomize: false
        });
        $().SPServices.SPArrangeChoices({
            columnName: "Relocation Required",
            perRow: 3,
            randomize: false
        });
        $().SPServices.SPArrangeChoices({
            columnName: "Have references been checked",
            perRow: 3,
            randomize: false
        });
        $().SPServices.SPArrangeChoices({
            columnName: "Is candidate recent graduate",
            perRow: 3,
            randomize: false
        });
         $().SPServices.SPArrangeChoices({
            columnName: "Classification Status",
            perRow: 3,
            randomize: false
        });
        $().SPServices.SPArrangeChoices({
            columnName: "Pay Status",
            perRow: 3,
            randomize: false
        });
        $().SPServices.SPArrangeChoices({
            columnName: "Signing Bonus",
            perRow: 3,
            randomize: false
        });
        $().SPServices.SPArrangeChoices({
            columnName: "Offer Letter Status",
            perRow: 3,
            randomize: false
        });
        $().SPServices.SPArrangeChoices({
            columnName: "Attachments Uploaded",
            perRow: 3,
            randomize: false
        });
        $().SPServices.SPArrangeChoices({
            columnName: "Non-Monetary Signing Bonus Type",
            perRow: 3,
            randomize: false
        });
    });
</script>

Steve

Coordinator
Jun 7, 2010 at 6:14 PM

I'm assuming you're using jQuery 1.4.2? Any other libraries being used besides SPServices?

Jun 7, 2010 at 6:18 PM

No, just jQuery 1.4.2 and SPServices 0.5.5.

Thanks for looking into this

Steve

 

Coordinator
Jun 7, 2010 at 6:36 PM

Steve:

I just checked my standard test page (which has multiple instances of SPCascadeDropdowns) in Firefox 3.6.3, and it seems to work OK.  What's the symptom of it failing for you? Do both instances you show above not work?  Also, try setting the denug option to true to see if I give you an error at all.

M.

Jun 7, 2010 at 6:45 PM

Marc,

The debug options don't give me anything.  What happens (for both cascading dropdown instances) is that it doesn't filter.  When called from the change() event, the bolded code above has "undefined" for the first part of the comparison (i.e. parentSelect.Obj.attr("cascadeDropdownSelected_" + opt.childColumn).  For the second (parentSelectSelected.join(";#")), I get a value of the dropdown as expected 

Somehow, Firefox is evaluating that comparison to true and returning out of the function, as if the values were equal (which they're not).  I think the question is why does the left side of the comparison return "undefined" when IE it retuens a value as it should...

Thanks again for looking into this

S

 

Coordinator
Jun 7, 2010 at 7:16 PM

Can you use Firebug to see if the cascadeDropdownSelected_" + opt.childColumn attribute is being correctly added to the selects?  I'm thinking that it may be the space in the childColumn: "SURVICE Team" that is the issue here. IE may be tolerating the space where Firefox is not.  This would then be a bug in my code.

M.

Jun 8, 2010 at 6:20 PM

Marc,

 

When i look via firebug, I'm getting an error in jQuery on line 1526:

 

1524      if ( set ) {
                // convert the value to a string (all browsers do this but IE) see #1070
1526         elem.setAttribute( name, "" + value );  <-- here
            }

            var attr = !jQuery.support.hrefNormalized && notxml && special ?
                    // Some attributes require a special call on IE
                    elem.getAttribute( name, 2 ) :
                    elem.getAttribute( name );

Th error is:

String contains an invalid character"  code: "5
https://xxx.xxx.xxx/_LAYOUTS/jquery.js
Line 1526

elem is select#ctl00_m_g_603f17f0_cbaf_40e3_87ca_6c63222c6c46_ctl00_ctl04_ctl18_ctl00_ctl00_ctl04_ctl00_Lookup

name is "cascadeDropdownSelected_SURVICE Division"

value is "CORPORATE OFFICE"


I'd agree that Firefox is probably bombing because the value of Name has a space in it, but you;d know better than I ;)

Let me know if you want me to post anything else

Steve

 

Jun 8, 2010 at 6:26 PM

btw, I upgraded to Firefox 3.6.3 with no difference...same error (or lack of desired result)

S

 

Coordinator
Jun 9, 2010 at 3:46 AM

Steve:

I think this issue is on me. I've just made a change as follows:

  var childColumnStatic = $().SPServices.SPGetStaticFromDisplay({
   listName: listNameFromUrl(),
   columnDisplayName: opt.childColumn
  });
  if(parentSelect.Obj.attr("SPCascadeDropdown_Selected_" + childColumnStatic) == parentSelectSelected.join(";#")) return;
  parentSelect.Obj.attr("SPCascadeDropdown_Selected_" + childColumnStatic, parentSelectSelected.join(";#"));

I've posted a new v0.5.6ALPHA2, and I'd appreciate it if you could try it out.  I think it'll solve the problem.  I've tested it with DisplayNames with a space, and it works in my test environment. (Note that I also changed the attribute name to be more consistent with the other attributes I'm creating in other functions.)

I think that I haven't caught this until now because IE is more forgiving with the attribute names.

M.

Jun 9, 2010 at 1:15 PM

Marc,

We have a winner!  Everything works fine in Firefox now.

I appreciate your time fixing this and how fast you turned it around. 

Thanks

Steve

 

Coordinator
Jun 9, 2010 at 2:56 PM

Excellent!  Keep in mind that this is still an alpha, though I'll probably release it soon because there are a couple other important fixes in it.

M.