CODEWITHSUNDEEP
javascriptphpjquerymysqlajax
user5075858
user5075858

Reputation: 84

Mysql update with JQUERY

I'm having a bit of trouble understanding how to get this to work. I'm loading a page with data from mysql db table using jquery. I'd like to be able to do mysql updates on individual records without refresh. Here's the code I've tried, but can't get the update to work.

index.php

function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","data_ajax.php?q="+str,true);
        xmlhttp.send();
    }
}

Here I have a drop-down in a while loop to retrieve the desired records and post it into a <div id="txtHint"></div>. So far, so good.

Now, I'm putting the following in data_ajax.php to do the mysql update.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $(".update_button").click(function() {
        var id = $(this).attr("id");
        var dataString = 'id='+ id ;
        var parent = $(this).parent();

        $.ajax({
            type: "POST",
            url: "update_ajax.php",
            data: dataString,
            cache: false,
        });

        return false;
    });
});
</script>

Where I have a text link <a href='#' id='".$row['id']."' class='update_button'>".$label."</a> that should call the action above to do the update. All this does it jumps the page to the top and nothing happens. The update_ajax.php doesn't seem to get called when link is clicked. I know it's something simple I'm missing. Any help would be appreciated.

Upvotes: 1

Views: 87

Answers (2)

Kevin B
Kevin B

Reputation: 95028

What I would suggest is including jQuery directly in index.php, which would then allow you to use event delegation to handle most of the work.

With jQuery being included in index.php, you can use jQuery to do the showUser ajax request too.

function showUser(str) {
    if (str == "") {
        $("#txtHint").empty();
        return;
    }
    $("#txtHint").load("data_ajax.php?q=" + str);
}
$(document).ready(function () {
    $("#txtHint").delegate(".update_button", "click", function () {
        var id = $(this).attr("id");
        var dataString = 'id='+ id ;
        var parent = $(this).parent();

        $.ajax({
            type: "POST",
            url: "update_ajax.php",
            data: dataString
        });

        return false;
    });
});

Upvotes: 2

zeropsi
zeropsi

Reputation: 694

Update your version of jQuery. Your example shows you using version 1.4.2.

The $.ajax shorthand code was introduced after version 1.5.

Upvotes: -1

Related Questions