CODEWITHSUNDEEP
javascriptjqueryajax
Mirko Deli
Mirko Deli

Reputation: 3

Need Ajax function - update db without refresh of page

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>

Upvotes: 0

Views: 2287

Answers (2)

Slukehart
Slukehart

Reputation: 1037

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}");

 }

Upvotes: 1

Andreas Louv
Andreas Louv

Reputation: 47137

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.
    }
});

Upvotes: 0

Related Questions