Question

Given the nature of the project I’m working on, I’m trying to avoid using plugins for scalability sake. However, if it turns out a plugin is what’s needed, I’m open to suggestions.

First off, I’m having success in my jQuery pagination script, in that using predefined (in my coldfusion script) hyperlinks of class “loadLink”, I’m able to produce 10 rows of data per page in a new table that gets processed and displayed inside a div tag. In addition, I’m able to get it to re-sort the data in that paginated table of records by clicking on one of the headers I want to sort by. Just like the page links, it sends an ajax call to a CF component that reproduces the table with the new sort intact.

All that works fine, but here is where I’m hitting a big problem. Every time I choose a new page of records to view, I can still execute one new sort of that data. However, when I try to do a second sort of any column, the script reloads itself rather than makes another ajax call. In essence, the click function does not get turned on, even though I think I do have it turned on again. I know I’m missing something but here is the code I’m using:

$(document).ready(function() {
// load the first page of records upon initial load.
$("##mydiv").load("generateInfo.cfc?method=getEmailData", function() {
    $(".sortLink").on("click", function(e) {
        e.preventDefault();
        var recorddata = $(this).attr("href").substring(1); //trim '?' char
        $.ajax({
            type: "GET",
            url: "generateInfo.cfc?method=getEmailData",
            data: recorddata,
            dataType: "html",
            success: function(message) {                            
                $("##mydiv").html(message);
            }
        });
    });
});

$(".loadLink").click(function(e) {
    e.preventDefault();
    var recorddata = $(this).attr("href").substring(1); //trim '?' char
    var curElement = $(this);
    if ($(this).attr("id") != "disabledLink") {
        $.ajax({
            type: "GET",
            url: "generateInfo.cfc?method=getEmailData",
            data: recorddata,
            dataType: "html",
            success: function(message) {
                $('##pageLinks').children('a').each(function () {
                    if ($(this).attr("id") == "disabledLink") {
                        $(this).removeAttr("disabled");
                        $(this).removeAttr("id");
                    }
                });
                curElement.attr("disabled","disabled");
                curElement.attr("id","disabledLink");
                $("##mydiv").html(message);
                $(".sortLink").on("click", function(e) {
                    e.preventDefault();
                    alert($(this).attr("class"));
                    var recorddata = $(this).attr("href").substring(1); //trim '?' char
                    $.ajax({
                        type: "GET",
                        url: "generateInfo.cfc?method=getEmailData",
                        data: recorddata,
                        dataType: "html",
                        success: function(message) {                            
                            $("##mydiv").html(message);
                            $(".sortLink").on("click");
                        }
                    });
                });
            }
        });
    }
});
});

What am I missing here or what else do I need to do to get the sorts to continuously work in an ajax format?

Answer 1

I think you can simplify your code a bit by delegating events:

$(document).ready(function() {
    // cache mydiv location
    var $mydiv = $("##mydiv");
    $mydiv.on("click",".sortLink",function(e){
        e.preventDefault();
        // split on ? instead to avoid an IE issue on dynaimcally created anchors.
        var recorddata = $(this).attr("href").split("?")[1]; //trim '?' char
        $.ajax({
            type: "GET",
            url: "generateInfo.cfc?method=getEmailData",
            data: recorddata,
            dataType: "html",
            success: function(message) {
                $mydiv.html(message);
            }
        });
    }).on("click",".loadLink",function(e){
        e.preventDefault();
        // split on ? instead to avoid an IE issue on dynaimcally created anchors.
        var recorddata = $(this).attr("href").split("?")[1];
        var curElement = $(this);
        if ($(this).attr("id") != "disabledLink") {
            $.ajax({
                type: "GET",
                url: "generateInfo.cfc?method=getEmailData",
                data: recorddata,
                dataType: "html",
                success: function(message) {
                    $('##pageLinks').children('a').each(function() {
                        if ($(this).attr("id") == "disabledLink") {
                            $(this).removeAttr("disabled");
                            $(this).removeAttr("id");
                        }
                    });
                    curElement.attr("disabled", "disabled");
                    curElement.attr("id", "disabledLink");
                    $mydiv.html(message);
                }
            });
        }
    });

    // load the first page of records upon initial load.
    $("##mydiv").load("generateInfo.cfc?method=getEmailData");

});

This will ensure that your events are always bound on ajax-built DOM nodes.

As far as the change I made to the recorddata, in IE, if you dynamically add an anchor tag after load, it will contain the full path to the location rather than the path you gave it. So, if you set the href as ?foo=bar, it will be http://mydomain.com?foo=bar

Change from comment:

}).on("click",".loadLink",function(e){

becomes

});
$(".loadLink").on("click",function(e){