Javascript - Using dropdown to target Object Property breaks after first use

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);

    });

};​

Answers


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/

   var cleanStr = '';
var viewDropDown;
var objStr;

$(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 () {
        setContent();
    });

    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);
    objStr;
    eval("objStr={" + str + "};");
    //End Parse String
    console.log(objStr)


};

function setContent() {
    viewDropDown = $('#selectView').val();
    $('#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);
};​

Need Your Help

Convert ASP.NET webform to multiple ASP.NET MVC projects

c# asp.net asp.net-mvc asp.net-mvc-4 webforms

I have a webform project that i will rebuild and convert to a new MVC project. When i do this, i want to separate pages in smaller projects.

Switching from MySQL to MYSQLi - loop not working

php mysql mysqli

I'm changing my site from using mysql to mysqli. So far the changes have been quite simple but I have a calendar page with for loops which doesn't work after the switch. I'm pretty sure it's the loop

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.