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.
Related
In the table (that show items from database) we have a column to delete items and checkbox to select them all.
It's done by this simple code :
Here is example of html for delete checkbox cell :
<td>
<i class="far fa-trash-alt"></i>
<input type="checkbox" name="delete" value="2" id="delete_item2" class="delete_item">
</td>
And here is javascript part :
$('#checkAll').click(function() {
if($('#checkAll').is(":checked"))
$('.delete_item').prop('checked', true);
else
$('.delete_item').prop('checked', false);
});
It works globally fine, except that we also use DataTable functionalities and especially Search function.
The problem is that with actual code user could search some lines of table, but if he click "Check All" it will select (and so probably delete) all the rows of the table (even not visible).
Normally it seems easy to fix, we just need apply $('.delete_item').prop('checked', true); only for visible rows (probably via {search:'applied'}) but I could not figure how to do it.
Update :
As supposed #mark_b in the comments the behavior should be different as I explain.
After testing on fiddle and checking once again the application js code, I found that it's true. The real application code is a little bit different from one that I put in the question example.
Once I remove this little difference, the behavior become correct. The "Check All" checkbox select only visible row.
So the problem is solved.
I don't know if this question should be removed... For the moment I leave it here with this Update.
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.
I have requirements to disable save and cancel buttons in my page on page load. I should enable save and cancel buttons if user changes something in the page. To achieve this, I am using
http://plugins.jquery.com/are-you-sure/
This plugin is working fine but there is need for customization in many scenarios, one like below
I have a page like Item groups which consists of three panels.
LeftPanel : List of item groups in the system
CenterPanel : List of items assigned to a selected item group
RightPanel : List of items to assign to an item group
Now Assume I have a datatable
<p:dataTable var="itms" value="#{myBean.listOfItems}" rows="10"
paginator="true"
paginatorTemplate="{CurrentPageReport}
{FirstPageLink}
{PreviousPageLink}
{PageLinks}
{NextPageLink}
{LastPageLink}
{RowsPerPageDropdown}"
rowsPerPageTemplate="10,50,100">
</p:dataTable>
To assign items to the item group I would select items in the right panel and click on assign button which would add to the listOfItems to show in the center panel
listOfItems.addAll(selectedItems);
I am calling rescan method defined in the plugin on assign button oncomplete to detect the changes and track new records added because I want to consider addition or removal of fields also a change.
Now on page load if an item group is selected and it has 13 items assigned then I could see the first page with 10 records. If any items added then they will be added in the list at back end list. Since I'm in first page and page is having complete rows plugin is unable to find any changes in form.
How to find a change in this scenario.
Since you say you want to consider any addition or removal of fields also a change to make sure that your users save the changes, one way to do it could be like this:
You can have a hidden input:
<h:inputHidden id="hiddenInput" />
And in your assign button oncomplete you mentioned you can add:
oncomplete="$('#hiddenInput').val('dirty').change();"
This would add the 'dirty' string (for example) to the hidden input and call change() to tell the plugin that something changed, and the plugin would mark the form as dirty (changed).
And in the oncomplete of your saving button, all you have to do is clear that value and reinitialize the plugin to start again:
oncomplete="$('#hiddenInput').val('');$('#formId').trigger('reinitialize.areYouSure');"
Also it would be good to add some checking or to do that at the end of the action (link).
NOTE: If you add and delete the same 'item', technically there aren't changes, but you want to keep the form as changed right? This solution will work for that. Correct me if I'm wrong and you want to manage this particular case. You would have to add some logic in which you compare old and new values and clear or dirty the hidden input accordingly.
Ive got a group of radio buttons for different meals and i want to have them to have different names for each group.
Here is an image of what i have.
They can only select either, a Main Meal, a Jacket Potato or a Salad.
If they try to select a main, Then change their mind and select a salad it needs to deselect the main meal.
The radio buttons are labeled like the following,
Group 1:lunch_main
Group 2:lunch_jacketpotato
Group 3:lunch_salad
Is there anyway to do this?
That's not how radio-buttons are intended to work. Rather than give different names, give different data-* attributes. Common name attributes keep radio functionality, while the custom data-* attr will give you what you're looking for, without JS!
You can use custom data attributes like so:
<input type='radio' name='lunch' data-mealType='lunch' />
<input type='radio' name='lunch' data-mealWhatever='cool' />
this is my solution for you proposed question:
$("input:radio").change(function(){
var currentGroupName = $(this).prop("name");
$("input:radio").not(this).prop('checked', false);
});
I depend on excluding the clicked item, and select every radio button out there, excluding the current group name and remove the 'checked' attribute.
not the best code out there, but matching exactly your question.
I've made a live sample for you, here is the fiddle: http://jsfiddle.net/EhHpy/
Update: here is a new fiddle to let the logic work only for your target groups, and escapes other groups (link drinks as in my example): http://jsfiddle.net/EhHpy/1/
I have a very large html table that is similar to the following:
<table>
<tr>
<td>value1</td>
<td>value2</td>
</tr>
<tr>
<td>value3</td>
<td>value4</td>
</tr>
</table>
For each value I need to have a dropdown, where a user can click to change the value. This would trigger an ajax function. What would be the best way to do this? A dropdown in each ? One dropdown that changes position? How should i go about adding this?
This solution changes the cell to a dropdown when clicked, and back to a cell when a value is selected, just in case this was desired effect.
Something similar to this, I would assume. :) I used jQuery. :)
$("tr").each(function(){
$("td").each(function(){
var before = $(this).text();
$(this).html("<select><option>"+before+"</option></select>");
});
});
jsFiddle Example
Some of this depends on the experience you want for the user, but I would lean towards putting a select element in each table cell. You can then have the select hidden until the user selects one of the values to change, or you can have the select elements visible the entire time. This is easier because you can put the values into the select box before the browser renders the page. If this is not usable, for example, if the browser has trouble rendering the page because of the size of the markup, then you could move to using a single select element.
If you use a single select box, that would require you to move it around to the correct cell, and also determine how to get the possible values into the select box. You could use a data attribute on your td tags to store the data, or you could make an ajax call. But that could be chatty if you go back to the server each time a cell needs to be edited. Basically this would be the harder option to get right.
Start with the simple way (select in each td). And if that proves to be problematic, move on to the harder one. That is what I would do.
Alright, I got it working. This is an alternative to my other answer.
This gets each tr to be a dropdown and the tds are the options. I used jQuery.
$("tr").each(function(i){
$("td").each(function(){
$(this).replaceWith("<option>"+$(this).text()+"</option>");
});
$(this).replaceWith("<select>"+$(this).html()+"</select>");
});
Updated jsFiddle Example