I have some code that takes in a string, converts it into an Object and allows me to edit via a form. I have an import Function that allows me to bring in another string onto the same object, and I can target on my web form.
I am trying to use a DropDown control to allow me to select which Property in the Object I want to see in the form.
My problem is that once I set the dropdown to 1 of the 3 options I have and click Import however many times it takes to create the target property it breaks and does not allow me to focus on a different property. Its best that I walk you through my demo.
1. Demo Here: http://jsfiddle.net/vJBQq/1/
2. Set dropdown to “View_3”
3. Click Import Button 3 times and the form will populate
4. At this stage, it has dynamically created 3 Properties ‘View_1’, ‘View_2, and ‘View_3. And you are looking at View_3.
5. Try to use the dropdown to target a say View_1. It does not work.
I have two problems at this stage.
a). The dropdown does not target any of the other properties
b). now that the form has been populated, the Import button does not work anymore either. Both controls Return – ReferenceError: Button is not defined
What am I doing wrong to break this.
My code’:
var cleanStr = '';
var viewDropDown;
$(document).ready(function() {
//Import String
$('#import').click(function() {
ParseFunction();
});
});
//--------------------Run Import Parse and Set String------------------------------
//Build Initial Object LIst
function ParseFunction(parameterOne) {
$(document).on('change', '#selectView', function () {
ParseFunction();
});
newStr = 'View{ Image { BackgroundImage: Image.gif; Position: 0, 0; Width: 320; Height: 480; } Button { BackgroundImage: Button.gif; Transition: View2; Position: 49, 80; Width: 216; Height: 71; } Button { BackgroundImage: Button2.gif; Position: 65, 217; Width: 188; Height: 134; } Label { Position: 106, 91; Width: 96; Height: 34; Text: "Button"; FontSize: 32; Color: 0.12549, 0.298039, 0.364706, 1; } Scroll { Position: 106, 91; Width: 96; Height: 34; Button{ BackgroundImage: Button2.gif; Position: 65, 217; Width: 188; Height: 134; } Button{ BackgroundImage: Button2.gif; Position: 65, 217; Width: 188; Height: 134; } }}' + ' ';
str = cleanStr += newStr;
// Set viewDropDown to current selectView State
viewDropDown = $('#selectView').val();
var i = {};
str = str.replace(/(\w+)\s*\{/g, "$1:{"); // add in colon after each named object
str = str.replace(/\}(\s*\w)/g, "},$1"); // add comma before each new named object
str = str.replace(/;/g, ","); // swap out semicolons with commas
str = str.replace(/,(\s+\})/g, "$1"); // get rid of trailing commas
str = str.replace(/([\d\.]+(, [\d\.]+)+)/g, "[$1]"); // create number arrays
str = str.replace(/"/g, ""); // get rid of all double quotes
str = str.replace(/:\s+([^\[\d\{][^,]+)/g, ':"$1"'); // create strings
//str = str.replace(/([^:]+):{/g, function(m, p1) { return p1 + "_" + (++i).toString() + ":{"; });
str = str.replace(/(\S+):{/g, function (m, p1) {
i[p1] = (i[p1] || 0) + 1;
return p1 + "_" + i[p1].toString() + ":{";
});
//console.log(str);
var objStr;
eval("objStr={" + str + "};");
//End Parse String
console.log(objStr)
$('#importCode').remove();
var $objectList = $('<div id="importCode" />').appendTo($('#code'));
$.each(objStr[viewDropDown], function (k, v) {
$('<div/>').append(k).appendTo($objectList).on('click', function () {
$('#options .wrapper').show();
$('#options div div').hide();
var $wrapper = $('#options .wrapper').empty();
if (typeof v === 'string') {
$('<div class="item" />').append('<span class="key">' + k + '</span>' + '<input value="' + v + '"/>').appendTo($wrapper);
} else { //object
$('<h3 class="formHeading" />').append(k).appendTo($wrapper);
$.each(v, function (key, val) {
$('<div class="item" />').append('<span class="key">' + key + '</span>' + '<input value="' + val + '"/>').appendTo($wrapper);
});
}
$("<button>Save</button>").appendTo($wrapper).on('click', function () {
if (typeof v === 'string') {
v = $(this).closest(".wrapper").find("input").val();
} else { //object
$(this).closest(".wrapper").find(".item").each(function (i, div) {
var $div = $(div),
key = $div.find(".key").text(),
val = $div.find("input").val();
v[key] = val;
});
}
});
});
cleanStrPre = JSON.stringify(objStr);
cleanStr = cleanStrPre.substring(1,cleanStrPre.length-1);
$('#print').append(cleanStr);
});
};
I figured it out. Instead of trying to implement it as a single function, I separated them into a Parse into Object function and a Set form function.
The solution here http://jsfiddle.net/vJBQq/2/