How do I make an automatic javascript function call from php function?

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 send the function definition before calling it.

The user agent (browser) otherwise tries to call a function that not yet exists which results in an error.

Answer 2

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.

Answer 3

If you are updating the content of the page using the innerHTML or similar, the code will not be executed when it is added to the DOM. Clever usage of eval() might fix this, although it may also open you up to potential XSS vulnerabilities. The safest route is to already have the function defined in the page, and then call it when the XHR successfully returns.

Answer 4

EDIT! After re-reading the entire thread with Anthony:

Couple things:

• See if you can add "eval()" on your return response.

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

• Try to put that autoRefresh() function in a global include JS file called in the head tag.

Another alternative would be to overwrite the functions already in your drupal library so you can add those things you wanna do in the Ajax call.