javascript scope question

Question

I've written a little Ajax-y page, that displays data rows from an ajax request. Each row has a "delete link" to allow the user to delete the row quickly, also via ajax.

My problem is one with the scope of the function--

The "main" page has a function that looks like this:

<script language="javascript" type="text/javascript">
window.addEvent('domready', function() {

    function getRows(){
        var myurl = 'myajaxurl.php';
            var req = new Request({
            async:false,
            method: 'get',
            url: myurl,
            data: {'id':'<?php echo $id; ?>'},
            evalScripts:true,
            onSuccess: function(response) {
                $('my_rows_div').set('html',response);
            }
        }).send();
    }

    function deleteRow(rowid){
        alert(rowid);
    }
});    

The data being returned by the 'getRows' function is just some html rows, and it looks like this:

<tr><td>data</td><td><a onclick="deleteRow(1)" href="javascript:void(0);">delete</a></td></tr>
<tr><td>data</td><td><a onclick="deleteRow(2)" href="javascript:void(0);">delete</a></td></tr>

So far so good-- but when I render the page and click the "delete" link, I get the js error that "deleteRow is not defined".

I know this probably has something to do with scope, but I don't quite understand how this works. How can I reference the "parent" page's deleteRow function from within the returned ajax data?

Thanks!

Answer 1

The "global scope" of a page is the "window" object. When you add event handlers from HTML attributes, the global scope is used by default. Do this:

<script language="javascript" type="text/javascript">
window.addEvent('domready', function() {

function getRows(){
        var myurl = 'myajaxurl.php';
            var req = new Request({
            async:false,
            method: 'get',
            url: myurl,
            data: {'id':'<?php echo $id; ?>'},
            evalScripts:true,
            onSuccess: function(response) {
                $('my_rows_div').set('html',response);
            }
        }).send();
    }

    window.deleteRow = function(rowid){
        alert(rowid);
    }
});  

Answer 2

Move the deleteRow function outside of the getRows function, and move both functions outside of the event handler.

In general, Javascript functions should be defined in global scope (or namespaced); not nested inside other functions.