Need Ajax function - update db without refresh of page

Question

I need help with one ajax function

This is raw page setup. Page will contain table with links in this form

.... link - button1 - button2 link - button1 - button2 link - button1 - button2 ...

where button1 is for hiding of row, and button2 is for hiding + adds+1 value to that link in db. every link will have unique id that will go with button2, so it would be easy to target it. So , visitor would click on one of button in a row, row will hide, then he moves to another row....

DB setup:

id - link - .... - nmbOFlikes

My problem is that I dont know Ajax, and it is only solution to update db without need to refresh after every button click.

That page is not static, it is formated by another function that draws data from db This is simple html page version, so if anyone could help...

So this is javascript without function

$(document).ready(function(){
    $("button.live").click(function(){
    $(this).parents('tr').hide();
        alert('Link is hidden');
    });
$("button.add").click(function(){
  $(this).parents('tr').hide();
  alert('This link is dead');
  $.post("update_db.php", { id: button_id, increment: true },
   function(data) {
   alert("Link incremented");
 });

}); });

And this is table

<table width="500" border="0" cellspacing="0" cellpadding="3">
    <tr>
        <td><p>Link 1</p></td>
        <td><button class="live">live</button></td>
        <td><button class="add" id="1">add</button></td>
    </tr>
    <tr>
        <td><p>Link 2</p></td>
        <td><button class="live">live</button></td>
        <td><button class="add" id="2">add</button></td>
    </tr>
</table>

There are a plethora of ajax examples. You can decide wether you want to repeatedly call the refresh, or refreshes once or whatever, but the principal is the same. Ajax is in short, javascript calls some data, which you can then use to assign say the inner html or whatever of some element.. Take a look at examples, and have a try — BugFinder
– BugFinder, Commented Jul 4, 2012 at 14:43

Slukehart · Accepted Answer · 2012-07-04 17:22:49Z

1

You wouldn't add the value directly to the database, you will post the data to a script first. I'm not completely clear on what your trying to accomplish but the post function may look something like:

$.post("update_database_with_ajax.php", { id: button_id, increment: true },
   function(data) {
     alert("Link incremented");
   });

Here is a functional jsFiddle example: Jquery POST Example

update_data_With_ajax.php

/** This is an example and should not be used 'as is' **/
if ( isset( $_REQUEST['increment'] ) {

    // Connect to MySQL
    $conn = mysql_connect("localhost", "root", "");

    if (!$conn) {
        die('Could not connect: ' . mysql_error());
    }

    // Fetch the values we posted using AJAX
    $id = mysql_real_escape_string( $_REQUEST['id'] );

    //Select your database
    mysql_select_db("my_db", $conn);

    //increment your number of clicks    
    mysql_query("UPDATE table_name SET nmbofclicks = nmbofclicks + 1 WHERE id = {$id}");

 }

edited Jul 4, 2012 at 17:22

answered Jul 4, 2012 at 14:47

Slukehart

1,0375 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Slukehart Over a year ago

I've updated the update_data_with_ajax.php section, hope that makes a bit more sense. Based on your comment below just keep in mind that your using ajax to send POST data not GET

Mirko Deli Over a year ago

I tried this way, but vaalue is not changed in db... Probably I didnt get it right?! :/

Slukehart Over a year ago

Ok two questions (1) what does update_db.php look like? (2) Where are you grabbing the ID of the button. I think you need a bit more direction than I've included, let me update it.

Mirko Deli Over a year ago

First, update_db.php is exact as your update_data_with_ajax.php Second, I dont know how to grab id of buttom. Button with class=add is button with target id, so maybe I dont need class for it. When that button is clicked, id of it shoud be grabed, send to update_db.php, and hide that entire row

Slukehart Over a year ago

Which button are you attaching an event listener too with 'button.dead'?

|

Andreas Louv · Accepted Answer · 2012-07-04 14:47:21Z

0

Simple usage of jQuery.ajax:

$.ajax({
    url: "serversite.php",
    type: "POST",
    data: {
        // Object of data you will send to serversite.php
    },
    success: function() {
        // everything went ok.
    }
});

answered Jul 4, 2012 at 14:47

Andreas Louv

47.3k14 gold badges109 silver badges126 bronze badges

1 Comment

Mirko Deli Over a year ago

OK, I understand that I need to build some page that will process my request for db, so I dont need to refresh every time button is pressed. All I wanna pass is id of buttom for that page aka. process.php?id=buttom id, and there in process.php I get all done. But, I still dont know how to code that!!

Collectives™ on Stack Overflow

Need Ajax function - update db without refresh of page

2 Answers 2

14 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

14 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related