10 Replies - 319 Views - Last Post: 18 July 2019 - 12:30 PM Rate Topic: -----

#1 DarenR   User is online

  • D.I.C Lover

Reputation: 624
  • View blog
  • Posts: 4,166
  • Joined: 12-January 10

adding javascript function to a dynamically created text box

Posted 18 July 2019 - 08:52 AM

hey all,

cant seem to find info on adding javascript function to a dynamically created textbox.

scenario:
on button click a table row is created with a drop down and 2 text boxes (unlimited rows)

now the client wants me to do a math calculation on textbox1 for all the rows

is there a way to add javascript function for those dynamically created textboxs?

also on button click above it creates a postback to create the new row and rebuilds the controls

vb.net back end

Is This A Good Question/Topic? 0
  • +

Replies To: adding javascript function to a dynamically created text box

#2 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15166
  • View blog
  • Posts: 60,698
  • Joined: 12-June 08

Re: adding javascript function to a dynamically created text box

Posted 18 July 2019 - 08:58 AM

If you give all the textboxes a common class ID, I believe you can use jquery to search the DOM object for those specific boxes and do what ever to them.

https://api.jquery.com/class-selector/
Was This Post Helpful? 0
  • +
  • -

#3 DarenR   User is online

  • D.I.C Lover

Reputation: 624
  • View blog
  • Posts: 4,166
  • Joined: 12-January 10

Re: adding javascript function to a dynamically created text box

Posted 18 July 2019 - 09:12 AM

yeah not sure how to dynamically add the class id

it isnt an option (underlines red)

 newtextBox.ID = rowIDName & i
        newtextBox.CssClass = "textboxStyle3"
        cell2.Controls.add(newtextBox)
        row.Cells.add(cell2)


further down  reasonsTable.Controls.Add(row)




ive tried
newtextBox.class = "blah"
cell2.Controls.class = "blah"


and so on


this is all there is in the asp.net
 <asp:Table Width="80%" runat="server" id="reasonsTable">
                                </asp:Table>

Was This Post Helpful? 0
  • +
  • -

#4 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15166
  • View blog
  • Posts: 60,698
  • Joined: 12-June 08

Re: adding javascript function to a dynamically created text box

Posted 18 July 2019 - 09:21 AM

It works for panels..
        <asp:Panel runat="server" ID="myPanel"></asp:Panel>


        Dim foo As New TextBox
        foo.ID = "mytextbox"
        foo.CssClass = "barClass"

        myPanel.Controls.Add(foo)


Let me see if I can do a table... give me a few.
Was This Post Helpful? 0
  • +
  • -

#5 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15166
  • View blog
  • Posts: 60,698
  • Joined: 12-June 08

Re: adding javascript function to a dynamically created text box

Posted 18 July 2019 - 09:26 AM

Yeah it works for tables too.
' create the textbox and info
        Dim foo As New TextBox
        foo.ID = "mytextbox"
        foo.CssClass = "barClass"

'create the row and cell
        Dim a As New TableRow
        Dim b As New TableCell

'give the cell an id because it's fun.
        b.ID = "bID"

'add textbox control to cell's controls.
        b.Controls.Add(foo)

'cell to the row
        a.Cells.Add(B)/>
'row to the table.
        Table1.Rows.Add(a)


   <asp:Table ID="Table1" runat="server">
            <asp:TableHeaderRow ID="headerRow">
                <asp:TableCell>test col</asp:TableCell>
            </asp:TableHeaderRow>
        </asp:Table>

Was This Post Helpful? 0
  • +
  • -

#6 DarenR   User is online

  • D.I.C Lover

Reputation: 624
  • View blog
  • Posts: 4,166
  • Joined: 12-January 10

Re: adding javascript function to a dynamically created text box

Posted 18 July 2019 - 09:31 AM

well im already dynamically creating a css class for the text boxes but that css class is used everywhere.

maybe ill have to make one just for these boxes?

o giving the cell an id will probably be the best option and then just find the id of that cell i guess.

i am hoping this doesnt break my spanish/english method since it has to search through all the controls to change the wording---
Was This Post Helpful? 0
  • +
  • -

#7 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15166
  • View blog
  • Posts: 60,698
  • Joined: 12-June 08

Re: adding javascript function to a dynamically created text box

Posted 18 July 2019 - 09:32 AM

Dynamically creating a CSS? Like at runtime? That seems.. bad.

I mean do what ever.. the CSS Class was just a quick way to identify the textboxes to jquery. Feel free to go the route of any of the other dom searches.
Was This Post Helpful? 0
  • +
  • -

#8 DarenR   User is online

  • D.I.C Lover

Reputation: 624
  • View blog
  • Posts: 4,166
  • Joined: 12-January 10

Re: adding javascript function to a dynamically created text box

Posted 18 July 2019 - 10:07 AM

i already add an id for the text box and the css

newtextBox.ID = rowIDName & i

        newtextBox.CssClass = "textboxStyle3"




so if i make that textboxStyle3 as textboxStyleInput and use that class, i may be able to grab the info

thoughts?
Was This Post Helpful? 0
  • +
  • -

#9 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15166
  • View blog
  • Posts: 60,698
  • Joined: 12-June 08

Re: adding javascript function to a dynamically created text box

Posted 18 July 2019 - 10:28 AM

Try it out?
Was This Post Helpful? 0
  • +
  • -

#10 DarenR   User is online

  • D.I.C Lover

Reputation: 624
  • View blog
  • Posts: 4,166
  • Joined: 12-January 10

Re: adding javascript function to a dynamically created text box

Posted 18 July 2019 - 12:09 PM

it doesnt seem to work with dynamic creations



the top part always loads on page load which is good (that it loads) however the .blur doesnt seem to work when i go into one of the dynamically created textboxes.

on load it shows the id as null which is true because the item isnt created until you tell it too. however the function above doesnt seem to attach to the dynamic text boxes thus the blur doesnt work
$(".textboxStyleDTInput").blur(GetTotal());


function GetTotal()


{

    alert('here');
    var total = 0;
    alert(total);
        for(i = 1; i < 50; i++) {
            alert(i);
            var ctl = document.getElementById('MainContent_txtReasonMinutes' + i);
            alert(ctl);
            alert('nocontrol');
            if (ctl == null)
               
                return total;
           
            else
            {
                total = total + ctl.value;
            }
        }
        alert(total);
        return total;
    }

Was This Post Helpful? 0
  • +
  • -

#11 DarenR   User is online

  • D.I.C Lover

Reputation: 624
  • View blog
  • Posts: 4,166
  • Joined: 12-January 10

Re: adding javascript function to a dynamically created text box

Posted 18 July 2019 - 12:30 PM

i didnt think this would work but here for future reference ---

 newtextBox.ID = rowIDName & i
        newtextBox.CssClass = "textboxStyleDTInput"
          newtextBox.Attributes.Add("onblur","alert('Hi There');")
        cell2.Controls.add(newtextBox)
        cell2.ID = "DTMinutes"
        row.Cells.add(cell2)




i tested this with that alert and it actually showed up
now on to the real function
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1