I'd like to get a census on methods of removing/adding records via AJAX and updating the front-end.
For tabular data (take an inbox for example):
When I want to remove that first message, where/how should I be referencing the ID of that message and sending it to my AJAX call? I've seen some people put the ID in a hidden field, or use the checkbox id attribute...
How is this transaction properly handled so that when my call is successful, I can "remove" that row with jQuery?
What I typically use to "attach" data like this to HTML elements is to use the HTML5 data attribute. This will allow you to store multiple pieces of data for use w/ Javascript/jQuery/Ajax, without doing anything "hacky" like embedding stuff in IDs or having to parse out values.
For example, in your case of a table row, you could have something like this:
<tr data-email-id="123"><td>...</td></tr>
Then it would be simple to reference in your jQuery (assume $(this) references the tr):
var emailId = $(this).attr('data-email-id');
Related
Is it possible to have 1 input text field that accepts characters from the user, and as the user types, queries to a webservice are launched, and to update the contents of another component dynamicaly with the results of the webservice (which would be a table below the input text)?
If you prefer to use Wicket form controls and Data Table component then you need to make the call to the REST service in your impl of IDataProvider.
Otherwise, as I explained to you earlier today in your other SO post you can do this directly in JS without Wicket. It is a matter of taste and skills.
I have two drop down list on my registration page of sql type. they both fetch data from database. but my problem is that in second drop down list , i want specific data as per the option selected in dropdown list 1. how to do it?
thank you very much
There are two possibilities(well theoretically endless)..
1) You send the whole data on pageload and then filter it using javascript based on the first selection.
2) Use the ajax technique, where you send the ajax handler the selected value and then the handler queries the database and sends the relative data which you append on the second select in the runtime.
Note:- for larger tables the firstone is NOT Recommended.
i implemented a java ee webclient in spring framework. it reads data from a webservice and display records in a table format. on this table, im able to a delete multiple record by selecting the checkbox.
currenty im refreshing the table records using meta refresh. reason is because javascript timer refresh will bring the page to top. it affects the user experience when he/she is viewing record.
when a user select records to be deleted and click delete, a javascript confirm dialog box popup. the problem with using meta refresh is im not able to stop the refresh when the confirm dialog box popup. i tried jquery but it didnt work.
im thinking of implementing ajax to retrieve the records for the table. but how can i implement it efficiently. the records in the table are dynamic.
to add further, i have multiple html tables. for example,
#table 1
<table><tr><td></td>....</tr></table>
#table 2
<table><tr><td></td>....</tr></table>
#table 3
<table><tr><td></td>....</tr></table>
I suggest that you use a JSP as a template. This means that the body of the JSP contains static elements such as HTML code, forms and tables, while you can use tag libs to insert the dynamic data. In your case the data from the database record.
<c:forEach items="${listOfRecords}" var="item">
<table>
<tr>
<td>
<c:out value="${item}"/>
</td>
</tr>
</table>
</c:forEach>
Then using a servlet you can send this in the response to the client. The AJAX call will receive the response and append the HTML to the current table. In the code snippet below AJAX sends the data ("recordid="+id) in a request to the servlet located at /approot/myservlet. When the servlet receives the request it retrieves the record id from the request, deletes the record from the database, retrieves any new records add since the last query, passes the new records to the JSP via a request dispatcher, the HTML table containing the new data is generated and sent as a response back to the browser. The javascript in the success attribute is launched and the response which is contained in the msg variable is appended to the current table.
$.ajax({
type: "post",
url: "/approot/myservlet",
data: "recordid="+id,
success: function(msg){ $('#table1').append(msg);
});
This is just a quick overview of what I imagine is your solution. You might find the step by step guide I wrote about how to set up a J2EE application using a web service, JSP, Servlet, tag libs and AJAX.
I would remove the page refresh and use AJAX. This is how I imagine you should approach this problem. An AJAX call is made at regular intervals (using a timer) to a servlet that queries a database for the records added since the last such query. The records returned are formatted into HTML using a JSP template and tag libs and sent in the response to the client. The AJAX receives the response and appends the HTML to the appropriate table. To stop the AJAX from making a call to the servlet you could stop the timer just before showing the popup box and restart it when the page is updated with the records deleted.
EDIT: You could identify each table with an (id="table1") and in then you can append that HTML to the right table.
I'm creating a custom field called provinces where I have built a multi-select field. This field receives a JSON keyless object [3,4,5] from the database which I then apply to the input in getInput() in province.php. I have managed to this on the output, but I need to write any values selected back to the database.
Where can I get the values that are then passed back if the user selects other options (in the back-end form edit.php) in the multi-select?
In other words, where is the $_POST array received before either it is redirected back to the form (Save) or to the list page (Save & Close)?
Please correct me if I'm wrong.
Thanks in advance.
In the model for your form view, look for the function prepareTable. This is a good place to prepare/sanitize the data prior to saving.
If you want to process the data further after it is saved, you can use the function postSaveHook in your form controller.
Or you can of course also do something during save in the tables store function.
In Grocery Crud and Codeigniter , Basically i want to show data from one table(such as a_tbl) when select data or id_no(id_no will get from a_tbl) in dropdown then Name and current posting data will take in input field from table(such as a_tbl) , Then Designation, Dept and Section will take in input field from three different table (such as desg_tbl, dept_tbl, sect_tbl).
How can i solve it , Please any help me
You can use AJAX.
If you use jquery, you can do something like:
$("#field-ID_No").change(function(){
$.ajax({
'url':'your_controller/get_name_of_id/'+$("#field-ID_No").val(),
'success':function(response){
$("#field-Name").value(response);
}
});
});
Basically, when field-ID_No (the select/combobox) changed, the program will send a request to the server (for example: get_name_of_id/1). Assuming, you have "get_name_of_id" function in the controller that echo-ing a name based on given id, you will get the name as response.
(Sorry if it sounds complicated). And then, the value of field-Name should be changed with that echoed name.
For more information about AJAX and JQuery, you can read https://stackoverflow.com/a/5004276/755319
I have done this what you want, it is really simple complete tutorial is on following link
http://www.grocerycrud.com/forums/topic/1087-updated-24112012-dependent-dropdown-library/
hope you will find it helpful