I’m developing a simple CRUD based application for upskilling purposes.
Currently, the application outputs the result of a select query to a HTML table using JSTL. The last column of this table has a Delete link for each record which sends the parameters action=delete&id=1 to the server. The id param value part of the href of these links are obviously dynamically generated with JSTL based on the database record key that is passed into the JSP with the database results.
Instead of having this Delete column, I want the user to “select” a row and click a Delete button at the bottom of the table, which will send the above parameters to the server.
I am unsure how to accomplish the following to achieve this:
(1) In Javascript, how can I allow the user to “select” a table row. I don’t want the table to have radio buttons. The behaviour should be that the user clicks the row, the entire row colour changes and JS retains the index of the selected row. Only one row can be selected at a time. If the user clicks the row again, it becomes deselected, i.e. the colour is returned to its original colour and JS no longer identifies that row index as being highlighted.
(2) If I don’t have a Delete link specific to each db record, how can I identify the key of the db record to be deleted and return this to the server when the Delete button is clicked. For example, currently if the record in the db has an PK of 123456, my JSTL will generate a href action=delete&id=123456 for that specific Delete link. So, how can I link that id to the selected table row without having to actually display that id in the HTML table.
1) There are plenty of ways to do it. I suppose all of them will involve the use of something like var rows = document.getElementsByTagName("tr"); or its jquery (or other framework) equivalent. Or some other selector, maybe by CSS classname, could be used. Followed by a loop in which you deselect all the rows that were not clicked and select only the one that was recently clicked. Changing the color equals just changing the css class assigned to the DOM element basically.
2) You will use Javascript either to append to the DOM an html form with hidden inputs (<input type='hidden'.../>) and then submit it via Javascript (if you're Ok with moving to a different page and back). Or you can use Javascript to send an Ajax request to the delete servlet, and then remove the particular tr from the page when you receive a success response back.
Related
i'm using the PDO library in php to access a database and return some values into a table which need to be shown when the user first opens the webpage,
after this I want to implement a filter option, so that the user can input some data in a form field and the data shown is updated according to the filters set by the user.
I don't know how to update the DOM in this case, would it be possible to update the DOM using Jquery so that only the new values are shown in the table, or do i need to redirect to a new page/reconstruct my table with a full request/response cycle.
thank you for your help in anycase.
If I understand correctly, you want to output the data from the result of your MySQL query as a table, and then having a search bar which will filter the output table according to the search bar. What I would do is first use the data to generate a table and give it a css class. For the search bar you can use form or event listener to process apply your filter from the value in the search bar. For example you can loop the rows of the table and check if a column contain a substring of the search bar value(as an example, check with whatever criteria you prefer) and just add a css value display: hidden to the row, or restructure the table, there are many ways of doing it.
I have two pages First.html and Second.html. In Second.html i have one search button that redirect to second.html and once I choose the value it will populate the value in first.html. But the problem is in first.html the table has two id ="major". Based on the search button it will populate the value in the particular major box. How to achieve this ?
You can access two different elements with same id like this:
var table=$("table#major");
var inputelement=$("input#major");
As the comment suggested, IDs should be unique in your HTML. To determine which row you want to manipulate, use the ID from the table and use the table's rows collection...
document.getElementById("Major").rows[rowNumber].cells[1].children[0].value;
...rowNumber will probably need to be manipulated to ensure you are on the correct row. With your code, the first row you care about is row 2.
The following classic report which when we select specific row pops up with new modal region called addExtraDetails with some data grabbed from row and some new additional info required from user:
When (+) is being clicked the new modal region pops up, with populated values taken from the report row. So: in Column link I put:
javascript:function_to_add_to_basket('E',#ID#, 'Extra#ROWNUM#', #PRICE#,'DUMMY');
Then external js function is responsible for passing information. The problem is it does not refresh every time (+) is populated instead it keeps values of the first input.
I found better solution(and cleaner), upon clicking (+) Column Link is passing:
javascript:$s('P4_SET_QUANTITY','#QUANTITY#');
javascript:$s('P4_SET_TYPE','E');
javascript:$s('P4_SET_OBJECT_ID','#ID#');
javascript:$s('P4_SET_ELEMENT_ID','Extra#ROWNUM#');
javascript:$s('P4_SET_COST','#PRICE#');
javascript:$s('P4_SET_DISCOUNT','DUMMY');
javascript:openModal('addExtraDetails');
Now it updates everytime when we select various rows HOWEVER since we have dropdown javascript grabs all possible value of Quantity column so for this code:
javascript:$s('P4_SET_QUANTITY','#QUANTITY#');
the output is: '012345678910'.
How can I pass all values to modal region and make it to work with new values every time its being called ?
You need to retrieve the value of the select list when you click the modal button. The value is not static, unlike the other values. The substitution strings are replaced with their value when the page is rendered.
It isn't really necessary to do all those item sets if all you want to do is use them in a javascript function. Your first idea was probably just as good but I'll just run with openModal.
First, determine how to target the select list. You did not specify whether your report is a wizard-generated tabular form or a manual tabular form (ie used apex_item to make the select list). You could either target the select list by the name attribute, which refers to an array, or select by header of the column. Also see this article.
Eg, with the column name for the select list being QUANTITY, selecting the list would be:
td[headers=QUANTITY] select:visible
Alternatively, if you determine the array you can be more precise in targetting the element. Eg if the NAME attribute is set to f02 then you could select the select lists with
input[name=f02]
Then modify the openModal function to select the list value on the same row as pThis - which would be the triggering element, the anchor :
function openModal(pThis, pMethod){
//fetch the value of the select list on the same row
//I use the second method of selecting here
var lListValue = $(pThis).closest('tr').find('input[name=f02]').val();
...
}
You'll also need to adjust your call to openModal:
javascript:openModal(this, 'addExtraDetails');
Datagrid is in content,When trying to access client side function for the cells in the datagrid,its always showing at 0 position
suppose i have 10 rows,for each row "Test button" i should invoke the client side java script.
For each row "Test button" client side script is displaying message at first row only.
in datagrid i am binding the description and button to every row in datagrid
so i have added Testbutton.attributes.add("onclick","return javascriptfunction();"); in
datagrid_itembound.Iam showing one div in client side function
but that is working only for one row,when iam trying to click test button in second row,its
showing that div in first row instead of second row
i want similar functunality like displaying of flag button in stackoverflow.
The datagrid/gridview results in a table. You could get the table by it's ID using getElementById use getElementsByTagName to get the rows/columns and/or use jQuery to help do it for you.
The below links should help:
http://www.thescarms.com/dotnet/webdatagrid.aspx
http://forums.asp.net/p/1520596/3652832.aspx
http://www.vbforums.com/showthread.php?t=429055
http://www.netomatix.com/development/gridviewclientsideaccess.aspx
This last one uses jquery...
http://aspdotnetcodebook.blogspot.com/2010/01/how-to-get-cell-value-of-gridview-using.html
I have a table with a bunch of rows. In the last column of every row, there is a dropdown. When the dropdown changes, I need a new table row to appear below the row where the user selected the dropdown item. However, I also need the new row to have different data depending on what was selected in the dropdown.
Is any of this possible using only jQuery?
Note that I'm using ASP.NET for back-end development, so if a solution can be found without using ID's that would be great.
$("table select").live("click",function(){
var row=$(this).parent().parent();//add some .parent() untill you get the TR element
var val=$(this).val(); //<select> value if you want to use it for some conditions
$("<tr><td>....</td></tr>").insertAfter(row);
})
It's simple enough to add the HTML using JQuery. However, if you intend to save this data back to the server, the default ASP.NET process (using ViewState) will ignore the new rows. Instead, you would need to directly read the submitted form properties.
To learn how to add a row, look at the suggestions here: How to add a new row to a specified table with jQuery?