Question

Here is my submit button written dynamically through AJAX:

var htmlpage = "<div class='pages'>"
                for (i=1 ; i < pages+1 ; i++)
                    {
                        htmlpage += "<li><input type='submit' value='"+i+"' onclick='updatefilters;' /></li"
                    }
                htmlpage += "<div>"    
                htmlpage += "</ul>";

I am trying to rerun the updatefilters() function to change the items that are displayed. I imagine its a bit tough to conceptualize without seeing all the code…but essentially, all I need to do is run the function again on each click of the submit button…right now, its giving me a updatefilters is undefined error in firebug.

Heres my whole JS for reference

$(function() {
    $( "#selectable" ).selectable({
        selected: updatefilters  
    });
    getactivesession();
    function getactivesession(ev, ui){
        var i = 0;
        var actfilter, strfilter;
        var strfilterarray = new Array();
        $.ajaxSetup({cache: false})
        $.ajax({
        type: "POST",  
        async: false,
        url: 'welcome/getactivesession', 
        dataType: 'json',
        success: function (data){
            strfilter = JSON.stringify(data)
            strfilterarray = strfilter.split(',')
            for (i=0 ; i < strfilterarray.length ; i++) {
                strfilter = strfilterarray[i]
                strfilter = strfilter.replace(/[\[\]'"]+/g,'');
                var strfilterdash = strfilter.replace(/\s+/g, '-')
                actfilter = '#'+ strfilterdash
                $(actfilter).addClass('ui-selected')
            }
            updatefilters();
        }
        });
    }

    function updatefilters(ev, ui){
        // get the selected filters
        var template, html;
        var i = 0;
        var page;
        if(! page){
            page = 0; 
        }

        var $selected = $('#selectable').children('.ui-selected');
        // create a string that has each filter separated by a pipe ("|")
        var filters = $selected.map(function(){return this.id;}).get().join("\|");
        $.ajax({
            type: "POST",
            async: false,
            url: 'welcome/updatefilters',
            dataType: 'json', 
            data: { filters: filters, page: page },
            success: function(data){
                var html = "";
                html += "<div id=board>"
                html += "<div class='board' id='table'>"
                html += "<div id='row'>header here</div>"
                var pages = Math.ceil(data['num_threads']/10);
                var htmlpage = "<div class='pages'>"
                for (i=1 ; i < pages+1 ; i++)
                    {
                        htmlpage += "<li><input type='submit' value='"+i+"' onclick='updatefilters;' /></li"
                    }
                htmlpage += "<div>"    
                htmlpage += "</ul>";
                htmlpage += "</br>";
                html += htmlpage;
                for (i=0 ; i < data['threads'].length ; i++)
                {
                    html += "<div id=row>";
                    html += "   <div id='author' style='background: url("+data['threads'][i].location + ") no-repeat; background-position: center;'><p>"+data['threads'][i].username + "</p></div>";
                    html += "   <div id='arrow'></div>";
                    html += "   <div id='subject' title='"+ data['threads'][i].body +"'>";
                    html += "       <a href=thread/" + data['threads'][i].slug + ">"+ data['threads'][i].subject +"</a><p>Created: "+data['threads'][i].posttime+"</p></div>";                    
                    html += "   <div id='info'>";
                    html += "       <div id='replies'>" + data['threads'][i].replies_num + "</div>";
                    html += "       <div id='lastpost'>"+ data['threads'][i].lastreply+"</div>";
                    html += "   </div>";
                    html += "</div>";
                }
                html += "</div></div>";
                $('#board').html(html);
            }
        });
    } 
});

Answer 1

There appears to be a few problems with this approach.

First, you’re not actually calling the function in your onclick handler.

htmlpage += "<li><input type='submit' value='"+i+"' onclick='updatefilters;' /></li"

should be:

htmlpage += "<li><input type='submit' value='"+i+"' onclick='updatefilters();' /></li"

Second, the updatefilters function isn’t accessible from the global scope, which is where that anonymous function will be executed from. You’d have to move function updatefilters(ev, ui) outside the onload callback, perhaps to the top of your script block.