Question

I have the following functions, the func resizeInputText works fine. Basically I would like to call resizeAll when my application has successfully loaded data via ajax.

As the content is pulled after the page load I have attempted to wrap my each code in the .on event.

It’s not working, does anyone know how to do this or how to call .each with ajax loaded content?

Thanks as always!

function resizeInputText(obj) {
var boxWidth = ($(obj).val().length * 7) + 1;
    if (boxWidth <= 30) {
        var boxWidth = 30;
    } else if (boxWidth >= 250) {
        var boxWidth = 250;
    }
$(obj).css({width:boxWidth});
}

function resizeAll() {
$("#right-content").on(function () {
    $("input:text").each(function () {
        resizeInputText(this);
    });
});
}

Answer 1

The .on method in your resizeAll doesn’t have an event which it executes the function for. You can see the various usages on the documentation page, but basically you need to tell it which event to listen for, and what to do when that event is raised. Ajax broadcasts some events which you can bind to using the .on method, and in this case the ‘ajaxSuccess’ might be the appropriate one for you.

However, the better approach for you would be to pass in resizeAll as the callback for your ajax method, which will be executed on a successful completion of the ajaxCall. The jQuery ajax syntax allows you to do this by including the option success: resizeAll. You would modify your resizeAll to look like this in that case:

function resizeAll() {
    $("input:text").each(function () {
        resizeInputText(this);
    });
}