I don't have much experience with JavaScript. However I wanted to do a small thing with JavaScript and MySQL. And I could use some help.
I have a page in PHP which search for something and it's gives the results based on the search query.
For each result it adds 3 images, one which as a URL where you can view the content. Other where you can edit that content.
And the third one you can delete.
For that I wanted to do something nice.
Like, the user clicks the image, a confirmation dialog appears. In that box it asks if you sure you want to delete the data.
If yes, it would delete the data. where ID =
The ID is printed in the onclick action, inside the JavaScript function in the image using PHP echo.
If not, we would close the dialog and continue.
OK, so let's assume the following (forgive me for re-clarifying the question):
You have a number of rows of some form, with delete links, and you want to confirm that the user actually wants to delete it?
Let's assume the following HTML:
<tr>
<td>Some Item 1</td>
<td>Delete</td>
</tr>
<tr>
<td>Some Item 2</td>
<td>Delete</td>
</tr>
<tr>
<td>Some Item 3</td>
<td>Delete</td>
</tr>
So I'm assuming the same PHP script can run the delete, picking up on the mode parameter:
<?php
if($_GET['mode'] == 'delete') {
//Check if there is something in $_GET['id'].
if($_GET['id']) {
//Prevent SQL injection, just to be safe.
$query = "DELETE FROM sometable WHERE id='" . mysql_real_escape_string($_GET['id']) . "'";
mysql_query($query);
}
}
I'm going to give two solutions to this on the JavaScript side - the first with an inline, slightly ugly solution, the second using jQuery (http://jquery.com/), and unobtrusive JavaScript.
Ok, so for the first, I would bind on the onclick event of each link.
<tr>
<td>Some Item 3</td>
<td>Delete</td>
</tr>
Then create a JavaScript function:
//This will get called when the link is clicked.
function checkDeleteItem() {
//show the confirmation box
return confirm('Are you sure you want to delete this?');
}
As I said, I don't like that solution, because it is horribly obtrusive, and also not particularly robust.
Now, the jQuery solution:
//Do all this when the DOM is loaded
$(function() {
//get all delete links (Note the class I gave them in the HTML)
$("a.delete-link").click(function() {
//Basically, if confirm is true (OK button is pressed), then
//the click event is permitted to continue, and the link will
//be followed - however, if the cancel is pressed, the click event will be stopped here.
return confirm("Are you sure you want to delete this?");
});
});
I heartily recommend this solution over the previous one, since it is much more elegant and nice, and is generally best practice.
Can't help you with the php part, but you can use JavaScript's Confirm:
var ok = confirm('Are you sure you want to delete this row');
//ok is true or false
You can bind a function to the click event on your delete buttons. Returning false will cause them to ignore the click.
If you have a button that deletes the row you want, then call the function below to confirm user if he wants to delete :
function confirmDelete()
{
if (confirm('Do you want to delete ?'))
{
return true;
}
else
{
return false;
}
}
call it like that :
<input type="button" value="Delete Record" onclick="confirmDelete()" />
What you need is a basic HTML form that will submit and do the deletion. Get the HTML right for this first - I would suggest each image has its own form with a hidden field for the ID value and the image uses an image button: <input type="image" />
Once you have this working you can add the JavaScript warning dialogue. You will need to replace the form's submit event with your own function that prevents the form from submitting (by returning false) and then show your dialogue. If the user clicks yes, then you'll need to trigger the forms onsubmit() event with JavaScript and if the user clicks no then just hide the dialogue.
Also, have a read about unobtrusive JavaScript - DOM Scripting by Jeremy Keith is a fanastic book that will simply explain how to do this stuff.
Related
I have a button, when I click I want it to get all data from the row. My .php file (i also have php code not included here) looks like so (I trimmed out the table for stackoverflow)
<tr class='rowdata'>
<td>Bob</thd>
</tr>
<input type='submit' class='getRow' value='ClickMe'>
<script>
$(".getRow").click(function() {
var rowOfData = $(this).closest(".rowdata");
alert(rowOfData.text());
});
</script>
Right now I click and nothing happens. Any ideas? The . prefix means it is searching for class.
Well first, have you checked your developer's console (F12) to see if you have any errors. Are you sure you've referenced the JQuery library.
Next, even with JQuery referenced, .closest() is going to search the ancestor elements of the element you call it on. If your button is not a descendant of the element you wish to find, you won't find it.
Now, assuming that .closest() does find your row, you are then asking for the .text() in the entire row. This may be what you want, but it's seems more likely that you'd want data cell by cell.
Also, your button is a submit button which is used for submitting form data, but it doesn't appear that that's what you're doing here. If that's the case, use a regular button.
And, your HTML isn't valid as you have a bad closing tag for your cell.
So, correcting all that:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class='rowdata'>
<td>Bob</td>
<td>Smith</td>
<td><input type='button' class='getRow' value='ClickMe'></td>
</tr>
</table>
<script>
$(".getRow").click(function() {
var rowOfData = $(this).closest(".rowdata");
alert(rowOfData.text()); // Gets all the text in the row
alert($("td:first-child", rowOfData).text()); // Gets just first cell
});
</script>
I want to create a table with rows full of inputs. The idea is that each row of inputs ties to one object on the backend. I want a row to be "submitted" once the user is no longer entering data into it.
I'm mostly a backend engineer bumbling with the front end, so I'm wondering what are some approaches to get the following effect:
I want to call a backend "action" (in the MVC sense) when a user stops inputting in a current row and is then on the next row.
I've read about onblur and onfocusout, but neither seem to do what I want. Onblur is on a per-input basis, and onfocusout is triggered each time an input is left even if a user is tabbing through the same row. Further, onfocusout isn't supported by firefox yet.
My app is grails, but I'm open to circumventing the standard g:form (grails form) practice and using some sort of javascript solution. I just don't know what that would be.
Any discussion would be helpful, as I'm trying to learn more about frontend solutions in general. If there are any javascript frameworks that make this easier, let me know about them.
you can use javascript to submit a form when ever you want. You can attach the submit form function to any event (like user ideal, blur any other event you want). Then if any of the event happens, you can call that function which will submit the form. see the example below
function idealUser(){//you call that function according to requirement
setTimeout(function(){
submitForm();
},5000);
}
function submitForm(){
document.getElementByID('formId').submit();
}
You could store the starting values of each row in javascript. Add a function for the onfocus event to the rows to check if the focused row changes.
Then when the focused row changes, the js can check if any other row has different values than the saved values. If a row that is out of focus does have different values than what was previously saved, then submit the changed row info to the backend.
Also update the stored row values in the js after the change is sent to the server.
Validate and submit when moving out of the table row.
Here's some code and a demo. I triggered a button click when you leave the row but you may use ajax to call your server side code.
$("table").on("blur", ".row", function(e){
//check if all input fields are filled
var cols = $(this).find(".col");
var filled = true;
cols.each(function(i, v){
if($(v).val().length==0){
filled = false;
}
});
//if not moving out of the last input field then don't submit
if(e.target !== $(this).find("input").last()[0]){
return;
}
//If filled trigger click for submission
if(filled){
//in reality, you may use ajax here to call your backend code
$("#submit-btn").trigger("click");
}
});
$("#submit-btn").on("click", function(){
alert("Submit Clicked!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr id="row1" class="row">
<td><input class="col" value=""></td>
<td><input class="col" value=""></td>
<td><input class="col" value=""></td>
</tr>
<tr id="row2" class="row">
<td><input class="col" value=""></td>
<td><input class="col" value=""></td>
<td><input class="col3"value=""></td>
</tr>
</table>
<input type=button value=submit id=submit-btn>
I have a FORM on a PHP web page that accepts a table of data (editable-grid) which the end-user is in control of in that they can add as many rows as they like. One of the fields is also a TEXTAREA which means each row has a variable size.
If the post is too large however, it will be rejected by the server and all the target page will see is an empty $_POST. Worse, if the user navigates back to the input page, it will show its initial empty state, losing all data entered and annoying the end-user to say the least.
I could increase the POST_max_size setting in PHP, but all that will do is push the boundary at which it will fail.
I could also check in JavaScript what the size of the post will be, PRIOR to them submitting the form, ideally as they add each row or change the textarea content, but I'm not sure how accurate or slow that will be. It also means they would have to remove some data or rows.
The only other option I can think of is to submit each row individually in a hidden FORM, through AJAX, once they click the Submit button. I'm not sure it is a good idea to replace one post with hundreds of posts to the server.
Any other ideas?
Instead of sending the entire datagrid you can just send the edited row as if it were a single form using javascript. If you send each row in a loop with ajax even if it is not edited you can choke the server in the same way as if you were sending the entire datagrid. Instead of sending 20k rows of data with just one column modified, just send one row when the user leaves the textarea.
I don't know how you manage the editing events but with jQuery (for the sake of simplicity) could be something like this.
$(document).ready(function() {
$('textarea, input').on('blur', function(e) {
var $row = $(this).closest('tr')
var data = {
id: $row.data('id'),
input: $row.find('td input').val(),
textarea: $row.find('td textarea').val()
};
// e.g. foo.php/1
$.post("foo.php/" + data.id, data)
.success(function() { /* silent success */ })
.fail(function() { alert('Error') })
});
});
with html
<table>
<tbody>
<tr data-id="1">
<td><input /></td>
<td><textarea></textarea></td>
</tr>
<tr data-id="2">
<td><input /></td>
<td><textarea></textarea></td>
</tr>
<tr data-id="3">
<td><input /></td>
<td><textarea></textarea></td>
</tr>
</tbody>
</table>
example jsfiddle https://jsfiddle.net/vt0a0udx
ps: sorry for the bad english.
try to change this value in php.ini
max_input_vars = 1000 to 10000
I have a gridview with 2 template buttons: (1) Approve and (2) Rejected..When one of the buttons is clicked the status of the row will change to either Approve or Rejected and update the 'Status' field in the database. I am using this in money transactions.
What i want to happen is to prevent the page to postback when either of the button is clicked. How can i do this in jquery? How can i get the status of the row from the database then pass it to jquery so that when i click the button it will not post back( so that the payment of a customer will only be added once to the currenct balance of the merchant ).
Please help, I have no idea on how to do this...
You can do it with Ajax. To post some data without postback.
When render a table row, you add some id to row like this
<table>
<tr data-id="1">
<td>Name</td>
<td><button class="approve">Aprove</button><button class="reject">Reject</button></td>
</tr>
</table>
Then use jquery, ajax to catch button press
$('.approve').click(function(){
var id = $(this).parents('tr').data('id');/// Here is your id
$.post('/approve/',{id:id}, function(data){
})
});
I am developing a webapp using Spring, jsp, javascript, jquery.
I display a table using datatables.
When I click on a table row I want it to change all fields to an inline edit inputs, selects etc. In addition I want to show some extra input fields in the next row and a save button.
Now I see several ways of doing this. I am not sure which one to take.
I can get a handle to selected row and then iterate over the td and transform them to input/select fields. I can then insert an extra row for the new fields and the save button.
I don't see this as a clean solution. I will have to issue a Post manually instead of using the Spring ModelAttribute binding for the form. (Can I still use ModelAttribute here?)
I can create an edit form in a jsp file which looks like:
<form:form action="" commandName="">
<td> <input ... > </td>
<td> <select ... > </td>
</tr>
<tr>
<td> <label> <input new field> </td>
<td> <button> </td>
</tr>
Note I do not have a beginning in a jsp file as I plan to reuse the tr from the existing row in the table.
This way I would be able to have a clean form and also use the update method I have already written which binds the form to a Java class. Also I do not have to bother about the alignment of input fields with the column names.
The generated html looks like
...
The problem with this approach is the placement of form element in the html causes the entire form to be cramped into one cell of the table which does not look good and messes up the whole layout. Is there a way out? Should I just replace the contents of the table with a having a colspan and then put divs inside this element and fine tune the css to ensure that the input fields align with the column names in the table?
Is there a better solution you can suggest?
In case the question is not very clear I can fill in more details.
This is what I would do (coming from a server-side development background, as I know developers love easy solutions)
Wrap the table with a single form
on Edit row (clicking row) open an ajax request that returns pure html that looks like the exact tr, only with whatever extra you want to include:
<tr><td><input type="text" name="text1" ... /></td><td>second row... </td></tr>
<tr><td colspan="2">And hey, here is more, and the save button ... </td></tr>
in jQuery replace tr with content retrieved (myTr.replace($(ajaxResponse))) or something similar
now Save button is a regular submit for the form
if you want to submit via ajax, once done, return the old html in your ajax response and replace the two trs with the old tr (you just need to hook it by giving new trs an attribute that you can find easily in jquery)
don't forget to switch off a global key to prevent double editing, users can edit one row at a time
Update: adding a second solution to dump load on client instead of server
To avoid overloading the server (though I wouldn't be worried about it until it becomes a regular habit), you can make your form fields as a template inside your HTML and use string replacement (or jQuery Templates), so instead of ajaxing to get response in step 2, you call the template, and replace the strings with attributes you save in every row... like this:
<div id="myTemplate"> // or you can use jQuery script templates
<tr><td><input type="text" name="${Name}" ... /> id is ${Id}</td><td>${SecondRow}... </td></tr>
<tr><td colspan="2">Save button here.... and may be more text ${MoreText}</td></tr>
</div>
in every row in your code add sufficient attributes or ids to know what you want to replace with, like this:
<tr data-itemid="34"><td ><input type="text" name="text1" id="findme" ... /></td><td data-moretext="here is more text">second column </td></tr>...etc
so now in your replacement script:
$("#myTemplate").html().replace("${Name}", $(thisrow).find("#findme").attr("name"))
.replace("${Id}",$(thisrow).attr("data-itemid"));
etc...
Of course after submission it has to be a to server, but in case user "cancels" you can have another readonly template
By the way, that is the way I usually go with, I use jQuery templates, and create edit and view templates, but I also repeat edit forms and I use jQuery ajax submit manually... but that... my friend, is not a simple clean and maintainable solution I'm afraid
I've been into an issue like this a year before. This is a messy problem. Either way if you traverse each td of row and convert it into text field or You can create a separate jsp file for this.
But the best in this case is to change the content of td to input field and post the data manually. because in this case you cannot wrap form tag around tr. You have to manually post the values of each input field.
P.S The very best solution is to create an edit dialog.
There is another solution, but I'm under the impression you won't like it very much... you can use a single form for the whole datatable (wrapping the whole table in a form is permitted) generate input fields for the current row and if it's updated submit the form asyncronously with javascript and restore td contents to the original html, if you name your fields such as name="field[]" you can also submit multiple rows at a time (I don't know if you'd want that though).
You can write html code such as
<form action="">
<table>
<tr><td><input type="hidden" name="row[]" value="1"/><input name="field[]"/></td></tr>
<tr><td>field value for row2</td></tr>
<tr><td><input type="hidden" name="row[]" value="3"/><input name="field[]"/></td></tr>
</table>
</form>
you can just grab the form with jquery and submit it via xmlhttprequest as I suspect you would if each row was a separate form (which is illegal), if you don't want multiple rows, just remove the [] and submit each row
and upon submitting the values you get them numbered correctly, don't know exactly how it would behave in java but in php I'd get the following:
$_GET[row][0] = 1;
$_GET[field][0] = 'value typed in row1';
$_GET[row][1] = 3;
$_GET[field][1] = 'value typed in row3';
Alternative table definition to avoid having the same name again
<form action="">
<table>
<tr><td><input name="field[1]"/></td></tr>
<tr><td>field value for row2</td></tr>
<tr><td><input name="field[3]"/></td></tr>
</table>
</form>
It's the same table as above only you set explicit indexes for each entry thus avoiding duplicate names in the response, preferrably use a unique identifier which can describe the row from the table that you're modifying in there (when possible I use the primary key) instead of the row number, just in case that wasn't clear enough.
Have you tried:
Wrap whole table in the form
have the data entries as disabled inputs with their borders hidden via CSS
when user clicks edit, enable the inputs and show the borders
You'll probably need hidden elements for each field
When user submits the form, post via ajax and set the inputs back to disabled with hidden borders
What about contenteditable?
Demo: http://jsfiddle.net/SO_AMK/XQekC/
jQuery:
var ctrlDown = false;
$(document).keydown(function(e) {
if (e.which = "ctrlKey") {
ctrlDown = true;
}
}).keyup(function(e) {
if (e.which = "ctrlKey") {
ctrlDown = false;
}
});
$('#example').dataTable();
$("#example tr").click(function() {
if ($(this).hasClass("row_selected") && ctrlDown) {
submitRow($(this));
return false; // Break out so the next if doesn't run
}
else if ($(this).hasClass("row_selected") && ctrlDown == false) {
return false; // Break out so the next if doesn't run
}
if ($(this).siblings(".row_selected").length && ctrlDown == false) {
$(this).siblings(".row_selected").each(function() {
submitRow($(this));
});
}
$(this).addClass("row_selected");
$(this).children("td").each(function() {
$(this).attr("contenteditable", true);
});
});
function submitRow(elm) {
var data = [];
$(elm).removeClass("row_selected").children("td").each(function() {
data.push($(this).text());
});
alert(data); // This will stop the keyup from firing, but you won't (I hope) really be using alerts
}
This has everything but a submit-to-server function, it's also completely inline and has support for selecting multiple rows.
The only bug is, when it shows the data alert the focus goes off of the main window so the keyup event never fires, since you probably won't be using alerts this shouldn't be an issue. To fix it in the fiddle, press and release ctrl after the alert closes before clicking a row.
I see couple of problems
Your no. Of columns in the table & the edit columns you show are different
You might not be having complete data to edit the row so you might need to do an Ajax call and get it
If you have complete data on then you don't need point 2, let's assume you have a function f called with the clicked tr as the parameter
function f(row)
{
var newRow = yourTable.insertRow(parseInt(row.rowIndex,10)+1);
//you can place the above or below the clicked row , or you can even make the row visible false And then show the new row
Var newCell = newRow.insertCell(0);
newCell.colspan = 6;//the count if columns in your table row
NewCell.innerHTML = " put your HTML content here";
}