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

How to parse a dynamically created sub table within a dynamically created main table.

 
Ranch Hand
Posts: 56
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I am trying to dynamically create a table (sub table) within a dynamically created table. I then complete the input fields in the table and drag items into the sub table. I then want to parse the table and sub table so I can store the contents in a database. This all works up to parsing the sub table. That I can not get to work. The class in "if ($.trim($(this).hasClass('dragabbleRemove'))) {" is not found. I can not find the div that was dragged into the table. The code is:

Add the table and sub table:



Handle the dropping of the item, make the filed non droppable (only on drop on each row), make the draggable so it can be removed, add a new row to drop to:



Parse the tables:

Parse.PNG
This is what the table looks like.
This is what the table looks like.
Parse2.PNG
This is the output for the main table.
This is the output for the main table.
 
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
As you are already using jQuery for everything else, why aren't you using it to build your DOM structure rather than hard-coding HTML in strings?
 
Glyndwr Bartlett
Ranch Hand
Posts: 56
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Bear, In a word - ignorance :-) How should I be doing this please? I am not a programmer and am learning as I go for a not for profit organisation in my spare time.
 
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
If you can get your hands on a copy of jQuery in Action (disclaimer: I'm the author so...), chapter 5 goes into DOM manipulation in depth.

Quickie thumbnail: with jQuery, you can create DOM elements using the jQuery function (for example: $('<div>'), to create a div element), and attach it to the DOM with methods like before(), after(), append(), prepend() and so on.

While it makes for a lot of code, it's code rather than an HTML blob in the script. And it's essential if there are decisions to be made while building the DOM.

Just my 2ยข on the approach you are taking...
 
Glyndwr Bartlett
Ranch Hand
Posts: 56
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Bear, Thank you so much. This is what I need - "to be taught how to fish" :-). I have done some quick reading and people seem to be split on whether to use HTML strings vs jQuery. So far:

If you are creating a small amount then jQuery runs faster. However, what is a small amount vs large amount. The readings are mute on this.
HTML strings are easier to read than jQuery.

I would be very interested in an expansion on "While it makes for a lot of code, it's code rather than an HTML blob in the script. And it's essential if there are decisions to be made while building the DOM."

First, "it's code rather than an HTML blob in the script". What is important about this?

Second, "it's essential if there are decisions to be made while building the DOM". Why is it essential?

Can I get your book as an eBook?

Once again thank you so much for your help.
 
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

Glyndwr Bartlett wrote:
Second, "it's essential if there are decisions to be made while building the DOM". Why is it essential?


Imagine that there are many permutations along the way, and envision the nested if-then-else blocks to create the right text blob. It quickly gets unmanageable trying to keep all the markup quoting and tagging under control.

Another approach for dealing with dynamic HTML might be templates. Explore "handlebar templates" if that seems like a better route for you.

Can I get your book as an eBook?


Yes, I believe Manning does offer it as an eBook.

Again, none of this addresses your specific problem but just calls your attention to approach.
 
Glyndwr Bartlett
Ranch Hand
Posts: 56
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Bear,

This is great. I now have some more reading to do :-)

I have almost fixed my original issue. It has taken a lot of trial and error and finding incremental answers along the way. I will post the solution when completed.

Kind regards,

Glyn
 
Glyndwr Bartlett
Ranch Hand
Posts: 56
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
This is my solution (I have not implemented Bear's valuable suggestion yet):

Add the table and sub-table:



Handle the dropping of the item, make the field non droppable (only on drop on each row), make the div overlay of the dropped field draggable so it can be removed, add a new row to drop to:



Parse the tables:

 
I'm gonna teach you a lesson! Start by looking at 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