How to query database using javascript?

Question

Another question by a newbie. I have a php variable that queries the database for a value. It is stored in the variable $publish and its value will change (in the database) when a user clicks on a hyperlink.

if ($publish == '') { 
Link to publish.html
} else { 
Link to edit.html
} 

What is happening in the background is i am querying a database table for some data that i stored in the $publish variable. If the $publish is empty, it will add a link for publish.html in a popup. The popup will process a form and will add the data to the database and which means that the $publish is no more empty. What i would like to achieve is that as soon as the form is processed in the popup and a data has been added to the database, the link should change to edit.html. This can happen when the page will re-query the database but it should happen without page refresh.

How can it be donw using javascript, jquery or ajax?? Please assist.

Solution 1

Javascript by itself cannot be used to deal with database. That is done using php (Or the server side language of your choice). Ajax is used to send a request to your php script using javascript which will in turn communicate with the db. And it doesn't require a page refresh.

So what you are trying to do can be easily achieved using ajax. Since you mentioned jquery, you can check out the $.ajax or $.post methods in jquery which make the process even more simple.

You need to process the form using ajax. The ajax request is sent to a php script which will make the necessary changes in the database and send the new link (link to edit.html) in the response. Upon getting the response, just replace the current anchor element with the new one ..

for eg..

$.post(url, formdataobject , function (resp) {
   $("a.youra").text('edit').attr('href', resp);
});

url - where the php script is located

formdataobject - a javascript object that will have the form data as key value pairs

the third parameter is an anonymous function also known as callback function since it will be invoked only when the response is received from the server. This is because ajax requests are asynchronous.

Inside the callback function, jquery is used to change the text inside the anchor element to edit and the href attribute is changed to value that came in the response.

$.post means we are using the post method. so the parameters can be accessed as elements of $_POST array in php. After updating the db, you can simply echo out the new link and it will be received in the response.

Also, there are other formats in which you can get the response for eg. xml, json.

Solution 2

I'll try to leave the technical jargon aside and give a more generic response since I think you might be confused with client-side and server-side scripting.

Think of javascript as a language that can only instruct your WEB BROWSER how to act. Javascript executes after the server has already finished processing your web page.

PHP on the other hand runs on your web server and has the ability to communicate with your database. If you want to get information from your database using javascript, you'll need to have javascript ask PHP to query the database through an AJAX call to a PHP script.

For example, you could have javascript call a script like: http://www.myserver.com/ajax_function.php?do=queryTheDatabase

In summary: Javascript can't connect to the database but it can ask PHP to do so. I hope that helps.

Solution 3

Let me try, you want to change the link in a page from a pop-up that handles a form processing. Try to give your link a container:

<div id="publish_link"><a href="#" id="publish">Publish</a></div>

As for the form submission use Ajax to submit data to the server to do an update and get a response back to change the link to edit or something:

$.post("submit.php", { some_field: "some_value"}, function(response) {
    if(response.isPublished)
       $('#publish_link', window.opener.document).html('<a href="edit.html">Edit</a>');
});

Basically your publish link is contained in a div with an ID publish_link so you change its content later after data processing without reloading the page. In the pop-up where you would do the form processing it is done using jQuery Ajax POST method to submit the data. Your script then accepts that data, update the database and if successful returns a response. jQuery POST function receives that response and there's a check there if isPublished is true, get the pop-up's opener window (your main window) and update the link to Edit. Just an idea, may not be the best out there.

Comments

[Flavio CF Oliveira]

sure, if you will use jquery as your javascript livrary, try to understand how ajax works in jquery: api.jquery.com/jQuery.ajax

[Sam]

Code looks promising but i am having a tough time implementing it.

[Snowcat]

thanks for this. Can python be used as a server side language for this and integrated with javascript?