"ajaxUrl" is deprecated but still necessary as far as I can tell.

burnchar

The ajax for Editor documentation says, The functionality of this option in Editor 1.3 replaces the deprecated ajaxUrl, but as far as I can tell, it doesn't.

I still use ajaxUrl because I have never found a way to do what I need without it, but I worry that it will go away now that it is deprecated.

Our code:

table: jqDomTableID,
ajaxUrl: {
    "create": "POST @Url.Content("~/API/MainView")",
    "edit": "PUT @Url.Content("~/API/MainView")",
    "remove": "DELETE @Url.Content("~/API/MainView")"
},
ajax: function(method, url, data, successCallback, errorCallback) {
    $.ajax({
            "type": method,
            "url": url,
            "data": JSON.stringify(data),
            "contentType": "application/json",
            "dataType": "json"
        })
        .done(function(json) {
            successCallback(json);
        })
        .error(function(xhr, error, thrown) { errorCallback(xhr, error, thrown); });
}, ...

I need to send data as JSON, and of course need to specify the destination URL.

• When we run the ajax method above without ajaxUrl, method and url are both null.
• When we use the new RESTful method, as an object, the data is sent to the server in URL/webforms format. We need it in JSON.
• When we try to use the recommended object format with data: JSON.stringify(data) (see below) to force conversion to JSON, we get data is not defined. We tried this both in the scope of the ajax call itself and in the scope of each individual action (see below).

Object notation code we tried:

ajax: {
 create: { type:'POST',url: '@Url.Content("~/API/MainView")', data: JSON.stringify(data) },
 edit: { type: 'PUT', url: '@Url.Content("~/API/MainView")', data: JSON.stringify(data) },
 remove: { type: 'DELETE', url: '@Url.Content("~/API/MainView")', data: JSON.stringify(data) }
}

How do we use a non-deprecated API to send JSON to a RESTful web service as we do with ajaxUrl?

allan

Hi,

Good question - thanks for this. Basically with the new(ish) ajax option rather than the old ajaxUrl the first two parameters in the ajax function callback (method and url above) become redundant - they have only been retained for backwards compatibility. They'll be retained until v2 (not sure when that will be!).

You would need to specify the URL in the function rather than as a parameter. For example url: '@Url.Content("~/API/MainView")'.

The method is a little more interesting since you are varying that based the data request type, for that you might use:

method: data.action === 'create' ?
  'POST' :
  data.action === 'edit' ?
    'PUT' :
    'DELETE'

In that way you can remove the ajaxUrl option entirely.

An alternative is to specify a different function for each of the crud actions, but that's a bit of a pain!

Better yet, looking at your code, you don't really need to specify a function use:

ajax: {
  create: {
    url: '@Url.Content("~/API/MainView")',
    method: 'POST',
    data: function ( data ) { return JSON.stringify(data) },
    contentType: "application/json"
  },
  edit: ...,
  remove: ...
}

You could even define a base object and $.extend it by the method is you want to reduce it to be as small as possible!

ajax: {
  create: $.extend( {}, ajaxBase, { method: 'POST' } )
  edit: ...,
  remove: ...
}

// where ajaxBase is:
var ajaxBase = {
  url: '@Url.Content("~/API/MainView")',
  data: function ( data ) { return JSON.stringify(data) },
  contentType: "application/json"
};

Allan

burnchar

Thank you for your excellent assistance, Allan!
May I suggest such an example be added to the other examples in the documentation?

Now that I look at another project, you have already helped resolve this issue -- I had just forgotten. My sincerest thanks for your patience and support.

My other project's code looks like this:

ajax: {
    create: function(method, url, data, success, error) { restAjaxCall(data, success, error) },
    edit:   function(method, url, data, success, error) { restAjaxCall(data, success, error) },
    remove: function(method, url, data, success, error) { restAjaxCall(data, success, error) }
}

restAjaxCall is defined as:

var restUrl = '@Url.Content("~/API/Crud")' + '?e=' + '@Model.Id';
function restAjaxCall(data, successCallback, errorCallback) {
$.ajax({
    method:data.action==='create'?'POST':data.action==='edit'?'PUT':'DELETE',
    url:restUrl,
    data:JSON.stringify(data),
    dataType:'json',
    contentType:"application/json"
})

@Url.Content is a Microsoft MVC helper for providing a URL even as the project's location changes. Any URL can be put in its place.

Credit to Allen Jardine as the code is his.

allan

Ah yes - I remember that now as well. I prefer my newer solution ;-)

Good to hear you have it working now. Improved CRUD is something I want to introduce in 1.6, but yes, this should go in the examples!

Allan