Updating MySQL with textarea content without reloading

Question

Hi, I'm building a page which loads the contents of our MySQL db for editing. Each row of the table is in a seperate, editable textarea on the page. I need the user to be able to update each row (ie send it's contents to the db) without reloading the whole page, with a click of a button that's responsible for that specific textarea.

I understand that such procedure would involve some JavaScript, but sadly I know none - I did all I could with php, so I need a pointing in that direction. Basically my question (I think) is how do I grab a text from an edited textarea and send it to MySQL without reloading the page. If I'm heading in the wrong direction I'd be more than willing to hear other suggestions.

Answer 1

Yes this will require javascript. Namely an async call to a PHP page you have. This is often called AJAX.

I hate to be the "use jquery" answer here but the hump of learning jQuery to use AJAX based calls is very low to the value you gain from calls like this.

The documentation has great examples and most of them are quite simple.

Answer 2

Try to read more about Ajax. There are a lot of libraries for it.

Answer 3

What you're looking for is AJAX. jQuery makes a lot of that easier; try starting here.

Answer 4

That's precisely what AJAX does: Asynchronous JavaScript and XML. It lets you send requests to the server without reloading the page.

I'd recommend starting with jQuery which you'll notice has a lot of support in the StackOverflow community, as well as elsewhere, and which makes cross-browser AJAX requests very easy.

With the jQuery script on 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's a good place
        // to update your page accordingly.
    });
});

Understanding the details will still require a thorough understanding of JavaScript, so really the best thing to do is dive in and start writing (and thus learning) a lot of JavaScript. AJAX is a fine place to start.

Answer 5

There is a good introduction to JavaScript at Opera. Jibbering covers the use of the XHR object, which is the usual way to send data to the server without leaving the page. Libraries such as YUI or jQuery can do some of the heavy lifting for you.

Answer 6

You can add JavaScript event to textarea:

onblur="sendUpdate(this.value)"

This event will happen when user has finished editing the text and leaves the input.

In example, "this" references current textarea component.

And then use Ajax, as previously mentioned. An example would be:

function sendUpdate (text) {
  $.post('script.php', {textarea_value:text},function(){});
}

Answer 7

You need to make asynchronous calls to server from your script (javascript).Use ajax to achieve this.You need to have a look at using XMLhttp objects to communicate with the server /database from your client side script (javascript) . You need not submit the entire page using a button click,instead you can invoke the javscript code in a button click event or a onBlur event or a onTextChange event etc...

jQuery is a javascript framework library which helps you to reduce the number of lines of code to implement this. But its not necessary that you need to use jquery .You can do ajax calls without using jquery.Usage of jQuery will reduce the number of lines.

Check this

http://docs.jquery.com/Ajax/jQuery.ajax

Answer 8

You will definitely require JavaScript, and some method of sending a HTTP request to your PHP server without reloading the page. Generally, this is called AJAX.

It is probably best to use a JavaScript library, as AJAX is a bit complicated for beginning JavaScript developers. A good choice is JQuery, or MooTools

AJAX libraries usually use XMLHttpRequest or JSONP to implement the HTTP requests. Understanding those should make it a bit easier.

• JQuery AJAX: http://docs.jquery.com/Ajax
• MooTools AJAX: http://mootools.net/docs/core/Request/Request

Selecting the textarea element, updating it, would require use of the DOM (http://www.w3.org/DOM/). Most JavaScript frameworks now use an implementation of CSS or XSLT selectors to query the DOM.

• JQuery Selectors: http://docs.jquery.com/Selectors
• MooTools Selectors: http://mootools.net/docs/core/Utilities/Selectors

Answer 9

You can do this fine without JavaScript. Just have each textarea+button in its own <form>, then submit the form to a script that updates the database from the textarea value, and returns a:

204 No Content

status instead of 200 OK and a new page. The old page will stay put.