POST payload data to database using XMLHttpRequest rails - ruby-on-rails

Question

I'm working on a tournament bracket based on the GOjs library, The bracket has score input.
Once my user is done editing the bracket I save the bracket into a JSON variable :
function save() {
var tojs = myDiagram.model.toJSON();
var payload = JSON.parse(tojs);
stringify_tojs = JSON.stringify(payload);
myDiagram.isModified = false;
I use XMLHttpRequest to able to post the payload into my rails model that handles 'payload' :
var request = new XMLHttpRequest();
request.onload = callback;
request.open("post", "http://localhost:3000/malesingles");
request.setRequestHeader("Content-Type", "application/json");
request.send(payload);
I don't know where I went wrong but I'm certain it's around my
controller params but I can't find my mistake already been a week, the
controller looks something like this :
#tournoi = Tournoi.new(bracket_params)
if #tournoi.save
redirect_to root_url
flash[:success] = "Your tournament bracket has been validated!"
# redirect_to #tournoi
else
render 'new'
end
end
I have included the bracket_params in private settings
def bracket_params
params.require(:tournoi).permit(:payload)
end
Tried different method to post the payload none really work, would appreciate some help to understand where I went wrong, I get a param is missing or empty :/.

Answer 1

#DezzH check out my latest commits from my repo https://github.com/fabriziobertoglio1987/sprachspiel/tree/feature/purchase-system I just built something like that using coffescript.. the commits include description of my work
basically what I figured out is, post request do not pass the parameters in the url so it is not easy to find them in the request, but you can check in your network tab
as you can see from the image I am passing
createPurchase: ->
$.ajax
url: "/products"
method: "POST"
dataType: "json"
data: { items: {product_id: '1', name: 'test' }}
error: (jqXHR, textStatus, errorThrown) ->
console.log "AJAX Error: #{textStatus}"
success: (data, textStatus, jqXHR) ->
console.log "Successful AJAX call: #{data}"
console.log data
then I set just a binding.pry in the controller and I can see my params there