Question

So I’m using the simpleImageCheck jQuery plugin to change checkboxes into images. This works fine for the simple pages I return from the server normally:

$(document).ready(function () {
    $("input[type='checkbox']").simpleImageCheck({
        image: './content/themes/base/images/fail.png',
        imageChecked: './content/themes/base/images/success.png'
    });
}

However, on some of my pages there are divs that are loaded dynamically on a button click:

function GetData() {
    $.get("/Ajax/Aapt", variables, function (data) {
        $("#AaptTab").html(data);
    });
    $("input[type='checkbox']").simpleImageCheck({
        image: './content/themes/base/images/fail.png',
        imageChecked: './content/themes/base/images/success.png'
    });
}

The get request will return a partail HTML page. When this occurs the div is loaded fine but the checkboxes are not replaced with the images. I think I understand why it is happening, my problem is that I don’t know what I should do to fix it….
Since the HTML is returned as a string should I just use a string replacement? Or is there a better way around this?

Also every checkbox I am displaying is disabled as they are just used to view data.

Answer 1

This happens because of ‘$.get’ request takes time and works asynchronously.
Try this:

function GetData() {
    $.get("/Ajax/Aapt", variables, function (data) {
        $("#AaptTab").html(data);
        $("input[type='checkbox']").simpleImageCheck({
            image: './content/themes/base/images/fail.png',
            imageChecked: './content/themes/base/images/success.png'
        });
    });
}