CODEWITHSUNDEEP
javascriptjqueryhtml
Chaney
Chaney

Reputation: 465

Selecting textareas within div tags

feel like im coming here way too often to ask questions but yet again I am stuck. I am attempting to select a textarea and allow myself to edit the text in another textarea, which works fine using textboxs but not with textareas. Every time I click on the div container I am getting an undefined result when looking for the textarea. Below is the code.

jQuery

     $(".textAreaContainer").live('click','div', function(){
        var divID = this.id;
        if ( divID !== "" ){

            var lastChar = divID.substr(divID.length - 1);
            var t = $('#' + divID ).find(':input');
            alert(t.attr('id'));

            t = t.clone(false);               
            t.attr('data-related-field-id', t.attr('id'));              
            t.attr('id', t.attr('id') + '_Add');
            t.attr('data-add-field', 'true');

            var text = document.getElementById(divID).innerHTML;
            //var textboxId = $('div.textAreaContainer').find('input[type="textArea"]')[lastChar].id;
            $('div#placeholder input[type="button"]').hide();
            var text = "<p>Please fill out what " + t.attr('id') +" Textarea shall contain</p>";

            if ( $('#' + t.attr('id')).length == 0 ) {
                $('div#placeholder').html(t);
                $('div#placeholder').prepend(text);
            }
        }
        else{

        }
    });

t.attr('id') should be returning textbox1(or similar) but instead just returns undefined.

I have tried .find(':textarea'),.find('textarea'),.find(text,textArea),.find(':input') and quite a few others that I have found through google but all of them return undefined and I have no idea why. A demo can be found here, http://jsfiddle.net/xYwaw/. Thanks in advance for any help guys, it is appreciated.

EDIT: Below is the code for a very similar example I am using. This does what I want to do but with textboxs instead of textareas.

     $('#textAdd').live('click',function() {
        var newdiv = document.createElement('div');
        newdiv.innerHTML = "Textbox " + textBoxCounter + " <br><div id='container" + counter + "' class='container'><li><input type='text' id='textBox" + textBoxCounter +"' name='textBox" + textBoxCounter + "'></li></div></br>";
        document.getElementById("identifier").appendChild(newdiv);
        textBoxCounter++
        counter++;
    });
    $(".container").live('click','div', function(){
        var divID = this.id;
        if ( divID !== "" ){
            var lastChar = divID.substr(divID.length - 1);
            var t = $('#' + divID).find('input');
            alert(divID);


            t = t.clone(false);
            t.attr('data-related-field-id', t.attr('id'));
            alert(t.attr('id'));
            t.attr('id', t.attr('id') + '_Add');               
            t.attr('data-add-field', 'true');


            var text = document.getElementById(divID).innerHTML;
            // var textboxId = $('div.container').find('input[type="text"]')[lastChar].id;
            $('div#placeholder input[type="button"]').hide();
            var text = "<p>Please fill out what " + t.attr('id') +" textbox shall contain</p>";

            if ( $('#' + t.attr('id')).length == 0 ) {
                $('div#placeholder').html(t);
                $('div#placeholder').prepend(text);
            }
        }
        else{

        }
    });

Upvotes: 0

Views: 459

Answers (1)

nnnnnn
nnnnnn

Reputation: 150040

First up remove the second parameter, 'div', from the first line:

$(".textAreaContainer").live('click','div', function(){

...to make it:

$(".textAreaContainer").live('click', function(){

Then change:

var t = $('#' + divID ).find(':input');

...to:

var t = $(this).find(':input');

Because you already know that this is the container so there's no need to select it again by id. Also the id attributes that you're assigning to your textarea containers have a space in them, which is invalid and results in your original code trying to select the element with '#textAreaContainer 0' which actually looks for a 0 tag that is a descendant of #textAreaContainer. So fixing the code that creates the elements to remove that space in the id is both a good idea in general and an alternative way of fixing this problem.

Upvotes: 1

Related Questions