Solved

Dynamically add a textbox with same size and class as textbox above it

Posted on 2012-12-20
38
350 Views
Last Modified: 2013-01-10
Im trying to create a comment page but would like to dynamically add a textbox with same class and size,look as the textbox above it when a button is click that says "Add comment"
Here's the html

<tr>
      <td class ="style3">
            <asp:Label ID="Label1" runat="server" Text="Comment:"
                cssClass="pit" Width="137px"></asp:textbox>
   </td>
   <td>
        <asp:TextBox ID="TextBox7" runat="server" cssclass="hist" height="51px"
                 TextMode="MultiLine" Width="384px"></asp:TextBox>
</td>
0
Comment
Question by:zachvaldez
  • 21
  • 7
  • 4
  • +3
38 Comments
 
LVL 10

Expert Comment

by:ienaxxx
Comment Utility
try this

function addTextbox(theBoxID){
 theBox = document.getElementById(theBoxID);
 theParent = theBox.parentNode;
 newBox = theBox.CloneNode(true);
 theParent.appendChild(newBox);
}
0
 
LVL 74

Expert Comment

by:käµfm³d 👽
Comment Utility
Why hard-code the size of the box into the HTML? Why not include that in the CSS as well?
0
 

Author Comment

by:zachvaldez
Comment Utility
how would I edit the hist class to show properties as size,font,etc.
thanks.. I was trying to do it earlier but I get error when I assin gthe height property usin px..
0
 

Author Comment

by:zachvaldez
Comment Utility
how would I implement that in HTML wiht a button click? Im getting an error calling the function saying its not part of the page.
0
 
LVL 10

Expert Comment

by:ienaxxx
Comment Utility
did u try the function?

if u need to dup the entire row you can use:

function addTextbox(theBoxID){
 theBox = document.getElementById(theBoxID).parentNode.parentNode;
 theParent = theBox.parentNode;
 newBox = theBox.cloneNode(true);
 theParent.appendChild(newBox);
} 

Open in new window


sry for case errors...
0
 

Author Comment

by:zachvaldez
Comment Utility
Im getting error doing this way. How should I correct this?

<Button ID="Button2" runat="server" text="Add comment" OnClick="addtextbox('TextBox4')

TextBox4 is the parent or the textbox i want to inherit/copy  above it.
0
 

Author Comment

by:zachvaldez
Comment Utility
I change OnClick to OnClientclick('TextBox4') but I get an error..
Microsoft JScript runtime error: Object does'nt support property or method
'getElementByID"
0
 

Author Comment

by:zachvaldez
Comment Utility
can someone put his thoughts on this please? thanks
0
 

Author Comment

by:zachvaldez
Comment Utility
yeah. it should be document.getElementById
0
 

Author Comment

by:zachvaldez
Comment Utility
now Im getting error Unable to get value of the property parentNode': object is null or undefined
0
 

Author Comment

by:zachvaldez
Comment Utility
Please explain what your code does? I only want to copy the textbox4 and not go thru the other level of parentnodes.
I keep on getting this error
'
'Unable to get value of the property parentNode': object is null or undefined '
0
 

Author Comment

by:zachvaldez
Comment Utility
This function does'nt work.
0
 
LVL 10

Expert Comment

by:ienaxxx
Comment Utility
My code works PERFECTLY and HERE ATTACHED is the PROOF.
i don't wanna know nothing about your ** of ASP.NET code.

You asked for a JAVASCRIPT HELP. You GET IT.
trythis.html
0
 
LVL 1

Expert Comment

by:jinsonaf
Comment Utility
Using code behind you can do it very easy. Just create a string of html with the textbox and append it to the place where you want the control to appear. For example you can generate the string with a span or something with the textbox all the styles etc and append it to the container.
0
 
LVL 11

Expert Comment

by:mcnute
Comment Utility
with jquery it would be something like that:

$('#id_of_button_copytextbox_invoker').click(function(){ 
      var elclone = $('#id_of_element_to_clone').clone();
      elclone.appendTo('#id_of_element_where_clone_gets_append');
});

Open in new window

0
 

Author Comment

by:zachvaldez
Comment Utility
Im still getting an error on the parentnode,
Im using asp.net control textbox...
0
 
LVL 11

Expert Comment

by:mcnute
Comment Utility
I've made up a sample how to append a textarea with jquery. Try it out and modify to your needs.
index.html
0
 

Author Comment

by:zachvaldez
Comment Utility
that's cool.
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 11

Expert Comment

by:mcnute
Comment Utility
Really? If it did work out for you, please send me some points, thanks! Merry Xmas, mcnute.
0
 
LVL 10

Expert Comment

by:ienaxxx
Comment Utility
An asp.net control box is translated at runtime to an input control or whatever else...
Have a look at your generated html to identify which component is identified by the id u are passing to the function. Analyze it to view if it has parent node or not. It could be that u place the element in a second level from the root of body.. Butprobably there is a problem in the id string u passinthe function call... Are u passing the exactid string?
0
 
LVL 10

Expert Comment

by:ienaxxx
Comment Utility
OK, i got the solution:

The ID you assign to an asp:textbox is NOT the HTML object ID you get when the page is ran.
So the error is related to the fact that it can't reference to the object correctly.

You should look at HTML and identify the "client side" id as it will never change since the object is created in the source.

OR
you must find another way to identify the object, like assigning an id to the parent object (the TD) and duplicate that one.

OR (the clean solution):
You can use the property ClientIDMode Static (since .NET FW 4, i'd bet) on the object.


OBVIOUSLY you SHOULD change the ids of the duplicated objects each time you run the js code, otherwise you'll get unpredictable results.
You can do this adding a line:

function addTextbox(theBoxID){
theBox = document.getElementById(theBoxID).parentNode.parentNode;
theParent = theBox.parentNode;
newBox = theBox.cloneNode(true);
newBox.id = 'whateveridulike';
theParent.appendChild(newBox);
} 

Open in new window

and you can use Math.random() to randomize


OBVIOUSLY as above, you can't expect that an object duplicated client-side (javascript) will keep any state of the page as an ASP.NET object does.
0
 

Author Comment

by:zachvaldez
Comment Utility
I put an Id to the td and tested it but it copied entire table again. Id like to copy on the
particular row. thanks
0
 

Author Comment

by:zachvaldez
Comment Utility
is it possible also that the textbox be 'clear' /no text/empty  when it copies down?
Because when the textbox being copied had text, it copies down the text too which should'nt.
0
 
LVL 11

Expert Comment

by:mcnute
Comment Utility
Just clear the value like so:

$('yourclonedtextbox').val('');

Open in new window

0
 

Author Comment

by:zachvaldez
Comment Utility
ienaxx, in your code, how would the textbox be cleared when copied down so it won't copy the data that is in the previous textbox?
0
 

Author Comment

by:zachvaldez
Comment Utility
function addTextbox(theBoxID){
theBox = document.getElementById(theBoxID).parentNode.parentNode;
theParent = theBox.parentNode;
newBox = theBox.cloneNode(true);
newBox.id = 'whateveridulike';
theParent.appendChild(newBox);
}

This works and adds a textbox;however it brings down the content of the copied textbox.
What is needed in the javascript to bring down with a blank contents?
0
 

Author Comment

by:zachvaldez
Comment Utility
where will this line be added
$('yourclonedtextbox').val('');
0
 

Author Comment

by:zachvaldez
Comment Utility
I think the javascript copies the row and if the textbox in that row has content it copies it too.
How can I clear the content of the textbox in that row???
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
I think what you are asking for in your question and what you want are two different things.  Use the system you are on here with EE as an example.  You post a comment at the bottom of the page,  your comment gets saved to a database which is sorted by the post making the most recent post at the bottom just before the comment box.  The comment box gets pushed down because it comes after the dynamically generated content.  And that is all you need to do.  No javascript required.  

If you need to think of this in tables then here is one way to think of it.


<table>
<!-- place your dynamically  generated comments below using your asp ->
<% start looping through data%>
<tr>
<td><% asp code%></td>
<td><% asp code%></td>
</tr>
<%end loop%>
<!-- the row above will convert to multiple rows when your asp runs against your database->

<!-- below is a static form to input comments.  It will always be at the bottom of the page pushed down by your dynamic content above ->
<form>
<tr>
<td><label for="textarea"></label></td>
<td><textarea name="textarea" id="textarea" cols="45" rows="5"></textarea></td>
</tr>
</form>
</table>
0
 

Author Comment

by:zachvaldez
Comment Utility
hi,

$(document).ready(function() {
  $('#addit').click(function(){
    var html = $('table td:first').html();
    var clon = '<br /><textarea class="response">add a comment...</textarea>';
    $('table td:first').append(clon);
   
   
   
    });
});

in this jquery, what is table td:first?
0
 

Author Comment

by:zachvaldez
Comment Utility
IM using asp.net control 'TextBox4' and I can't seem know where to place textarea...
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
td:first means the first td (cell).  That code will simply render

<td><br /><textarea class="response">add a comment...</textarea></td>

But forget about jquery.    You don't need it at least in this manner unless you are going to use it for an ajax call to update your database.  

You will simply loop through your data to display comments you currently have.  Then after your looping, you simply present your form to submit data to the server and update your database.

Are you able to display a page and loop through your data?  What is the code for that page?

Unless I understand what you want to do is wrong, if you simply add duplicate comment box's like the comment above from @ienaxxx nothing will happen to your database and the next time the page refreshes it will go back to the same.

I think to go any further you should post a simplified version of your page so we can help you better.
0
 

Author Comment

by:zachvaldez
Comment Utility
<table id="table1" class="style19">
        <caption>
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        </caption>
        <tr>
            <td class="style36" colspan="2">
                <asp:Label ID="Label17" runat="server" Text="First Position:"  Width="159px"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="TextBox1" runat="server" Width="377px" Style="margin-left: 0px"
                    CssClass="style2"></asp:TextBox>
               
            </td>
        </tr>
        <tr>
            <td class="style36" colspan="2">
                <asp:Label ID="Label18" runat="server" Text="Second Position:"  class="style35"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="TextBox2" runat="server" Width="377px" Style="margin-left: 0px"
                    CssClass="style2"></asp:TextBox>
               
            </td>
        </tr>
        <tr>
            <td class="style36" nowrap="nowrap" colspan="2">
                <asp:Label ID="Label19" runat="server" Text="Current Assignment:"
                    Width="137px"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="TextBox3" runat="server" Width="382px" Style="margin-left: 0px"
                    CssClass="style2"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="style36" nowrap="nowrap" colspan="2">
                <asp:Label ID="Label21" runat="server" Text="List of Assignments:"
                    Width="137px"></asp:Label>
            </td>
            <td>
              <asp:TextBox ID="TextBox4" runat="server" Width="382px" Style="margin-left: 0px"
                    CssClass="style2" TextMode="MultiLine" Height="98px"></asp:TextBox>
                   

           
            </td>
        </tr>
        <tr>

            <td class="style37">
                <asp:Button ID="Button2" runat="server" Text="Add" />
            </td>
           
            <td class="style36">
                <asp:Button ID="Button1" runat="server" Text="Save" />
            </td>
           
                   </tr>
        <tr>
            <td class="style35" colspan="3">
                <asp:Label ID="Label26" runat="server"></asp:Label>
            </td>
        </tr>
    </table>
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
Let's forget about your ASP for now and just create a static page of what the end result should look like.

Is this a simplified representation of what you want to end up with? http://jsbin.com/ayakod/1/edit

If not, please edit the html and make it look like what you want to end up with.  

If that does look ok, then you only need one form to ADD comments.  Or are you also  looking for a way to EDIT.  

Lastly, was there a reason your table had colspan ="2"? when it did not look like it was needed?  That messed your table up in a couple of places.
0
 
LVL 10

Expert Comment

by:ienaxxx
Comment Utility
Add this row
newBox.value = "";

Open in new window


before the appendchild one, to clear the typed content.
0
 
LVL 10

Accepted Solution

by:
ienaxxx earned 400 total points
Comment Utility
If you have any problems of duplicating the table instead of the row, you should modify the script and delete a ".parentNode". I assume you can make it by yourself, here.

As told, if you want to keep info through page states, you should forget js (unless you want to end up with a custom ajax saving the info) and create a custom function in C# that duplicates the textbox and whatever else.



If so (...well, after understanding you was in the wrong EE section to post the question....), have a look here:

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.textbox.aspx

Perhaps you'll find that it's possible to retrieve the properties of the controls and duplicate those by using a function.

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol.copybaseattributes.aspx
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol.style.aspx
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol.applystyle.aspx

Hope this helps.
0
 

Author Closing Comment

by:zachvaldez
Comment Utility
thanks for working hard on my question.
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now