Question

This is an ajax function that i would like carry out on click of a button in a specific class , many of the same classes are generated from a while loop in php, however i want the data to be outputted only in the class in whitch the button was clicked, not the other classes although they have the same name.

I also need to change the ajax function as “status” is a class not an id whereas the function calls elements of ID “status” not class “status”, an

<script>
    function ajax_posta() {
// Create our XMLHttpRequest object
        var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
        var url = "javas.php";


        hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
        hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
        hr.onreadystatechange = function () {
            if (hr.readyState == 4 && hr.status == 200) {
                var return_data = hr.responseText;
                document.getElementById('status').innerHTML = return_data;
            }
        }
// Send the data to PHP now... and wait for response to update the status div
        hr.send("num=" + (--num)); // Actually execute the request
        document.getElementById('status').innerHTML = "<img src = 'loading.gif' height = '30'     width = '30'>";

    }
    $(document).ready(function()
    {
        $('.eventer.button').click(function () {
            var self = this;
            $.post('javas.php', function (data) {
                $(self).parent('div').find('.status').html(data);
            })
        });
    }
    )
    ;
</script>

PHP code in the while loop, generates multiple duplicates of the class and buttons with the same name.

echo " <div class = 'eventer'> $timeposted <br>$eventlist <input name='myBtn'     type='submit' value='increment' onClick='javascript:ajax_post();'>
<input name='lol' type='submit' value='dec' onClick='javascript:ajax_posta();'></div>
<div class = 'status'></div>";
echo "<br>";

What i have so far does not seem to work, any help is appreciated, thanks!

Answer 1

Try this:

    $('.eventer > .button').click(function () {
        var self = this;
        $.post('javas.php', function (data) {
            $(self).closest('.eventer').find('.status').html(data);
        })
    });

And convert that ajaxposta() thing to jQuery. =D

Maybe something like this:

function ajax_post() {  
    $.ajax({
        type: "POST",
        url: "javas.php",
        data: "num=" + (--num),
        success: function(result){
        $('#status').html(result);
    });
    $('#status').html("<img src=\"loading.gif\" style=\"height:30px; width:30px;\">");
}