Hello, I'm having trouble posting JSON to a url using Flask, AJAX and Javascript. Essentially, I would code using a library Jquery Sortable to create a sorted list. From that sorted list I want to post to the server. The problem is that the server does not recieve the JSON post at all (or rather it doesn't know the content type). Now I've experimetned with multipe methods and it has led me to this issue of not posting. The information is posted below:
{% extends "base.html" %}
{%block title %}{{Title_Program}}{%endblock%}
{% block styles %}
{{super()}}
<!-- In <head> -->
<style type="text/css" >
body.dragging, body.dragging * {
cursor: move !important;
}
.dragged {
position: absolute;
opacity: 0.5;
z-index: 2000;
}
ol.simple_with_animation li.placeholder {
position: relative;
/** More li styles **/
}
ol.simple_with_animation li.placeholder:before {
position: absolute;
/** Define arrowhead **/
}
#GamblerOrderSource, #GamblerOrderTarget{
min-height: 50px;
margin: 0px 25px 10px 0px;
padding: 2px;
border-width: 1px;
border-style: solid;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
list-style-type: none;
list-style-position: inside;
}
#GamblerOrderSource {
border: 2px dashed #f8e0b1 !important;
background-color: #fefcf5 !important;
}
#GamblerOrderTarget {
border: 2px dashed #add38d !important;
background-color: #f6fbf4 !important;
}
#GamblerOrderSource li {
background-color: #fcf8e3;
border: 1px solid #fbeed5;
color: #c09853;
}
#GamblerOrderTarget li {
background-color: #ebf5e6;
border: 1px solid #d6e9c6;
color: #468847;
}
</style>
{% endblock %}
{% block content %}
<br>
<br>
<br>
<br>
<br>
<br>
<form id="orderform" method = 'POST'>
<div id='GamblerOrderSource'>
<ol class='simple_with_animation'>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
</div>
<div id='GamblerOrderTarget'>
<ol class='simple_with_animation'>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
</div>
<input type="submit" value="Continue" />
</form>
{% endblock %}
{% block scripts %}
{{ super()}}
<!-- In <body> -->
<script src="{{url_for('.static', filename='jquery-sortable.js')}}"></script>
<script type="text/javascript">
$SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
var items;
var adjustment;
var group = $("ol.simple_with_animation").sortable({
group: 'simple_with_animation',
pullPlaceholder: false,
// animation on drop
onDrop: function ($item, container, _super) {
var $clonedItem = $('<li/>').css({height: 0});
$item.before($clonedItem);
$clonedItem.animate({'height': $item.height()});
$item.animate($clonedItem.position(), function () {
$clonedItem.detach();
_super($item, container);
});
var data = group.sortable("serialize").get();
},
// set $item relative to cursor position
onDragStart: function ($item, container, _super) {
var offset = $item.offset(),
pointer = container.rootGroup.pointer;
adjustment = {
left: pointer.left - offset.left,
top: pointer.top - offset.top
};
_super($item, container);
},
onDrag: function ($item, position) {
$item.css({
left: position.left - adjustment.left,
top: position.top - adjustment.top
});
},
serialize: function (parent, children, isContainer) {
return isContainer ? children.join() : parent.text();
},
tolerance: 6,
distance: 10
});
$('#orderform').on('submit',function () {
items = JSON.stringify(data, null, ' ');
console.log(data);
$.ajax({
url: '/order',
type: 'POST',
data : items,
dataType:"json",
success: function(result) {
},
error: function(){
alert('Failure');
}
});
});
</script>
{% endblock %}