jQuery更新状态

I am writing some jquery to call an ajax script every 2 seconds to get the result and update the page. I am mostly a backend programmer and could use some help on this.

This is the code I have now:

<script language="javascript">
function downloadProgress(id) {
     $("#" + id + "").load("index.php?_controller=download&_action=getDownloadProgressAjax",
            {
                downloadId: id
            }
        );
    setTimeout(downloadProgress(id), 2000);
}
</script>
<?php
    foreach ($downloads as $dl) {
?>
<div id="<?php echo $dl["download_id"]; ?>">
    <script language="javascript">
        downloadProgress(<?php echo $dl["download_id"]; ?>);
    </script>
</div>
<?php        
    }
?>

This does not work. What am I doing wrong or would you suggest another approach?

Thanks

since you are using jquery, you can use the $.ajax function when the page is ready.

$(function () {
  function function downloadProgress(id) {
     $.ajax({
         url: "index.php?_controller=download&_action=getDownloadProgressAjax&downloadId="+id
       })

     setTimeout(function () {
        if (downloadnotcomplete){ // this way your script stops at some pont.
           downloadProgress(id); 
        }
     },2000);
  }
});

You will attach the downloadProgress(id) function to your download button or anything else, to trigger the function the first time.

I think that you are confusing your PHP script by giving it both query string variables (sent as GET) and data (which is probably getting sent as POST). Try this:

$("#" + id).load("index.php?_controller=download&_action=getDownloadProgressAjax&downloadId="+id }

The problem you are having is that you have to provide a parameterless function and not a function call to setTimeout. Also, I would do it a little bit different and use setInterval instead of setTimeout as it relays your intention better in the code. Here is how I would do it:

<script language="javascript">
    $(function() {
        setInterval(downloadHandler, 2000);
    });
    function downloadHandler() {
        // I'm not sure where the id is coming from  you will probably need to put a
        // class on your div's so that you can select them.
        $(".MyDivClass").each(function() {
            var id = $(this).attr("id");
            downloadProgress(id);
        });
    }
    function downloadProgress(id) {
        $("#" + id + "").load(
            "index.php?_controller=download&_action=getDownloadProgressAjax",
            { downloadId: id }
        );
</script>

and then on your div:

<?php
    foreach ($downloads as $dl) {
?>
    <div id="<?php echo $dl["download_id"]; ?>" class="MyDivClass"/>
<?php        
    }
?>

Hope this helps.