Calling AJAX function relative to recordset ID's

[learning_brain]

Hope you can help.

I have an AJAX script as below...

var ajaxDownrate;//create ajax variable
    
    //main funtion to create XMLhttp request from event call
    function ajaxDownrateCall(str)//str is value from field
    {
        //try various browsers
        try{
        // Opera 8.0+, Firefox, Safari
        ajaxDownrate = new XMLHttpRequest();
        } catch (e){
            // Internet Explorer Browsers
            try{
                ajaxDownrate = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try{
                    ajaxDownrate = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){
                    // Something went wrong
                    alert("Your browser does not support HTTP requests.");
                    return false;
                }
            }
        }
        
        //specify url to call + variable which will be called using GET
        var url="../ajax/ajax_fail.php";
        url=url+"?downlink="+str;//add value and assign to link
        
        
        ajaxDownrate.onreadystatechange=downStateChanged;//function to receive data from server
        ajaxDownrate.open("GET",url,true);
        ajaxDownrate.send(null);
    }
    
    function downStateChanged()
    {
        if (ajaxDownrate.readyState==4)//check if response is ready from server
        {
            var result = ajaxDownrate.responseText;//retreive data from server
            //document.getElementById("AjaxOutput").value=result;//specify output in field
            document.getElementById("AjaxOutput").innerHTML = result;//specify output in div
        }
    }

Then, in a loop from a recordset, I have links as below (also to display returned value)...

<div class="contentbox" id="AjaxOutput">
                    
                    <div class="link"><a href="javascript:ajaxDownrateCall(<?php echo $row_fulltext_images['ID'];?>)">Fail</a></div>
                    <div class="box"><?php echo $row_fulltext_images['ID'];?><?php //echo $row_fulltext_images['WIDTH']; ?>x<?php //echo $row_fulltext_images['HEIGHT']; ?></div>
</div>

The link calls the AJAX and passes the ID from that loop to a php page as below...

require_once('../Connections/discountdomains.php');
include('../includes/function_sanitise_sql_string.php');
  
mysql_select_db($database_discountdomains, $discountdomains) or die('Could not select db. ');

$ajaxdownlink=$_GET["downlink"];
$ajaxdownlink=GetSQLValueString($ajaxdownlink,"int");

echo $ajaxdownlink;

$updatequery = "UPDATE images SET SUIT = -10, THUMBOK = 0 WHERE ID = '".$ajaxdownlink."' LIMIT 1";
$updateresult = mysql_query($updatequery) or die('Could not update.');

//clear thumbnail
@unlink('../thumbs/'.$ajaxdownlink.'.jpg') 

With me so far???

OK... here's the hitch..

This only works once with the first link I click, regardless of how many rows are in the recordset. Also the innerHTML "AjaxOutput" always returns to the first iteration.

Do I somehow have to create multiple AJAX functions for each row and if so, how can I do this in a loop?

Hope this makes sense.

Rich

[misson]

Since you've only got one XHR object, only one AJAX request can be active at any one time. This is one reason why globals are bad. Move the declaration of ajaxDownrate into the definition of ajaxDownrateCall so that each invocation gets its own XHR. Either do the same with downStateChanged, or use this rather than ajaxDownrate within downStateChanged.

[learning_brain]

Cheers Misson

As suggested, I've moved the ajaxDownrate variable into the definition of ajaxDownrateCall - which works a treat.

I'm not so clear on what you mean with the downStateChanged.

I can't re-declare the ajaxDownrate variable within this function (or can I?)... which is what I thought you meant by "Either do the same with downStateChanged".

Can I put the downStateChanged function within the ajaxDownrateCall function?

Either way, the backend php works great - I'm just not pulling in the result.

Rich

[misson]

If you declare a variable within a function when a global variable with the same name is also declared, the local variable hides the global within the function. You can still access the global as a property of the global object, which is window in browsers (not that you'd need to in this case).

As stated in my previous post, yes, you can put downStateChanged in ajaxDownrateCall:

function ajaxDownrateCall(str) {
    var ajaxDownrate;
    function downStateChanged() {
        ...
    }
    ...
}

Or use this rather than ajaxDownrate:

function downStateChanged() {
    if (this.readyState==4) {
        var result = this.responseText;//retreive data from server
        document.getElementById("AjaxOutput").innerHTML = result;//specify output in div
    }
}

Or both.

[learning_brain]

Perfect.

I just added the "str" variable to the output string.

document.getElementById("AjaxOutput"+str).innerHTML = result;

..followed by the unique linked div so that the two match.

<div class="contentbox" id="AjaxOutput<?php echo $row_fulltext_images['ID'];?>">

<a href="javascript:ajaxDownrateCall(<?php echo $row_fulltext_images['ID'];?>)">Fail</a>

blah de blah

</div>

Works a treat - many thanks