|
(function ($) { |
|
var makeKVDiv = function (fieldName, i, key, value) { |
|
var div = $("<div/>").attr({"class": "row", "data-i": i}); |
|
div.append($("<input type=text class=key />").attr({"name": fieldName + "/" + i + "/" + "key"}).val(key)) |
|
.append($("<input type=text class=value />").attr({"name": fieldName + "/" + i + "/" + "value"}).val(value)) |
|
.append($("<button class=delete />").text("Delete")); |
|
return div; |
|
}; |
|
|
|
var makeFieldsetForHstoreField = function (fieldName, initialData) { |
|
var fieldset = $("<fieldset/>").attr({"class": 'hstore', "data-for-field": fieldName}), |
|
i = 0; |
|
$.each(initialData, function (key, value) { |
|
fieldset.append(makeKVDiv(fieldName, i, key, value)); |
|
i += 1; |
|
}); |
|
fieldset.append($("<button class=add />").text("Add")); |
|
return fieldset; |
|
}; |
|
|
|
var getObjForHstoreFieldset = function (fieldset) { |
|
var obj = {}; |
|
fieldset.find("div.row").each(function () { |
|
var key = $(this).find("input.key").val(), |
|
value = $(this).find("input.value").val(); |
|
if (!(key === "" && value === "")) { |
|
obj[key] = value; |
|
} |
|
}); |
|
return obj; |
|
}; |
|
|
|
var updateTextFieldForFieldset = function (fieldset) { |
|
var fieldName = fieldset.attr("data-for-field"); |
|
$("textarea[name=" + fieldName + "]").html(JSON.stringify(getObjForHstoreFieldset(fieldset))); |
|
}; |
|
|
|
$("fieldset.hstore button.delete").live("click", function (ev) { |
|
ev.preventDefault(); |
|
var fieldset = $(this).parents("fieldset.hstore"); |
|
$(this).parent('div.row').remove(); |
|
updateTextFieldForFieldset(fieldset); |
|
}); |
|
|
|
$("fieldset.hstore button.add").live("click", function (ev) { |
|
ev.preventDefault(); |
|
var fieldset = $(this).parents("fieldset.hstore"), |
|
fieldName = fieldset.attr("data-for-field"), |
|
indices = fieldset.find("div.row").map(function () { return parseInt($(this).attr("data-i"), 10); }).get(), |
|
maxI = Math.max.apply(Math, indices); |
|
fieldset.find("button.add").before(makeKVDiv(fieldName, maxI + 1, "", "")); |
|
}); |
|
|
|
$("fieldset.hstore input").live("change", function () { |
|
var fieldset = $(this).parents("fieldset.hstore"); |
|
updateTextFieldForFieldset(fieldset); |
|
}); |
|
|
|
$(function () { |
|
$("textarea.hstore").each(function (i, elem) { |
|
var field = $(elem), |
|
fieldName = field.attr('name'), |
|
initialData = $.parseJSON(field.val()); |
|
field.hide().after(makeFieldsetForHstoreField(fieldName, initialData)); |
|
}); |
|
}); |
|
})(django.jQuery); |
Line 30, DictionaryField isn't imported anywhere.
Also in the JS I'm getting "Uncaught TypeError: Cannnot read properly 'length' of null