Archive

Posts Tagged ‘jSon’

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.

Invalid JSON primitive in Chrome

24 April 2010 2 comments

I ran into the strangest problem today.  My Ajax call to my web service failed with the error “Invalid JSON primitive”, but only in Chrome…it worked in all my other browsers.

After reading up a bit it seemed to be a problem with the data being sent to the service.  Strange enough I was not sending any…and that turned out to be the problem. 

So for whoever runs into this problem, try setting the data parameter in jQuery to nothing, like in the code below.

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "DataService.asmx/ProjectList",
    dataType: "json", //response type
    data: "{}", // IMPORTANT
    success: function(msg, success) {
        if (success == 'success') {
            //good response
            data = eval(msg.d);
            // attach the template
            $("#slideshow").setTemplateElement('projectFaderTemplate', null, { runnable_functions: true });
            // process the template
            $("#slideshow").processTemplate(msg);
        } else {
            $('#msg').html('Error: ' + msg.d); //service returned an error
        }
    },
    error: function(msg, e) {
        $('#msg').html('Error.  Please contact Technical.'); //error with ajax call
    }
});

Hope this helps someone.