Archive

Posts Tagged ‘jQuery’

jEditable Dropdown Text

9 June 2010 3 comments

I was stuck for a few minutes trying to figure out how to display the text of the selected item in the dropdown when using jEditable.

My script was querying an odata service (WCF Data Service) which returned a list of values with their ids.  I wanted this to be represented in a dropdown with the text displayed instead of the default “selected value”.  After struggling for a bit I came up with an idea, since someone else was struggling with the same problem I decided to create a post about it.

Here is my JavaScript code:

var settings = new Array(); // holds settings
function loadSettings(selected) {
    // loads the settings from the database via oData service
    $.ajax({
        type: "GET",
        url: "dataService.svc/Settings?$orderby=Code%20asc",
        data: {}, // required for Chrome
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false, // wait until it's done before setting up jEditable
        success: function (data) {
            /* Settings
             *   int SettingId (PK)
             *   string Title
             */
            // step through all the results
            $.each(data.d, function () {
                // add them to a hashtable
                settings[this.SettingId] = this.Title;
            });
            // check if a selected one was passed in
            if (selected != undefined)
                settings["selected"] = selected; // set the selected one
        },
        error: function (msg, a) {
            // call error method
            // TODO: Display correct error here by checking resulting code
            showError("ERROR: Could not load the settings from the database");
        }
    });

    // get the selected one's TEXT from the hashtable
    var set = settings[val];
    // TODO: Make this code better, use .append("<span />");
    $('#settings').html('<span id="ddSettings">' + set + '</span>');

    // setup field for inline editing
    $('#ddSettings').editable(function (value, settings) {
        saveSettings(value, docId, settings); // function to save settings
        return suffixes[value]; // return the text from the hastable
    }, 
    {
        data: settings, // my hashtable
        cancel: 'Cancel',
        placeholder: '---',
        submit: 'Save',
        tooltip: 'Click to edit',
        type: 'select',
        style: 'display: inline;'
    });
}

And my html:

<html>
<head>
    <script src="/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.jeditable.mini.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            loadSettings();  // load the settings dropdown
        });

        // put the JavaScript source from above in here
    </script>
</head>
    <body>
        Settings:&nbsp;<div id="settings"></div>
    </body>
</html>

I hope this will help someone get around this problem.

Advertisement