Question

I am trying to create an auto-refresh for a table using ajax/jquery, php/html, and Drupal 6.

Code once the database insert has finished and was successful:

echo "<script type='text/javascript'>autoRefresh()</script>";

Code for the link that eventually calls the javascript code that actually performs the refresh of the table:

    $block_content .= "<br><a id='refreshItemId' class='refreshItemLink' href='$host_url/refresh/projectitems/gid/$curr_gid/nid/$curr_nid'>Refresh List</a>";

Javascript code that is added to the page using PHP (I know it could be a javascript file and then include that, but that’s for another day). This is the code I added to attempt to automatically make click() the link created above once a form is submitted and the item was successfully added to the database:

    $block_content .= "<script type='text/javascript'>
        function autoRefresh()
        {
            alert('Auto Refresh');
            //document.getElementById('refreshItemId').click();
        }
    </script>";

I thought this would have worked, but the autoRefresh() JS function never gets called. Any ideas?

Answer 1

You need to wrap the AutoRefresh call in a “onload” event handler. Right now the function is running (or trying to run) as soon as it is output to the browser, so there isn’t a button to click at that point.

In jquery:

<script type="text/javascrpt">
    $(function() {
        autoRefresh();
   });
</script>

Update:

If you want the refresh button to be clicked after the user has made changes via AJAX, do something like:

$.ajax({
  data: //data sent to script;
  url: //path to PHP script
  success: autoRefresh();
  }
});

If you want to only have it update when the PHP script sends some kind of “safe word” change the success function to something that reviews the server’s response, and if it’s the “all clear” signal, then does the autoRefresh.

Update 2:

Okay, having hashed this out, what you need is your own event handler tied to the function. So have the PHP output the following jquery script:

 <script type="text/javascript">

 $(function() {
     $("#refreshItemId").click(function() {
     $(this).delay('200');
     autoRefresh();
     });
 });

Couple of notes:

The delay method is new to jquery 1.4. If you have an older version, there are other methods that can be used to stall the function.

I haven’t had a chance to mess with .delay() that much yet, so I may have messed up a bit.

But the overall idea should be clear: Bind the function to the link when the page loads; When the onclick event triggers the function, it waits .2 seconds for the Drupal ajax to finish; finally, it triggers the autoRefresh function.