Dynamically adding and Editing Rows - javascript

What my code does: An "Add Item" button brings up a popup (#addquoteitem) that contains a formsubmission of that form 1. creates a new row in a table, from a template and 2. creates hidden inputs (not hidden in jsfiddle) because I thought this was easiest way to submit the data to serverA "submit quote" button then submits each of these rows individually to the server via the "hidden input" form
I did not realize until I was done ( I am working on my first big project ), The user can not edit their individual items!!!
What I think I should do: Add an edit button for each row that brings up a popup, which would use jquery to change the values of the corresponding rows Then change it so the "hidden inputs" are not created until the final "submit quote" button is pressed.
JSFIDDLE
http://jsfiddle.net/SteveRobertson/XHuVS/1/ JSFIDDLE
My Question: Is my approach the correct method? I only ask because I do not think it is, but feel as though I have coded myself into a corner. I have no idea what to do. if not. What is the correct method for dynamically editing rows in a manner they can be submitted to a server? When I call this function for the template, I assume I have to add a counter of some sort to give each row a unique ID, or can the row be identified in another manner?
function template(row, quoteItem) {
row.find('.item_num').text(quoteItem.number);
row.find('.item_desc').text(quoteItem.description);
row.find('.item_price').text(quoteItem.price);
return row;
}
Although I do no know how exactly to do most of the methods my approach entails I only ask for a point in the right direction. I understand this is a lengthy question as well as lengthy code. I appreciate you taking the time to read this and any suggestions or advice. Thank You.

I agree with your planned approach, generate the form data at the time of submission. This will save you the trouble of keeping the hidden fields updated.
Hidden fields:
Your current code generates elements with the same ID testid. You can remove the ID since they are not going to be used for anything. If you do require the IDs, make sure they are unique.
The naming of the element generated do not indicate any relationship between them, I'd suggest a naming scheme like:
items[0].name
items[0].description
items[0].price
items[1].name
items[1].description
items[1].price
...
You can also consider submitting the form via AJAX. In this case you can construct the form data object on submission. It could look like:
[
{name: 'Item 1', description: 'first item', price: '123'},
{name: 'Item 2', description: 'second item', price: '234'},
...
]
Here's a question that shows how to handle this on the server-side with PHP.
Row generation:
You could add a unique ID to the rows being generated, but only if you need to address the rows individually. Using a counter to generate a value which is appended to a string will work for generating the unique IDs.
Editing:
One solution for the edit option would be to bind the click event on the table and check for the edit link using the on function.
$('#quote').on('click', '.edit-link', function (e) {
e.preventDefault();
//$(this) - edit link
//$(this).closest('tr') - parent table row
//$(this).closest('tr').find('.item_num') - span containing number of items
//$(this).closest('tr').find('.item_num').text() - number of items
...
});
Table Row
<tr>
<td><span class="item_num">1</span></td>
<td><span class="item_desc">rt</span></td>
<td><span class="item_price">asd</span></td>
<td>Edit</td>
</tr>
Store the parent's (TR's) reference (ID or object) to update the values once the editing is complete.
This isn't a comprehensive solution, but I hope it gives you a few leads to follow.

Related

Dropdown menu with few options for comments

I stuck on one problem and would really appreciate your hint. I've got a typical PHP loop which is populating comments for thread as:
<tr><td>'.comment_date'.</td><td>'.comment_author.'</td><td>'.comment_content'.</td></tr>
Now, each populated <tr> and has additional <td> on his right which is a dropdown-menu presented as small icon, with options (listed as <li>). One of these options is "Reply to Comment", so that people can not only reply to the main thread, they would be able to reply to comment, which will be indented. The entire <table> is surrounded by <form> of course, for having some logic possibilities into inserting and processing response to comments.
Now the question is, how do I tell jQuery - where he listens for that form submit, for which comment -- <tr> -- dropdown item (like reply to comment) was clicked? So that I POST reference comment id and content for that particular row? Thanks in advance!
On clicking reply to comment set a value in a hidden field where you can set the id needed for posting the data. You can build your logic with this for multiple comments as well.
<td><select name = 'dropdown_1'>
...
</select>
</td>
<td>
<input type='button' id = '1' value='reply' onclick = 'setId(this.id)' />
</td>
make sure both the character next to name of tag ('dropdown_') and the id for the reply buttons have the same values, preferably use the database id value of the thread for easy flow. Set the id values of the different reply clicks in a single common hidden field separated by delimiter like a ,.
On php side explode the hidden element values using the delimiter and out of all the dropdown values received via $_POST update the values of dropdowns which are in the list of ids received from the hidden field.
You can use 'this' object to identify which li is clicked.

Cloned autocomplete input not working

I have a problem with jQuery function clone(). I think the problem is in the withDataAndEvents input parameter of this method.
Initially, I'm coding a table that has dynamic rows. I'm adding dynamically rows when clicking on a button put only in the first row. the first row contains initially many inputs fields and combo-boxes. Each field is initalized by an ajax call. And each action on a field leads to the refresh (filtering) on the whole fields of a row. I'm also using autocomplete on input fields.
The first row works perfectly. However, when cloning the tag:
If I did not enter values in the first row, the cloned and first row work fine
If I enter a value or values in first row fields and after I clone the , only the first row fields still work. In this case, if I try to change the value of the combo-boxe (which fire a change event for all concerned row fields), the fields of the first row are impacted despite using Ids when changing autocomplete data. Ids of fields, combo-boxes, table rows are dynamically created when clicking on the button to clone the widget.
The code I wrote is too long so I created a fiddle and simplified the case and still have the same problem.
I tried many suggestions that I've found like this, this one or this one in vain :-(
(data.('autocomplete', null), autocomplete("destroy") ...)
Do you have ideas about this issue ?
thanks in advance
Aside from the typo in the test (you are selecting by class instead of the new element by id), the basic problem is you are applying autocomplete before you add it to the DOM.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/87jcw1y0/2/
I just reversed the order of these two lines:
$('.body').append(clone);
applyAutoComplete2('#myinput' + inc);
The cause... Some plugins use storage data associated with the DOM element, or attach events to ancestors etc. None of these can happen with a disconnected DOM element, so just attach it to the DOM first.
I think ur asking this
Check in this link http://jsfiddle.net/bsarunmca/87jcw1y0/3/
applyAutoComplete1('#myinput1');
$("button").click(function() {
inc = inc+1;
$('#myinput1').clone().attr('id','myinput'+inc).appendTo('.add-this');
$('#myinput'+inc).val('');
applyAutoComplete2('#myinput'+inc);
});

How to reload JSP with changed actionbean variable using Stripes

I am new to working with Stripes. I have a dropdown ("show ## recordrs per page") and a paginated table on the JSP page and I want to display as many records per page in this table, as the value selected in the dropdown.
The action bean has a variable "recordsPerPage" and I am not able to figure out a way to set the value of this variable and reload the table, so as to change the number of records that are displayed per page. Please help.
---- Additional Info -----
The table that I use is a displaytag table, which accepts a PaginatedList. This table is within a stripes form.
-- EDIT:
What I did is, I added a <stripes:hidden/> with the name "recordsPerPage" and set the value to be the number of records I want to display. I also added a <stripes:submit> to the same form. The "name" attribute of this submit button is the method name of the action bean I have to call. When I click on this button, I am able to do what I want. But now, I am unable to do it through javascript. Please help.
Due to some reason, calling Dom.get('submitButton').submit() or Dom.get('myFormId').submit() does not fulfill the intended purpose. Taking a clue from being able to do what I wanted from the submit button click, I made this submit button hidden and the called click() on this button from javascript. Thus Dom.get('submitButton').click() produces the intended result. If someone can give me the explanation of why the submit method did not result in expected behavior, that'll be great.

How can i get Knockout to generate new HTML that has bindings

I have created a form with knockout that will allow the ability to give a product dynamic attributes: (i.e. size - small, med, lg). This is generated by input field and a multi select drop down.
When the fields have been filled out and the selection list which is the attribute values has been generated, I can add them to an observable attribute array.
The problem I can't see is I need to display these attributes and their array of values, but I also need them to be editable. I wasn't so keen on the idea of them be reloaded into the main form where it was created - but maybe that is the best way.
Maybe just listing the attributes as uneditable list of attributes
example:
Name: <span data-bind="text: attributeName"></span> <select height="5" data-bind="options: attributesValues"> <button data-bind="click: edit">Edit</button>
And if they click edit it loads it into the form that they created it from so it can be edited.
However, I wanted to see if there is a way to do inline editing and bind to the added Attributes and each of their array of attributeValues. So when they remove an attributeValue from the list, it would remove it from the array of that particular attribute.
Any thoughts?
So, I am not too confident I understood exactly what you are trying to do, and the one line of code you posted didn't really clarify it. I threw this fiddle together that has a multi-select for attributes, and lets you add new products with the select attributes. Once added, the new product has those attributes as select's of there own, which can still be edited. If this isn't what you are after, please try to clarify, and maybe post some more code.
Here is the fiddle

Populate tabular report (multiple records) with particular values

I have a tabular report that allows the user to enter a reference number (text item) as well as a comment textarea item.
The report can vary in amount of records displayed, but for this example, let's say I have 10 records in the report.
What I am after is to create two new fields identifying both comment and reference no field - let the user type info in these two fields and then have a "Populate All" button that will go through each record in the report and assign the reference number value and comment value to each of the 10 records.
It's not completely clear what you're trying to do here. Do you have a regular HTML form laid out in a table, and then the last two table cells on each row have an input/text area element in them? If so, I would think the easiest way to go about it would be to assign a common class to the input elements in each column, such as 'refno' and 'comment' then have some code like this in the 'PopulateAll' button onclick event:
$(".refno").each(function() {this.value = $($("#refglobal").value)});
This assumes your field for adding the reference number to all has an id of refglobal and that you're using jQuery (though other libraries will allow similar syntax, and coding it out longhand wouldn't be too much effort in this case).

Categories

Resources