<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/site_media/js/jquery.cookie.js"></script></javascript>
<script type="text/javascript" src="/site_media/js/ms-Dropdown-master/js/msdropdown/jquery.dd.js"></script>
<link rel="stylesheet" href="/site_media/js/ms-Dropdown-master/css/msdropdown/dd.css">
</head>
<body>
<script type="text/javascript">
var imagesCombo;
var categoriesCombo;
var catOptionJson;
var imagesOptionJson;
var categoriesOptionJson;
var jsonData;
$(document).ready(function()
{
$("body select").msDropDown();
var csrftoken = $.cookie('csrftoken');
function csrfSafeMethod(method)
{
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
function sameOrigin(url)
{
// test that a given url is a same-origin URL
// url could be relative or scheme relative or absolute
var host = document.location.host; // host + port
var protocol = document.location.protocol;
var sr_origin = '//' + host;
var origin = protocol + sr_origin;
// Allow absolute or scheme relative URLs to same origin
return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
(url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
// or any other URL that isn't scheme relative or absolute i.e relative.
!(/^(\/\/|http:|https:).*/.test(url));
}
$.ajaxSetup(
{
beforeSend: function(xhr, settings)
{
if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url))
{
// Send the token to same-origin, relative URLs only.
// Send the token only if the method warrants CSRF protection
// Using the CSRFToken value acquired earlier
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
console.log('Before Image Edit Form POST');
$("#ImageAssignmentForm").submit(function(event)
{
console.log($("#ImageAssignmentForm").serialize())
event.preventDefault();
$.ajax(
{
type:"POST",
url:"/UploadImages/ImageAssignSubmit/",
dataType: "json",
data: $("#ImageAssignmentForm").serialize(),
success: function(json)
{
count = 0;
$.each( json, function(key, value)
{
console.log( key, value.fields );
count++;
});
}
});
});
console.log('Before Image Edit Form GET');
$.ajax(
{
type:"GET",
url:"/UploadImages/ImageEditJson/",
dataType: "json",
success: function(json)
{
count = 0;
console.log(json);
jsonData = json;
for (var countRemove = 0; countRemove < imagesCombo.length; countRemove++)
{
imagesCombo.remove(0);
// console.log(countRemove);
}
for (var countRemove = 0; countRemove < categoriesCombo.length; countRemove++)
{
categoriesCombo.remove(0);
// console.log(countRemove);
}
$.each( json, function(key, value)
{
if ( value.model == 'upload_images_app.image' )
{
imagesOptionJson = {value:value.pk, image:value.fields.thumbnail_image_location};
imagesCombo.add(imagesOptionJson);
}
if ( value.model == 'main_app.category' )
{
// Remove Date Renew After Everything Is Working.
catOptionJson = {value:value.pk, text:value.fields.category};
console.log("categories");
console.log(catOptionJson);
categoriesCombo.add(catOptionJson);
}
});
imagesCombo.set("selectedIndex", 0);
categoriesCombo.set("selectedIndex", 0);
}
});
$("body select").msDropDown();
imagesCombo = $("#id_thumbnail_image_location_id").msDropDown().data("dd");
categoriesCombo = $("#id_category").msDropDown().data("dd");
});
</script>
<h2>Image Upload And Edit</h2>
{% if form.errors %}
<p style="color: red;">
Please correct the error{{form.error|pluralize}} below.
</p>
{% endif %}
<form id="ImageAssignmentForm" action="." method="post">
{% csrf_token %}
<p>
<label for="id_category">Category:</label>
<select style="width:500px;" name="category" id="id_category" class="mydds" onchange="showValue(this.value)">
</select>
</p>
<p>
<label for="id_thumbnail_image_location_id">Image Gallery:</label>
<select style="width:130px;" name="thumbnail_image_location_id" id="id_thumbnail_image_location_id" class="mydds" onchange="showValue(this.value)">
</select>
</p>
<input type="submit" value="Assign Image To Category" />
</form>
</body>
</html>
No comments:
Post a Comment