aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes JavaScript created components do not respond to JavaScript functions. Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Spring in Action this week in the Spring forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "JavaScript created components do not respond to JavaScript functions." Watch "JavaScript created components do not respond to JavaScript functions." New topic
Author

JavaScript created components do not respond to JavaScript functions.

Alexey Timokhin
Greenhorn

Joined: Mar 23, 2012
Posts: 25
Good day once again, CodeRanchers.

The set up:
I have a JSP project that uses JavaScript. When the user clicks a button, a new text box beside of it is created (without the page refresh, of course). Now the problem is, this dynamically generated text box does not respond to the JavaScript inside of my JSP.

Here is what I mean. All my text boxes that are generated on refresh are assigned to a class, so when their values are changed, a JS function runs and validates the input. It works fine for all of them. However, this new text box does not respond to any of those functions, even though when I created it, I included the same class name.

What could be the problem of it? Or better yet, is it possible to do what I am trying to do?

Muchas gracias in advance :)
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61433
    
  67

Alexey Timokhin wrote:I have a JSP project that uses JavaScript. When the user clicks a button, a new text box beside of it is created (without the page refresh, of course). Now the problem is, this dynamically generated text box does not respond to the JavaScript inside of my JSP.

Correction, not "of my JSP" but "of my HTML". Once the response leaves the server, it is no longer a JSP, it's simply an HTML page. JavaScript running in the page has no knowledge that the page was generated from a JSP. It's just HTML once it gets to the browser.

That's why this topic has been moved from the JSP forum to the HTML forum. There is no JSP-ness to this question.

What could be the problem of it?

You say that you are creating the element correctly, but you probably are not. Have you used the browser's JavaScript debugger to look at the element after you create it and to make sure that it matches the pother elements to do work?

[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Piyush Mangal
Ranch Hand

Joined: Jan 22, 2007
Posts: 196
Can you share some code as to how you are creating textbox?
How are you binding click event to newly created text box?
Are you using some Java Script library like JQuery in your project?
Alexey Timokhin
Greenhorn

Joined: Mar 23, 2012
Posts: 25
My bad about the section choice. I quickly skimmed through the first letters of names and was surprised not to see JS. My mistake.



Small explanation of the line:
Table: mainTable
curRow: the row at which I am working on.
5 + i: because all boxes are generated in a table, and I make more than 1, they are looped.

at .html(of a <td>) is where I start creating the text box.

editAllocationBox is the class name that I was talking about. I thought that I was declaring it wrong, but there is also a CSS style tied to that class, and when the text box is created, it is styled like all the others, so the name is correct.

@Bear: I'm not really sure what you mean "JavaScript debugger". I did a $[component].html(), and it shows that it was created normally, with class=editAllocationBox like required.

@Piyush: I am using JQuery in my project, and all the JS functions are stored in an external .js file. I tried bringing it back inside the .jsp, but still no result. All the code that creates it is posted above, because the visual aspect works. They are generated, properly styled and whatnot, all except for responding JS functions. This brings me to your 2nd point. I'm not sure what you mean by "binding" it. My JQuery function is a simple (".editAllocationBox").change(function(){//code};) which covered all the text boxes. Do I have to perform a second step to making it work, or do I have to reference the component to the specific function?
Piyush Mangal
Ranch Hand

Joined: Jan 22, 2007
Posts: 196
I'm not sure what you mean by "binding" it. My JQuery function is a simple (".editAllocationBox").change(function(){//code};) which covered all the text boxes. Do I have to perform a second step to making it work, or do I have to reference the component to the specific function?


By binding I meant registering events to element.
When you say you are using (".editAllocationBox").change(function(){//code};), that means you are registering(binding) onChange function to all the elements having class as editAllocationBox.


Any reason why you have not used used quotes around class value?

<input class = editAllocationBox type = \"text\" name = " + txtBoxName + "></input>");
Alexey Timokhin
Greenhorn

Joined: Mar 23, 2012
Posts: 25
Piyush Mangal wrote:Any reason why you have not used used quotes around class value?


Initially, I did put quotes around every attribute in there, and found out that when I did, .html() function returned blank. So when I started playing around with it and deleted some of the quotation marks, that's when the CSS style appeared and I was getting the full inner HTML value of the <td>.
Piyush Mangal
Ranch Hand

Joined: Jan 22, 2007
Posts: 196
You would need to bind these newly created textbox as most probably your JQuery method runs only once when page gets loaded first time. JQuery does not have any idea of any new addition of text boxes.

May be call (".editAllocationBox").change(function(){//code};) again along with the following

$('#mainTable tr:eq('+ curRow +') td:eq(' + (5 + i) +')').html("<input class = editAllocationBox type = \"text\" name = " + txtBoxName + "></input>");
Alexey Timokhin
Greenhorn

Joined: Mar 23, 2012
Posts: 25
Piyush Mangal wrote:You would need to bind these newly created textbox as most probably your JQuery method runs only once when page gets loaded first time. JQuery does not have any idea of any new addition of text boxes.

May be call (".editAllocationBox").change(function(){//code};) again along with the following

$('#mainTable tr:eq('+ curRow +') td:eq(' + (5 + i) +')').html("<input class = editAllocationBox type = \"text\" name = " + txtBoxName + "></input>");


GENIUS!

Because I was using $(document).ready(function(){});, It prepared everything after the page was loaded, which means it did not account for newly created components. To fix it, I put the whole block in a run() function, which was ran onload, and after I create the text boxes, I run the run() function again, which means the page prepares the document again, taking into account the newly created text boxes.

Thank you very much

 
It is sorta covered in the JavaRanch Style Guide.
 
subject: JavaScript created components do not respond to JavaScript functions.