CODEWITHSUNDEEP
javascriptjqueryhtml
Chaney
Chaney

Reputation: 465

Changing content of dynamically generated textboxs within Divs

I have a system that when a button is pressed a textbox is created on the left of screen and surrounded in a div. Each new text box is named textbox1,2 etc. What I want to do is when the user clicks on the div surrounding it then the textbox replaces the button on the right of the screen and the user is able to type into the newly generated textbox which shall populate the textbox on the left of the screen as well. Reason I want to do this is because the textbox on the left shall be uneditable unless the user clicks on the div and edits the box on the right. I cannot seem to figure out how to do it.

Please forgive any mistakes in missing tags etc as this is a severely edited version. Also before looking at code below you may want to look at the demo I set up. http://jsfiddle.net/JHmaV/335/.

Here is the HTML code

    <html>
<body>
    <table width ="100%" alight="right">
        <td width ="51.5%"></td>
        <td> <div id="addField" class="tabOptions">Add field</div></td>
    </table>

    <table align ="left"style="background-color: white" width="100%">


    </tr>
    <td width ="50%">
        <ul id ="firstColumn">
            <div id="identifier">
            </div>
        </ul>
    </td>
    <td>
        <ul id ="secondColumn" width="5%">
            <div id="placeholder">
                <div id="mainPanel">
                    <li><input type="button" class="formCreationButton" id="textAdd" value="Single line text" /></li>

                </div>
            </div>
        </ul>
    </td>
    <tr>
</table>

And here is the jQuery

      var counter = 0;
var textBoxCounter = 1;
var tempStorage = $('div#placeholder').html();



function setValue(target) {

    $("textBox1").replaceWith("<h2><input type='text' onkeydown='setValue(this)' value='"+ target.value +"' id='" + target.id +"' name='" + target.id +"')'></h2>");

    target.value = target.value;
}
function changeHeader(target) {

    if(target.id == "formNameChange"){
        $('h2').replaceWith('<h2>' +target.value + '</h2>');
    }
    else{
        $('h4').replaceWith('<h4>' +target.value + '</h4>');
    }
}

$(document).ready(function() {

     $("#addField").live('click','div',function(){            
        $('div#placeholder').html(tempStorage);
    });

    $('#textBox1').live('keyup',function() {

        alert("TESTING");
    });
    $('#textBox1').live('keypress',function ()
    {
        $('textBox1').val('Changed Value');
        alert('test');
    });
    $('#textBox1').live('onFocus',function ()
    {

        alert('test');
    });
    $(".container").live('click','div',function(){

        var divID = this.id;
        if(divID != ""){
            var lastChar = divID.substr(divID.length - 1);
            var content = document.getElementById(divID).outerHTML;
            var text = document.getElementById(divID).innerHTML;
            var textboxId = $('div.container')
            .find('input[type="text"]')[lastChar]
            .id;
            $('div#placeholder').html(content);
                                alert(textboxId);
        }
        else{

        }
    });

    $('#textAdd').live('click',function() {
        var newdiv = document.createElement('div');
        newdiv.innerHTML = "Textbox " + textBoxCounter + " <br><div id='container " + counter + "' class='container'><li><input type='text' onkeydown='setValue(this)'  id='textBox " + textBoxCounter +"' name='textBox " + textBoxCounter +"')'></li></div></br>";
        document.getElementById("identifier").appendChild(newdiv);
        textBoxCounter++
        counter++;
    });
});​

Please note that I am using jQuery 1.4.4. I have had several attempts at this and cannot do it correctly. Any help will be greatly appreciated, thank you in advance. Paul.

Upvotes: 0

Views: 547

Answers (1)

Jason L.
Jason L.

Reputation: 2484

There are a lot of problems with what you posted. I don't understand what you're doing well enough to fix it all, but here's what I found that's probably causing at least some (if not all) of your problems:

  1. You cannot have spaces in element IDs. That's not valid HTML.
  2. You end up with two inputs that have the same id (the one on the left, and then one that shows up on the right when you click inside the left text box). This will cause any events you set through $('#myId').live to also be bound to this newly created text box.
  3. If you elements with the same id (as I said above). This is not valid HTML.

EDIT:

Here is a jsFiddle that does what you're looking for (I think! hah). I modified your code a bit to get it to work but it should be pretty self explanatory. When you focus a text box, I create a new one, setup some data- attributes that link back to the original text box, and then set a live event listener for the text box. When a keyup happens, I figure out the text box that's related to the one you're typing in and update the value of it.

Make sense?

It should be noted that this isn't the CLEANEST solution out there as the code is kinda messy (it could be cleaned up). This should, however, get you started on a path that works. I'll leave the refactoring up to you :)

http://jsfiddle.net/JHmaV/338/

Upvotes: 1

Related Questions