1

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.

Improve this question
9
  • make sure your jquery is actually running and attaching a click handler. otherwise the <a> will be just a regular anchor tag and since the href is #, clicking it will jump to the top of the page. Commented Jul 16, 2015 at 19:03
  • I... don't understand why you're making an ajax request, to a page that makes another ajax request on click. also possibly have an issue with the fact that you're loading jquery in a fragment, the code that uses jquery could very well be executing before jQuery is defined. Commented Jul 16, 2015 at 19:03
  • Really should be including jQuery up front, rather than after an ajax request. Commented Jul 16, 2015 at 19:06
  • @Kevin B Is it not possible to do, for example, live updates on a dynamic list that is loaded with ajax? I thought it would be simple, but I may be over my head on this one. Commented Jul 16, 2015 at 19:08
  • Yes, it's certainly possible to update data live without a page reload. I'm questioning your method of doing so. You've done a few questionable things in your code, so i'm trying to figure out the thought process behind it so that it can be corrected. Commented Jul 16, 2015 at 19:08

2 Answers 2

Reset to default
2

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;
    });
});
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Your code did the trick and the mysql update is correctly executed. The only thing now is that the original list doesn't update until I reload the data from the db.
-1

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

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

Improve this answer

3 Comments

I assure you the $.ajax syntax he is using existed in 1.0
I thought prior to 1.5 it was coded: $.ajax(url, settings); instead of including the url in your settings array.
1.5 added the $.ajax(url, settings), $.ajax(settings) has always existed

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.