How to call a POST operation of WCF DATA Service from datajs

Sep 19, 2013 at 8:42 PM
I am new to datajs and WCF Data Service , My GET operation is working perfecting , though POST is not working in anyway , I have tried all the techniques mentioned in various threads but of no help.
The biggest disappointment is there is no working example or demo project which we can use and see if we are missing on something.

Whatever way I try I am not able to call my method and keeps on giving me errors like

1) MLHttpRequest cannot load "my service url" Request header field MaxDataServiceVersion is not allowed by Access-Control-Allow-Headers.
2) Method not implimented
3) HTTP request failed

Below is how my WCF Data Service POST Operation Looks like , (just a test method)

[WebInvoke(UriTemplate = "UpdateList", RequestFormat = WebMessageFormat.Json,
     ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.WrappedRequest,Method="POST")]
    public string UpdateList(string formatedString)
    {
        // will add logic later once will be able to hit the breakpoints from dataJS
        return string.Empty;
    }
JS Code (tried with various ways)
Option 1:
var oHeaders = {};
     var request = {
        headers: oHeaders, // object that contains HTTP headers as name value pairs 
        requestUri: "http://localhost:51913/List.svc/UpdateList", // OData endpoint URI 
        method: "POST", // HTTP method (GET, POST, PUT, DELETE) 
        data: jsonString // Payload of the request (in intermediate format) 
    };


    OData.request(request,
function success(data) {
    alert("inside success");
    // do something with data  
},
function error(err) {
    alert(err.message);
    // do something with the error 
},
{
    accept: OData.defaultHandler.accept,
    maxDataServiceVersion: OData.defaultHandler.maxDataServiceVersion,
    read: OData.defaultHandler.read,
    write: function (request) {
        alert("inside write");
        debugger;
        // set the appropriate headers to the request.
        request.headers = {
            "Content-Type": "application/json",
            "DataServiceVersion": "2.0"
        };

        // data is assumed to be a JSON string, so just pass it through
        request.body = request.data;
    }
}
);

Option 2:
var oHeaders = {};
     var request = {
        headers: oHeaders, // object that contains HTTP headers as name value pairs 
        requestUri: "http://localhost:51913/List.svc/UpdateList", // OData endpoint URI 
        method: "POST", // HTTP method (GET, POST, PUT, DELETE) 
        data: jsonString // Payload of the request (in intermediate format) 
    };
oHeaders["x-http-method"] = "MERGE";
    oHeaders['DataServiceVersion'] = "2.0";


    OData.defaultHandler = OData.atomHandler;
    OData.defaultHttpClient.enableJsonpCallback = true;
    OData.jsonHandler.recognizeDates = true;

    OData.request(request, 
    function (data, response) {
    debugger;
    }, 
    function(err){
        debugger;
    alert(err);
    },
    OData.metadataHandler);

            OData.defaultHandler = OData.atomHandler;
            OData.request(
      {
          headers: { "Content-Type": "application/atom+xml" },
          requestUri: "http://localhost:51913/List.svc/UpdateList",
          method: "POST",
          data: jsonString


      },
      function (insertedItem) {
          debugger;
          alert("inside if");
          // $("<div>inserted customer ID: " + insertedItem.ID + "</div>").appendTo($("#target-element-id"));
      },
       function (err) {
           alert(err.message);
           console.log("Error occurred " + err.message);
           //  console.log(err);
       }
    );
Please I require urgent help on this , if please can somebody explain this with a proper working example.

Thanks in advance.