In one of my pages, I am using an example of editable html table from this link: http://mrbool.com/how-to-create-an-editable-html-table-with-jquery/27425, which works without any issues and when I click on a cell in the table, it changes it to text box.
However, I had to change the layout of my page where, I had to place the sample mentioned above within another html table (nested).
Now the problem is when I click on the cell, it does not identify the child table, which has the data and I want to click but it clicks on the cell of the parent table, which in this case is the parent table, and holds 2 different tables.
So, what I want you help with is:
Get a method to identify the cell of the child table when it is clicked
Or
Some way so align two tables on my page to be aligned side by side. Currently I am using the parent table to align my other 2 tables to sit side by side.
if the second option is easier to achieve then, I don't have to change much.
Any suggestions?
If you're using a parent table element to layout elements on your page, just know that this is a deprecated unsemantic practice, as table elements are for tabulating data. You should use the CSS float property, which is the convention, see CSS Floats 101 ยท An A List Apart Article and w3schools.com
Refactoring out that parent table should fix your problem. Otherwise you can fix it through modifying the selector in your JavaScript and by assigning the edittable td elements with a class (eg. edittable-cell) so you're not assigning event listeners to other tables' td elements unnecessarily and causing unwanted behaviour elsewhere.
JavaScript
// Instead of the 'td' selector
$("td").dblclick(function() {
// .. your code here
});
// Use a more specific selector, eg.:
$('.edittable-cell').dblclick(function() {
// .. your code here
});
If you are semantically nesting tables of data and/or still have this issue, you can try preventing the event from bubbling up to its parent elements.
JavaScript
$(".edittable-cell").dblclick(function(event) {
event.stopPropagation();
// .. your code here
});
Related
I'm trying to create Table Rows in a Table that can expand by clicking on them (individually).
For example, if I would click on the specified area in the picture below, a Segment/Container (some sort of area) would drop down with content inside.
I've tried a solution that is mentioned in this thread, but the underlying problem is that every element under a Table Row/Cell is subject to the rules and boundaries of the Table HeaderCell. So if I for example try to create a Table Row with a Segment under it, the result will look like this:
As you can see the Segment is inside the new Row but is limited to the size of the HeaderCell.
When doing this I also get this error:
validateDOMNesting(...): <div> cannot appear as a child of <tr>.
in div (created by Segment)
It seems that Segment under Table Row is therefore a prohibited element structure.
Any idea on how the element structure should look to create some kind of area under a Table Row?
The the warning of a <div> not being allowed as a child of a table row is telling you that it is not valid HTML. That is true whether you are using Semantic UI React or plain HTML.
I'd recommend rendering another row below the row you have in your table already. Set a column inside of that row which spans all of the columns. Now you have a container which you can put other UI inside if you want to. You can customize the style of the wide cell if you need to for some reason.
Then you can set a toggle state on the clickable area of your table. You'll probably want to put the click events on the contents of the cells and not the cells themselves.
I threw together a quick Codepen showing how this would work. This gives you a working concept that you can modify based on your use case.
https://codesandbox.io/s/serene-water-ikco9?file=/example.js
The Problem in Hand:
I want to make a form designer where user can drag and drop fields of different type and design the layout too, some what similar to wufoo form builder but here the layout is limited to single column whereas I want to make something where user can make the layout as they want.
I understand how to do in single column view, but could not understand how to achieve multiple column layout eg: row 1 there could be 3 elements, row 2 one element stretched to full length, row 3 there could be just 2 elements etc.
What I tried:
I have tried with jquery UI sortable to make a single column layout with using div where new elements can be dragged and repositioned.
Any suggestion on how to proceed further will be helpful
I have tried searching StackOverFlow and google but could not find any link on a similar topic. If anyone could point me to the same, it will be also helpful.
When you reorder elements on wufoo form builder, you can only drag'n'drop up or down. Remove that restriction and as soon as one element is dragged across a certain threshold, it "belongs" to the next column. If the "old" column was the first or last one and the line that the element was moved over was to the "outside" of the form, add a new column there, until the maximal number of columns is reached.
If the used drags the last element of a column into another column, remove the now empty column on element-drop.
You could also remove the dynamic adding/removing of columns and juist have a button ("remove column" & "add column") to do it by code.
An example for the dropping in another column can be found here: http://jqueryui.com/sortable/#connect-lists
Hope this helped!
Edit:
http://jqueryui.com/sortable/#portlets and http://jqueryui.com/sortable/#empty-lists also have elements that you could look into. Good luck! Sounds like a nice project. Can we see any progress or beta?
I am trying to get the desired layout as in http://jsfiddle.net/yFxea/16/ and the affect I am trying to achieve is on click of the "record" in the left, that attributes for that record to be displayed on right. But the attributes section's location should be the same for all records and as I click on each record the previous record's attributes should hide and display the current record's attributes. I was able to get the desired look and effect but what broke is the additional requirement that both the record content and attributes should be nested under the same DIV (or section tag).
I understand that this is not a bootstrap question but I don't want to break anything that bootstrap does.
Thanks
I need to be able to add rows to a table dynamically with jQuery mobile. The rows consist of selection menus and input boxes. The code I have seems to work in pure jQuery and html but when I add the mobile stuff it stops working (the "added" select menus and input elements act as if the first row in the table is being clicked). I have a jsfiddle here. Does anyone have suggestions? Or an explanation of why jQuery mobile is breaking my code?
When you call clone on the tr, the cloned row is inserted verbatim into your DOM. In order to achieve the result you want, the new <select> needs to have a unique ID.
You should add some logic to ensure that the new <select> tag has a different ID, such as select-choice-3, select-choice-4, etc.
I created a method and pass the element type, id, and any inner text that instantiates a new html element. The last statement: Me.Controls.Add(element) adds it to the end of the page, but I would like it to be inserted in a specific position (between 2 divs within a form). What I am describing is very similar to this post on SO here, although it was for javascript.
Perhaps look at using a PlaceHolder control..