This week's book giveaway is in the Artificial Intelligence and Machine Learning forum.
We're giving away four copies of Succeeding with AI and have Veljko Krunic on-line!
See this thread for details.
Win a copy of Succeeding with AI this week in the Artificial Intelligence and Machine Learning forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Paul Clapham
  • Ron McLeod
  • Liutauras Vilda
  • Junilu Lacar
Sheriffs:
  • Tim Cooke
  • Jeanne Boyarsky
  • Knute Snortum
Saloon Keepers:
  • Stephan van Hulst
  • Tim Moores
  • Tim Holloway
  • Carey Brown
  • Piet Souris
Bartenders:
  • salvin francis
  • fred rosenberger
  • Frits Walraven

When inserting an HTML table row using jQuery some of the the input elements do not work

 
Ranch Hand
Posts: 56
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I am inserting a table row after the current row by clicking on a button. The row is inserted as required; however, the input fields, after the first, and button at the end of the row are not working. The input fields can not be clicked on to add data; however, I can tab into them to add data. The button at the end of the row does not register a click. You can tab to the button and hit enter and it works (tabbing to it and clicking does not).

The existing row is:



The function to add a new row is:



This is what it looks like with the new row added:

TableRows.PNG
Result after adding a new row.
Result after adding a new row.
 
Saloon Keeper
Posts: 11918
253
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Eesh. Manually inserting HTML is really error prone. You probably should be using a framework that supports templates and reacts to changes to your view model. Have you tried something like Angular before?
 
Sheriff
Posts: 67389
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
In your other post, I point out how to use jQuery for this.

With all respect to Stephen, Angular is on the way out ... if you are going to dive into the new world of SPAs (which I do not believe you are ready for at this point), do so with React or Vue.
 
Bear Bibeault
Sheriff
Posts: 67389
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Likes 3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
With respect to your problem, I cannot envision a situation where you could tab to an active input element but not click upon it unless another element is layered over it capturing the mouse clicks.

Use the Dev Tools to inspect the element -- do you see what you expect?
 
Glyndwr Bartlett
Ranch Hand
Posts: 56
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Stephan and Bear,

You are both absolutely right and I appreciate your input. I have started reading up on this (Handlebars especially). In the mean time I need to get the current code to work.

Bear - "unless another element is layered over it capturing the mouse clicks." Brilliant! I have the following css:



This is so I can set a dropped item as dragable so it can be removed as per:



So the solution is more css:



What I can not figure out is why the overlay is reaching down one row and to the right?

Kind regards,

Glyn


 
Bear Bibeault
Sheriff
Posts: 67389
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Dev Tools can show you exactly where the element lies and its size.
 
Bear Bibeault
Sheriff
Posts: 67389
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
P.S. You know that jQuery UI provides for drag-and-drop operations without having to build your own?
 
Glyndwr Bartlett
Ranch Hand
Posts: 56
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Bear,

Yes, I am using the jQuery UI.

Kind regards,

Glyn
 
Stephan van Hulst
Saloon Keeper
Posts: 11918
253
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
At the risk of sidetracking this topic, Bear, can you give a short summary of why Angular is on the way out, and what React and Vue do better?
 
Glyndwr Bartlett
Ranch Hand
Posts: 56
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I also would find this interesting. I am currently reading up on Handlebars. So far I do not see how that is any better than html strings. What am I missing?

Kind regards,

Glyn
 
Bear Bibeault
Sheriff
Posts: 67389
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Stephan van Hulst wrote:At the risk of sidetracking this topic, Bear, can you give a short summary of why Angular is on the way out, and what React and Vue do better?



I'm just reporting the trend I see in job descriptions and the pings I get from recruiters. The number of Angular jobs has decreased sharply over the past few years, while the number of React and Vue jobs has increased, with React being the 800-pound gorilla.

Having worked with Angular, I can make a guess as to why --I personally found it opaque and restrictive, and not very much fun to deal with.
 
Stephan van Hulst
Saloon Keeper
Posts: 11918
253
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I see. I must say I'm impressed with some of the sample code I've seen from introductions to Vue. I think I'll try it on my next front-end application.
 
Self destruct mode activated. Instructions for deactivation encoded in this tiny ad.
Two software engineers solve most of the world's problems in one K&R sized book
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
    Bookmark Topic Watch Topic
  • New Topic