MySQL update with textarea content without reboot
I am creating a page that loads the content of our MySQL db for editing. Each row of the table is in a separate, editable text area on the page. I need the user to be able to update every row (i.e. post it to the db) without reloading the entire page with one click of the button responsible for that particular textbox.
I understand that such a procedure would involve some JavaScript, but unfortunately I don't know anything - I've done everything I can with php, so I need to point in that direction. Basically my question (I guess) is how can I get the text from the edited textbox and send it to MySQL without reloading the page. If I go in the wrong direction, I would more than like to hear other suggestions.
source to share
Yes, this requires javascript. Namely calling the PHP page asynchronously you have. This is often referred to as AJAX.
I don't like "use jquery" here, but the hump of learning jQuery to use AJAX based calls is very low to the value you get from such calls.
There are great examples in the documentation and most of them are pretty simple.
source to share
This is what AJAX does: Asynchronous JavaScript and XML. It allows you to send requests to the server without reloading the page.
I would recommend starting with jQuery , which you will notice has a lot of support in the StackOverflow community as well as elsewhere, and it makes cross-browser AJAX requests easy.
With a jQuery script in your page, you can do something like this:
$("#id-of-the-button-the-user-will-click").click(function() {
$.post('/path/to/your/script.php', { field1: value1, field2: value2 }, function(data) {
// This function is called when the request is completed, so it a good place
// to update your page accordingly.
});
});
Understanding the details will still require a deep understanding of JavaScript, so your best bet is to dive in and start writing (and thus learning) a lot of JavaScript. AJAX is a great place to start.
source to share
There is a good introduction to JavaScript in Opera . Jibbering covers the use of the XHR object , which is the common way to send data to the server without leaving the page. Libraries like YUI or jQuery can do the heavy lifting for you.
source to share
What you are looking for is AJAX. jQuery makes a lot of this easier; try starting here .
source to share
You can add JavaScript event to textarea:
onblur="sendUpdate(this.value)"
This event will occur when the user finishes editing the text and leaves the login.
In the example, "this" refers to the current textarea component.
And then use Ajax as mentioned earlier. An example would be:
function sendUpdate (text) {
$.post('script.php', {textarea_value:text},function(){});
}
source to share
You need to make asynchronous calls to the server from your script (javascript). Use ajax to achieve this. You need to look at using XMLhttp objects to communicate with the server / database from the client side script (javascript). You don't have to submit the entire page on a button click, instead you can call the javscript code on a button click event or onBlur event or onTextChange event, etc.
jQuery is a javascript framework library that helps you reduce the number of lines of code to implement this. But you don't need to use jquery. You can make ajax calls without using jquery Usage jQuery will reduce the number of lines.
check it
source to share
You will definitely need JavaScript and some way to send an HTTP request to your PHP server without reloading the page. This is commonly referred to as AJAX.
It is probably best to use a JavaScript library as AJAX is a bit tricky for beginner JavaScript developers. A good choice is JQuery , or MooTools
AJAX libraries usually use XMLHttpRequest or JSONP to implement HTTP requests. Understanding this should make it a little easier.
- JQuery AJAX: http://docs.jquery.com/Ajax
- MooTools AJAX: http://mootools.net/docs/core/Request/Request
Selecting the textarea element, updating it, will need to use the DOM ( http://www.w3.org/DOM/ ). Most JavaScript frameworks now use a CSS or XSLT implementation to query the DOM.
- JQuery Selectors : http://docs.jquery.com/Selectors
- MooTools Selectors: http://mootools.net/docs/core/Utilities/Selectors
source to share
You can start by adding a jquery function to get any changes made, i.e .:
$('#inputelement').on('input propertychange', function(){
alert("Alert to test jquery working");
});
Then you have to use AJAX to create a php script with data (since php is how you update the server) and submit using either a GET variable or a POST. Then use this script file to upload the changes to your server. eg.
$('#yourElement').on('input propertychange', function(){
$.ajax({
method: "POST",
url: "updatedatabase.php",
data: {content: $("#yourElement").val()}
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
});
});
Script download:
session_start();
if(array_key_exists("content", $_POST)){
include("connection.php");//link to your server
$query = "UPDATE `users` SET `updateColumn`= '".mysqli_real_escape_string($link, $_POST['content'])."' WHERE id= ".mysqli_real_escape_string($link, $_SESSION['id'])." LIMIT 1";
if(mysqli_query($link, $query)){
echo "success";
}else {
echo "failed";
}
}
source to share