SPCascadeDropdowns get selected item ID

Nov 24, 2011 at 10:59 AM
Edited Nov 24, 2011 at 11:00 AM

Hi,

I have the function SPCascadeDropdowns working on newform and editform.  It is working fine.

My next requrement is to populate some fields on the form depandant on the selection of the 2nd dropdown of the cascade, for this I need the ID of the item selected on the dropdown.

I have tried using the following function to get display the value for testing purposes, however, whilst it will work on the first dropdown, it bring back an 'undefined' for the 2nd dropdown.

function getmyid() {
        var mySelectValue = $("select[title='Dropdown Field']").val();
        alert(mySelectValue);
    }

Is there a way I can get the ID required?

Cheers

Coordinator
Nov 24, 2011 at 2:12 PM
PhilCB:

My guess is that the second dropdown is the dreaded complex sort because it has 20+ options. You can check the SPServices code to see how I find the selected value there.

Alternatively, you could use the simpleChild option to convert the child dropdown to a simple select.

See my blog post for more info on this type of dropdown:
http://sympmarc.com/2010/05/19/two-types-of-sharepoint-forms-dropdowns/

M.
Nov 24, 2011 at 2:47 PM

Hi,

You are correct Marc it was due to it having 20+ options.  Using simpleChild: true, I was able to retrieve the ID. 

The only downside being, I prefered how the complex dropdown looked when autocompleted whilst typying i.e. showing you what options were still available.  Is there a way to get this functionality back, or is that part of the trade off for converting to a simple dropdown?

Cheers.

Coordinator
Nov 24, 2011 at 2:51 PM
You can keep the complex dropdown (you're one of the few people I know who realize it has type ahead filtering) and just select for the selected id differently to match the complex markup.

M.
Nov 24, 2011 at 3:15 PM

Thanks again Marc. 

When you say to match the complex markup.....Would you expect the select itself to be 'complex'?  I'm looking at your blog at the two different DOM's and finding it hard to get the correct select synthax.

Ta.

Coordinator
Nov 24, 2011 at 3:22 PM

It's a little trickier, because SharePoint actually uses the value of the selection in the input rather than the id of the value. This leads to a bug which I've reported to Microsoft.

Here's the code from SPCascadeDropdowns which will lead you to your solution:

       // Set the vlue of the optHid input element
       $("input[id='" + childSelect.Obj.attr("optHid") + "']").val(firstChildOptionId);

The id of the selection in a complex dropdown is stored in the optHid hidden input element.

M.

Nov 24, 2011 at 3:31 PM

Hi Marc....

Regarding your last post, is that method of retrieving the ID for a complex field the most desirable and accurate?  Any chance that the hidden select element is also used for others complex elements in the page? or is it only used only used with the one complex field?

In the changes I recently made, I used the complex input element's "choices" attribute value to find the ID of the selected element... I'm now realizing that if there are multiple items (<option>'s) with the same Title, then I'm not assured that the correct ID was returned. However, I also was under the impression that the hidden Select element is used for multiple fields on the page, if they exist...

Paul T.

Coordinator
Nov 24, 2011 at 3:36 PM

Paul:

Each complex dropdown has its own optHid element. Note that I'm getting the optHid id attribute from the input element in the complex dropdown. That id is unique per complex dropdown.

These complex dropdowns are complicated little buggers, with a couple of bugs and dubious benefit. As I note above, very few people realize that they provide the type ahead filtering. It's one of my favority quiz questions when I'm speaking.

M.

Nov 24, 2011 at 4:11 PM
sympmarc wrote:
       // Set the vlue of the optHid input element
       $("input[id='" + childSelect.Obj.attr("optHid") + "']").val(firstChildOptionId);

The id of the selection in a complex dropdown is stored in the optHid hidden input element.

M.


I'm getting an error 'Message: 'childSelect' is undefined'.  What would I need to declare this as/ or what does it need assigned to prior to returning the ID?

Nov 24, 2011 at 4:14 PM

Thanks Mark... Appreciate your response... Based on your feedback, I think I'll change my approach on how I'm getting the ID... I may even do it in a way that I will automatically store it on the input (perhaps with jQuery's .data()... perhaps bind an event to the hidden <select> field to update the input field when a selection is done.... have to look a little closer.)...

Personally, I one of my favorite features, after upgrading my app to v0.6.2, was the introduction of converting all complex fields to simple dropdowns... I emediately changes all my calls to SPServices.SPCascadeDropdowns() to include that new options.

Paul T.

Nov 29, 2011 at 10:55 AM

Hi All,

I havne't been able to bring back the ID on a complex dropdown.  Does anyone have an example that they could share or point me in the direction of one?

Many Thanks,

Phil

Nov 29, 2011 at 5:18 PM

Phil,

It would help if you posted the code you used for SPCascadeDropdowns(). I'm assuming that you have a SPCascadeDropdowns bound to the Child Filed and you want to get the ID of the selection that the user makes on that Child Field. I also assume (based on your initial post) that the Child Field has  TITLE attribute of "Dropdown Field".

Possible solution:

You will need to bind a function (through jquery) to the Child Field, so that when its value is changed, you can capture the ID (using Mark's suggestion above)... Here is sample code to do the selection for "complex fields" (you will need code to handle getting the ID when it is not a complex field. You will also need to include code to handle when this field is changed by SPCascadeDropdowns, which may also fire the "change" event.

Here sample mark up:

$("[title='Dropdown Field']").change(function(ev){
    // Complex field?
    // There may be better ways to figure this out...
    // See SPServices code to see how Marc does it
    if ($(this).is([choices])) {
        alert( $("input[id='" + $(this).attr("optHid") + "']").val() );
        
    } else {
        // Handle otehr types of fields here
    
    }
});

Good luck.

Paul.

 

 

 

 

 

Nov 30, 2011 at 12:54 AM
Edited Nov 30, 2011 at 1:10 AM

Thanks for that Paul.

Probaably best if I explain what I am trying to accomplish with this code.

I have a form (new & edit both require this functionality), on which I have two dropdown fields.  I would like the first dropdown to cascasde down to the second, which I have working throught the use of SPCascadeDropdowns.

$(document).ready(function () {
        $().SPServices.SPCascadeDropdowns({
            relationshipWebURL: "/xxx",
            relationshipList: "Members",
            relationshipListParentColumn: "TypesLookup",
            relationshipListChildColumn: "FullNames",
            parentColumn: "Types",
            childColumn: "From",
            //simpleChild: true
        });


    });

Upon selection of the second dropdown I would like a number of text fields (members home address) on the form to populate with related user data.  I also want to place a button or something similar at this point so the fields populated can be overwritten by other related data (members work address).

I know that the first field will always be a simple dropdown and the second will always be complex.

So far I have not been able to autopopulate the text fields as I am having trouble binding an onchange event to the second dropdown. 

I am able to populate the fields using a button, however that is only when I have changed the dropdown to a simple dropdown and therfore could easily capture the ID.  Once I have the ID I use it in the following function to get the addr fields and populate them onto the form.

function GetHomeAdd(Id) {
 
        var Id = $("select[title='From']").val();
        var query = "<Query>";
        //option for included where criteria            
        query += "<Where><Eq><FieldRef Name='ID'/><Value Type='Counter'>" + Id + "</Value></Eq>"
                    + "</Where></Query>"

        $().SPServices({
            operation: "GetListItems",
            webURL: "http://test/",
            async: false,
            listName: "Members",
            CAMLViewFields: "<ViewFields>" +
                                    "<FieldRef Name='HomeAddr1' />" +
                                    "<FieldRef Name='HomeAddr2' />" +
                                    "<FieldRef Name='HomeAddr3' />" +
                                    "<FieldRef Name='HomeTown' />" +
                                    "<FieldRef Name='HomeCounty' />" +
                                    "<FieldRef Name='HomePostcode' />" +
                                    "</ViewFields>",
            CAMLQuery: query,
            completefunc: function (xData, status) {
                $(xData.responseXML).find("z\\:row").each(function () {
                    // alert(xData.responseXML.xml);
                    $("input[title='Addr1']").val($(this).attr("ows_HomeAddr1"));
                    $("input[title='Addr2']").val($(this).attr("ows_HomeAddr2"));
                    $("input[title='Addr3']").val($(this).attr("ows_HomeAddr3"));
                    $("input[title='Town']").val($(this).attr("ows_HomeTown"));
                    $("input[title='County']").val($(this).attr("ows_HomeCounty"));
                    $("input[title='Postcode']").val($(this).attr("ows_HomePostcode"));

                });
            }
        })
    }

I am struggling to bind an onchange function to my dropdown and get the ID back of that selection. 

Hopefully that makes a bit more sense that my post above.

Ta.

 

Nov 30, 2011 at 1:08 AM

Phil,

This definately helps...

What happens when you change the above to this:

$(document).ready(function () {
        $().SPServices.SPCascadeDropdowns({
            relationshipWebURL: "/xxx",
            relationshipList: "Members",
            relationshipListParentColumn: "TypesLookup",
            relationshipListChildColumn: "FullNames",
            parentColumn: "Types",
            childColumn: "From",
            //simpleChild: true
        });
        
        alert("From Field found: " + $("input[title='From']").length);
        
        $("input[title='From']").change(function(ev){
            // Complex field?
            // There may be better ways to figure this out...
            // See SPServices code to see how Marc does it
           alert( $("input[id='" + $(this).attr("optHid") + "']").val() );
        });

    });

 

You should get an alert when the page loads, and you should get an alert every time the 'From' field changes... Can you post back what results you get?

 

Paul.

 

 

 

 

Nov 30, 2011 at 1:39 AM
Edited Nov 30, 2011 at 2:13 AM

Hi Paul,

I tried you code and got an alert on PageLoad, length=1; however I did not get an alert on the change event.

I was able to get an alert firing on a change event on the simple dropdown using this code:

      $("select[title$='Types']").change(function () {
           alert('Changed');

             });

Whislt it won't help with the complex dropdown, at least I can now bind an onchange event to a simple dropdown.

*update*  

I was also able to fire the function to populate the addresses rather than the alert I have in below.  So as things stand I can get my requirement working if I change the second dropdown to a simple dropdown. 

***update Two***

Trying to get this working on a complex dropdown and came across this..  If I click on the dropdown and click the member I want, I dont get an alert.  However, if I select into the dropdown and start to type to autofill, then tab when I'm at the correct selection, bingo, an alert, two in fact.  Odd.

Cheers,

Phil

Nov 30, 2011 at 3:22 AM

Phil...

I don't claim to try and understand how this complex field behaves... the fact that you get the alert is good... Twice may mean that sharepoint code may be updating the field twice. That means the event was bound correctly... In IE, I do know that it behaves different to the change event... where it only get triggered when the element loses focus (you tab out). 

I go back to Marc initial suggestion: it may be best and less of a burden if you just use the simpleChild option... In your ealier post you indicated that you prefer the complex field because of the type-ahead functionality, however, I wonder if your users even know about that functionality... Most don't... and most find the behavior of these complex field (because they give the appearance of being a true drop-down) to be frustrating.

Paul

Nov 30, 2011 at 8:26 AM

Paul,

Thanks for your advice on this, it's been much appreicated.  Got it working with simple dropdown, need to move on with other requirements so will go with that for now. 

Cheers,

Phil

Jan 25, 2012 at 10:15 AM
Edited Jan 25, 2012 at 10:39 AM

Hi,

Just a quick update on this.  All was fine whilst using simpleChild:true, until....  I had two identical secondary list items (with different major values).

ie

Member Type: Full

Name: Joe Bloggs

Member Type: Part time

Name: Joe Bloggs.

On clicking into the edit form, if the selected member type was 'Full' the secondary value was held, however if it was 'Part time' the secndary value was not retained.

It looks similar to this issue documented here: http://spservices.codeplex.com/discussions/210711

Unfortunaltely, due to the reasons stated above, I can't change from a simpleChild value of true, so looks like I might have to go with the updated version of the code.

edit: 

I'm currently working off jquery 1.62 and 0.6.2, if I update to 0.7.1 will I need to update 1.6.2 as well?  Also, I use the same files for GetListItems function, will that be affected at all?

Double edit: On moving to 1.7...do I need itto use 0.7.1, as noticing the issue around

find("z\\:row")

I think, for now I'd rather not make the move to 1.7, but only upgrade to 0.7.1,  Is that possible?

Cheers,

Phil

Jan 25, 2012 at 11:40 AM

Quick update.

Working off 1.62 and 0.71ALPHA13.js.  The move to 0.7.1ALPHA13.js solved the issue above in regards to retaining the secondary value on the edit form.

I'll continue to test with this and GetListItems fucntions and report any issues that I may come accross.

Cheers,

Phil

Jan 25, 2012 at 12:08 PM

Another quick update.

One issue that is still outstanding for me.  When using cascading dropdowns, is it possible to allow any free text on the secondary field?

Coordinator
Jan 25, 2012 at 10:04 PM

No, there's no free text option. SharePoint doesn't allow Lookup columns to have values which aren't in the relationshipList.

M.

Feb 2, 2012 at 9:15 AM

Hi,

Just a quick update on testing.  When on add/edit form using the dropdown, if I select the parent and child dropdown, then try to savwe the form without inputing a value into a seperate mandatory field, the form will give me the error message, as normal, but the child dropdown field will have reset back to 'none', whereas the parent holds the value.

 

Cheers,

Phil

Coordinator
Feb 2, 2012 at 2:06 PM

Phil:

Is this with simpleChild: true? Could you post your script so that I can try to replicate it?

M.

Feb 6, 2012 at 9:52 AM

Hi Marc,

Yes this is happening when simpleChild is marked as true.

I can't seem to add code at the moment, (won't let me choose the language, and therefore post code). However, is the same code as I posted above (on Nov 30 2011 at 12:54 AM), with the simpleChild no longer commented out. 

One thing I have noticed, is that this only occurs on the new form.  If I try to replicate it on the edit form, the child field holds the value.  However, a cavet to that is, the child and parent field are mandatory on the new form, therefore by the time you are on the edit form they will have values assigned to them.

Hope that makes sense.


Cheers,

Phil

Aug 30, 2013 at 8:14 PM
Hello all,

Been following the posts, and I have been able to resolve most of my problems.
when it comes to the change event (simpleChild) I able to get it to fire however,
I can't retrieve the new value i get a "Undefined" value return? Here’s what I have so far:

$(document).ready(function() {

$().SPServices.SPCascadeDropdowns({
relationshipList: "PPT_EST_PrinterList",
relationshipListParentColumn: "Sites",
relationshipListChildColumn: "Device",
parentColumn: "Sites",
childColumn: "Printers"
});

$().SPServices.SPCascadeDropdowns({
relationshipList: "PPT_EST_PrinterParts",
relationshipListParentColumn: "Printers",
relationshipListChildColumn: "Parts",
parentColumn: "Printers",
childColumn: "Parts",
simpleChild: true

});
 $("[title='Parts']").change(function(ev){
           alert( $("input[id='" + $(this).attr("optHid") + "']").val() );

   });
});
</script>
Coordinator
Aug 30, 2013 at 8:22 PM
kc2scy:

It depends what type of dropdown Parts is. If it's not a complex dropdown (20+ options), then your code will not work.

M.
Aug 30, 2013 at 10:17 PM
Edited Aug 30, 2013 at 10:18 PM
Thanks Marc,


I thought by setting the property to "simpleChild: true " fixed that?
This is where I get confuse, is that before the filter is applied? I know there is over 20+ items in the drop prior to any filtering.

So, if its over 20 items then what options do I have.?

Any help would be great.
Coordinator
Aug 30, 2013 at 10:21 PM
When you set simpleChild: true, I hide the original complex dropdown and add a simple one with the same options to the page. The complex one is still there and I keep it up to date when you make a change to the simple one.

Have you checked to see what your selector $("[title='Parts']") is getting?

M.
Sep 3, 2013 at 1:49 PM
Edited Sep 3, 2013 at 1:50 PM
Hi Marc,
sorry for the delay long weekend,

I'm really new to JQuery and I'm not sure how to go about that? However heres what I did try:

if($("[title='Parts']") != null){
     alert( $("[title='Parts']").id);
}

$("[title='Parts']") is not null but when I try to access things like id,name etc. I get "underfine" which I think its telling be that 'id, 'name' is not in the class.
so I'm stuck right now.