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.
Related
I have a PHP page with:
<td class="short" id="inhouse-val<? echo $row['id'];?>"><? echo $row['inhouse'];?></td>
This table cell shows a user's selection of a drop down list called 'inhouse'. The options are 'Portland' and 'Remote'.
If a user clicks an Edit button, it fires a JS page with this:
document.getElementById("inhouse-val"+id).innerHTML="<input type='text' id='inhouse_text"+id+"' value='"+inhouse+"'>";
Obviously I will want to change <input type... to a Select list, however, the main thing I can't work out is how to have the JS file (or php) append 'selected' to the list option that is currently selected (inhouse) so that when this JS page stops executing and the returns to the PHP page, it shows the drop down list with the selected option as default.
For context, what happens is that the user is on the PHP page (which is an html table of rows from a database table) where a user can select a row and edit it. The JS file triggers and sets all the cells in the row to editable text fields. The user can then edit one, press Save and another PHP jumps in to overwrite those changes to the DB.
The problem I am having is that not all the table cells are text fields. 4 are selections from drop lists (like the example above).
My JS knowledge is weak but I can deal with PHP, so I am not sure how to script the example above so that it returns not a field with the current user text in it but rather it returns a drop list with the current user selection on it.
Here is the demo working page:
http://antistandard.com/projects/pathfinder/
Any help is greatly appreciated.
Thank you
<select>
<option selected="selected" value="first"/>
<option value="second"/>
</select>
I think this is what you're looking for.
I am trying to work out the best way to get this to work. What i am trying to do is as follows:
i have a page which 10 checkboxes on it. I want to have a dynamic drop down which is populated with a list of server names when a checkbox is clicked
Example:
<tr>
<td>
<input id="site4" name="list[]" type="checkbox" value="BERT">
<label id="site4l">BERT</label>
</td>
</tr>
<tr>
<td>
<input id="site5" name="list[]" type="checkbox" value="BOB">
<label id="site5l">BOB</label>
</td>
</tr>
I would also have on the other side of the page a select dropdown which i want to be populated when a checkbox is checked, i would also like the values to be removed from the select dropdown if the checkbox has been unchecked.
I thought about something like this
setting a hash in javascript
serverList["BERT"] = ["server1", "server2", "server3", "server4", "server5"];
serverList["BOB"] = ["server8", "server9", "server10", "server11"];
and then i am a little stuck on how i can build the list and display. I have seen a few jquery pluggins which group items in a checkbox which look good.
Any help would be appreciated.
Many thanks Mithandra
Do you have any code to work on? To just work out of the blue is a bit hard.
In general: What you are looking for is the change event (http://api.jquery.com/change/).
I personally would add a change event to all the checkboxes and if unchecked just remove (http://api.jquery.com/remove/) all coresponding entries, if checked then just append them (http://api.jquery.com/append/) to your dropdown.
Hope this helps.
Thanks for the reply.
I guess being from a perl background what i was looking to do is say i have various checkboxs with the different names example of one might be BOB
i would have some sort of java array like
fields[BOB] = [ array of servers ]
when i checked the box it would then go and look up the list of servers using the key of BOB and then populate the dropdown box with the list of servers.
The way I was thinking of doing this is to build some sort of hash within java from which a select dropdown could be produced. so in the event that the user unchecked a box that they had already checked the key and subsequent values would be removed from the hash.
i am not really sure on how to achieve this within Java as i only dabble with it.
I have a list of users in an organized table. I want a splash-style div to appear when I click on the row of the user whose information I want to edit. When the splash screen appears, I want to have input boxes within the splash to contain the information of the user. So far I accomplished the splash screen effect. Now the final piece is grabbing the data within the row using the same onclick event as the splash, getting the values of the columns, and changing the innerHTML of the input boxes within the splash.
http://jsfiddle.net/nH6x6/1/
SOLUTION: http://jsfiddle.net/nH6x6/3/
<tr class="data" id="row1">
<td>1</td>
<td>Marquezso</td>
<td>123456</td>
<td>noob#coder.com</td>
</tr>
in the fiddle you have to click on the row to activate the splash.
I want the username and email input fields to contain the data of the clicked row.
In this case row1
=)
You will need to reference the relevant td element and grab its contents.
For example:
$('input[name="username"]').val($('#row1 td:first').text());
I gave a name to your input in the above example as it makes it easier to reference.
Here you go: http://jsfiddle.net/76bdx/3/
Here is a snippet, click fiddle to see everything...
//Fill the form
document.getElementById('username').value=$('.data td:nth-child(2)').html();
document.getElementById('email').value=$('.data td:nth-child(4)').html();
Gonna have to be a little trickier if your table ever holds more than one user row. New fiddle on the way for that... {never mind, already answered}
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.
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