[SOLVED] Forcing AJAX POST

scottjones

Hi All,

First off forgive me if this has been posted before but i could not find a search section and i really didn't want to have to search through 345 pages manually.

I am trying to implement datatables with Expression Engine 2.x (EE) for my workplace (i am also going to be purchasing Editor as well if i can get this to work)

My problem is this - to get ajax to work i have to post data to my module with an XID string (weirdly i can get the initial table data without it)

Now I cannot add, edit or delete data from my server and im pretty sure its because I cant POST to the EE backend, I have tried various things but my latest is in the debug link: http://debug.datatables.net/iqehap

I have tried adding the data to aoData using aoData.push but no luck, when i say no luck i mean that firebug console only logs the following parameters:
[code]
action create
data[active] 1
data[cemail] 123
data['code'] 123
data[cur] 123
data[internal] 123
data[name] 123
data[obemail] 123
id
table company
[/code]
(i had to put the code var in single quotes due to formatting here)


notice how there is no XID..

I have also tried using
[code]
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push( { "name": "XID", "value": "'.XID_SECURE_HASH.'" } );
aoData.push( { "name": "testdata", "value": "test" } );
$.ajax( {
"dataType": "json",
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
},
[/code]

but again acording to debugger it states i am using GET not POST..

Any Ideas?

scottjones

sorry meant to state that i am also using editor trial and im thinking its the editor part of the code that is wrong
[code]
editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "'.AJAX_URL.'",
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push( { "name": "XID", "value": "'.XID_SECURE_HASH.'" } );
aoData.push( { "name": "testdata", "value": "test" } );
$.ajax( {
"dataType": "json",
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
},
"domTable": "#exp_rivieratravel_company",
"dbTable": "company",
"fields": [ {
"label": "Name:",
"name": "name"
}, {
"label": "Code:",
"name": "code"
}, {
"label": "Currency:",
"name": "cur"
}, {
"label": "Active:",
"name": "active",
"type": "checkbox",
"ipOpts": [
{ "label": "", "value": "1" }
]
}, {
"label": "Contact Email:",
"name": "cemail"
}, {
"label": "Option Bookings Email:",
"name": "obemail"
}, {
"label": "Internal ID:",
"name": "internal"
}
]
} );
[/code]

scottjones

ok so after digging around a bit more it seems that editor already POSTS its data and that i was using the datatables fnServerData function when i should have been using the ajax editor initialisation - which allowed me to change to GET..

however i still cannot add the XID var to the passed data array..

scottjones

sorry for the post barrage, but im finding it usefull to put what im doing here whilst i try to figure this out.

It looks as though you cant just add/append extra data to the post array but you can add a new field:
[code]
editor.add( {
"label": "Name:",
"name": "XID",
"type": "hidden",
"default":"'.XID_SECURE_HASH.'"
} );
[/code]

however the above adds the field to the POST'd data array:
[code]
action create
data[XID] 8e73b521c20956b3d005ade9d7f8c9e52826c898
data[active] 1
data[cemail] 123
data[code] 123
data[cur] 123
data[internal] 123
data[name] 123
data[obemail] 123
id
table company
[/code]

now im guessing there is no way to get it so that XID is not part of the data array but still posted.. might have to try and write a plugin in..

allan

Hi,

Good flow of thoughts - glad to hear it helped your own process, but it also helps mine to see how Editor is being used and where it can be improved :-).

So the first thing to say is that Editor does not have a 'fnServerData' function - but it does has an 'ajax' function: http://editor.datatables.net/options/ - which is basically the same thing but named slightly differently.

You can use ajax to make your own Ajax call, very much like you have above. For example:

[code]
editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "'.AJAX_URL.'",
"ajax": function (url, data, successCallback, errorCallback) {
data.XID = "'.XID_SECURE_HASH.'";
data.testdata = "test";

$.ajax( {
"dataType": "json",
"type": "POST",
"url": url,
"data": data,
"success": successCallback,
"error": errorCallback
} );
},
...
[/code]

Note that the 'ajax' parameters are different in Editor from the fnServerData options in DataTables (actually - in Editor 1.1, due for release tomorrow, there is an additional parameter at the start of the function I'm afraid, for the HTTP method). Also note that the JSON object is not name/value pairs like in DataTables (which is a legacy thing for older versions of jQuery).

Now - having said all that - what I would suggest is not making an Ajax call like this, but rather using a callback function, since it makes life that much easier :-).

Try this:

[code]
editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "'.AJAX_URL.'",
"events": {
"onPreSubmit": function (e, data) {
data.XID = "'.XID_SECURE_HASH.'";
data.testdata = "test";
}
},
...
[/code]

the onPreSubmit event allows you to directly manipulate the data that is doing to be sent to the server - in this case adding your parameters :-).

Regards,
Allan

scottjones

wow, just wow.

Thanks for talkign me through that, however i have done what you said but i am getting the following error:
[code]
data is undefined
onPreSubmit(e=Object { action="create", table="company", data={...}}, data=undefined)
[/code]

as per firebug, code is as follows:
[code]
editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "'.AJAX_URL.'",
"events": {
"onPreSubmit": function (e, data) {
data.XID = "'.XID_SECURE_HASH.'";
}
},
"domTable": "#sample",
"dbTable": "company",
"fields": [ {
"label": "Name:",
"name": "name"
}, {
"label": "Code:",
"name": "code"
}, {
"label": "Currency:",
"name": "cur"
}, {
"label": "Active:",
"name": "active",
"type": "checkbox",
"ipOpts": [
{ "label": "", "value": "1" }
]
}, {
"label": "Contact Email:",
"name": "cemail"
}, {
"label": "Option Bookings Email:",
"name": "obemail"
}, {
"label": "Internal ID:",
"name": "internal"
}
]
} );
[/code]

am i missing something?

scottjones

just thought i should also mention that the above code is generated in PHP - that's why there are some extra quote marks and full stops.

again thanks for the help in this, even with the 4/5 hours i have been trying this - literally tried every thing i could think of - including an ajax call using
[code]
"data":{xid: "random string", "name": this.get('name') ... }
[/code]

even still spending a day or so figuring this out will still mean i save a shed load of time in future development :)

allan

Oops - sorry about that! The function should be:

[code]
editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "'.AJAX_URL.'",
"events": {
"onPreSubmit": function (data) {
data.XID = "'.XID_SECURE_HASH.'";
}
},
[/code]

i.e. there is no 'e' argument - that is used for events, rather than the callbacks that are added during initialisation. For example you could do the following, after initialisation to add an event handler:

[code]
editor.on( 'onPreSubmit', function ( e, data ) {
data.XID = "'.XID_SECURE_HASH.'";
} );
[/code]

but I'd just stick to the first example :-).

Regards,
Allan

scottjones

Star! Legend!

That sorted it. I would just like to state, for anyone in the future, that the issue i was having was not due to Editor - It was due to the way you have to post ajax data back to the Expression Engine 2.x Control Panel (GET Works fine)

The ability to add the XID data was crucial in getting this to work.

Thanks for spending the time to help me out :) (PS consider another copy of editor sold!)

scottjones

Quick question, do you plan on updating your editor to implement html 5?

im thinking for the fieldtypes, it would be very handy for me to have a field type of 'email' and have options such as 'required' in the html for client side html 5 validation rather than having to check this at server side (lessen the load etc)

I know you can write custom fieldtypes, but this is more of displaying the input box:
[code]

[/code]

rather than custom validation etc

allan

Excellent - good to hear that did the business for you.

> im thinking for the fieldtypes, it would be very handy for me to have a field type of 'email' and have options such as 'required' in the html for client side html 5 validation rather than having to check this at server side (lessen the load etc)

This sounds like an idea case for a field type plug-in: http://editor.datatables.net/tutorials/field_types . Although it would be nice to have these directly in the Editor core, I'm reluctant to include any more than what is already there, in order to keep the core code size to a sensible point. Additional field types are relatively easy to add using field type plug-ins, and I will be starting a repository of such plug-ins in the near future, which can then add added to your project as and when required.

The only thing I would say is that I wouldn't rely fully on client-side validation since it is trivial for a "hacker" (someone with Firebug or Inspector...) to bypass client-side validation. The data would always need to be sanitised at the server, if it is a public facing app.

> consider another copy of editor sold!

:-)

Regards,
Allan

scottjones

[quote]
The only thing I would say is that I wouldn't rely fully on client-side validation since it is trivial for a "hacker" (someone with Firebug or Inspector...) to bypass client-side validation. The data would always need to be sanitised at the server, if it is a public facing app.
[/quote]

Couldn't agree more, but this is an internal system so the risk is minimal, server side validation will be included but i was just thinking about reducing the number of ajax calls.

a plugin it is then, i will see about getting a set of html 5 inputs with html 5 options sorted :)

scottjones

just looking into your field types plugin tutorial - is there a way to pass in options to the custom fieldtype?

allan

Yes - simply add your options to the object you pass into Editor for the field, and they will be added to the 'conf' parameter that is passed into the field type functions. So you could use that to control the 'required' flag for example.

Allan

lonnien

hehe. An inside system bears the same risk as an outside system and maybe even higher because people are so lax with security when they think they know the people. It does not even require an employee with evil intentions. Many a system has been brought to its knees by people entering data that was not anticipated and which can cause trouble.

Always sanitize the data at the server. They did not make up the GIGO saying because someone had too much time on their hands. You can destroy the usefulness of a fine database by simply introducing some bogus data.