Using lookup tables – selectedIndex not right…

[atrummParticipant]

Hi! I hope I can explain this right. I’m using jqWidgets to create a fairly simple table showing data from a table. Users can click “edit” and edit this data. One of the fields is an id that refers to a lookup table, so I’m trying to use a drop down list with jqxDropDownList.

Everything is working except one aspect. When I select the record and go to its page, the dropdown list isn’t showing what’s in the database – that is, it says “please choose”

For example – Here are three records from the lookup table:

    var crsSource = [{
      CrsID: 2000,
      CrsName: "Anguilla 1957 / British West Indies Grid"
      }, {
      CrsID: 2001,
      CrsName: "Antigua 1943 / British West Indies Grid"
      }, {
      CrsID: 2002,
      CrsName: "Dominica 1945 / British West Indies Grid"
    }];

In my main table, I will store the CrsID – so for example I store 2002. In my dropdownlist I should see “Dominica 1945…” – instead I see “please choose” (or if I define selectedIndex as 0 I’ll see “Anguila 1957…” – but the data is storing correctly…

Here’s the rub – if instead of getting my dropdown list data from my look up table, I try using a local array like the one above… – it works exactly as expected. I’ll paste the code I’m trying to get to work:

    var crsSource =
    {
      datatype: "json",
      datafields: [
      { name: 'CrsID' },
      { name: 'CrsName' }
      ],
      id: 'epsg_crs_id',
      url: '<?php echo URL; ?>well/fillEpsgCrsDropdown'
    };
    
    var crsAdapter = new $.jqx.dataAdapter(crsSource, {
      autoBind: true
    }); 
    
        $("#jqxpanel").jqxPanel({theme: theme, width: '97%', height: '97%'});
        // Create a jqxMenu
        $("#appMenu").jqxMenu({theme: theme, width: '100%'});
        $("#WellID").jqxInput({theme: theme, width: 120, disabled: true});
        $("#WellName").jqxInput({theme: theme, width: 120, disabled: (wellID == 'add' ? false : true)});
        $("#API").jqxInput({theme: theme, width: 120, disabled: (wellID == 'add' ? false : true)});
        $("#CompanyUWI").jqxInput({theme: theme, width: 120, disabled: (wellID == 'add' ? false : true)});
        $("#Easting").jqxInput({theme: theme, width: 120, disabled: (wellID == 'add' ? false : true)});
        $("#Northing").jqxInput({theme: theme, width: 120, disabled: (wellID == 'add' ? false : true)});
        $("#Latitude").jqxInput({theme: theme, width: 120, disabled: (wellID == 'add' ? false : true)});
        $("#Longitude").jqxInput({theme: theme, width: 120, disabled: (wellID == 'add' ? false : true)});
        $("#CRS").jqxDropDownList({
					source: crsAdapter,
					displayMember: 'CrsName',
					valueMember: 'CrsID',
					theme: theme,
					width: 250,
					placeHolder: "Empty. Please Select:",
					disabled: (wellID == 'add' ? false : true)
					});
        $("#Surveys").jqxButton({theme: theme, width: 120});
        $("#Plans").jqxButton({theme: theme, width: 120});
        $("#Cancel").jqxButton({theme: theme, width: 120});
        $("#Save").jqxButton({theme: theme, width: 120});
        //$("#Save").hide();
        (wellID == 'add' ? $("#Save").show() : $("#Save").hide());
    }

    function enableFormControlsForEditing() {
        $("#Save").show();
        $("#Cancel").val('Cancel');
        $("#WellName").jqxInput({disabled: false});
        $("#API").jqxInput({disabled: false});
        $("#CompanyUWI").jqxInput({disabled: false});
        $("#Easting").jqxInput({disabled: false});
        $("#Northing").jqxInput({disabled: false});
        $("#Latitude").jqxInput({disabled: false});
        $("#Longitude").jqxInput({disabled: false});
        $("#CRS").jqxDropDownList({disabled: false});
    }

    function disableFormControls() {
        $("#Save").hide();
        $("#Cancel").val('Edit');
        $("#WellName").jqxInput({disabled: true});
        $("#API").jqxInput({disabled: true});
        $("#CompanyUWI").jqxInput({disabled: true});
        $("#Easting").jqxInput({disabled: true});
        $("#Northing").jqxInput({disabled: true});
        $("#Latitude").jqxInput({disabled: true});
        $("#Longitude").jqxInput({disabled: true});
        $("#CRS").jqxDropDownList({disabled: true});
    }

and of course a bunch of divs and such in the html – and php loading this data and etc – like I said, it all works except the selection index… thanks in advance – I know this is clear as mud!

[DimitarParticipant]

Hello atrumm,

Are you sure the data is correctly loaded from your source? You can check this with the data adapter’s callback functions loadError and loadComplete. And something else – does the dropdownlist display “please choose” or the placeHolder you have actually set – “Empty. Please Select:”?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[atrummParticipant]

Hi Dimitar!

I’m pretty sure it’s loading the data correctly because the dropdown is right and I can go to the url and see the array – that looks right – I haven’t tried loadError and loadComplete – maybe I’ll try that and I see what I get. Oh yes the dropdown list displays my placeHolder – sorry I forgot that I had changed that…

[atrummParticipant]

UPDATE: using loadComplete and loadError it seems the data is loading right…

[DimitarParticipant]

Hi atrumm,

Could you, please, specify the JSON output from the url? Maybe it needs to be mapped to be loaded correctly by the dropdownlist.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[atrummParticipant]

Good morning Dimitar!

Well let’s see..

[{“CrsID”:”4143″,”CrsName”:”Abidjan 1987″},{“CrsID”:”61436405″,”CrsName”:”Abidjan 1987 (deg)”},{“CrsID”:”2165″,”CrsName”:”Abidjan 1987 \/ TM 5 NW”}]

That’s a small piece – the table is big – but that’s how it looks…

– A

[DimitarParticipant]

Hi A,

We tried to reproduce the issue but to no avail: http://jsfiddle.net/Dimitar_jQWidgets/k5uh4mp6/. Everything works fine if the data is locally loaded, as you already stated. If this is the only difference between the working and non-working dropdownlists, the issue may be due to your server-side code. Some things you may try are removing autoBind or setting the source async field to false.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[atrummParticipant]

Hi Dimitar,

Thanks a bunch for the help… removing autoBind did nothing but setting async to false seems to have worked! Very interesting – and I suppose that makes sense, but I couldn’t explain why!

Thanks again for the help!

— A

[Author]

Posts