Question

I have a Html dropdown that will allow users to have the page size of a grid.

@Html.DropDownList("PageSizes", Model.PageSizes)  

Then I have a javascript block:

        <script type="text/javascript">
        function ChangePageSize(size, msg) {
            alert("alert inside ChangePageSize: " + msg + " " + size); //msg = from: Initial; first dropdown change (grid updates with new page size)
                                                                       //msg = from: Initial; second dropdown  change (alert pops twice, grid does not update)
            var filterPage = "/Search/Filter";
            $.ajax({
                cache: false,
                url: filterPage,
                data: { pagesize: size },
                type: 'GET',
                success: function (data) {
                alert("success" + data);                             //this alert pops twice on the second dropdown change as well, data does have html in it.
                $('#searchResults').replaceWith(data);                       
            },
                error: function () { alert('Error changing page size.'); }
            });
        }

        $(function() {
            $('body').on('change', '#PageSizes', function() {
                var size = this.value;
                if (size != 'undefined') ChangePageSize(size, "from: Initial");
            });
        });
    </script>

This works only once. I’ve also tried using bind() and live(). Does anyone know how to rebind to the change event properly?

Update:
Modified the javascript as suggested and added some debug alerts. It seems that the function is getting bound to the event again, it also looks like the Controller Action is returning the partial view. But why isn’t my #searchResults DIV being updated again? And why does the ChangePageSize function get called twice?

Update2:
I figured out the reason my grid wasn’t populating. The DIV being specified to replace is gone after it is replaced. I crossed my fingers and surrounded the table in the partial view with a DIV with the same name and hoped the correct DIV would be found to replace.

So this is working now. I am still concerned that the function is getting called multiple times, which i’m guessing is also hitting the server multiple times. Why is that happening?

Answer 1

change

$(function() {
    $('#PageSizes').change(function () {
        var size = this.value;
        if (size != 'undefined')
            ChangePageSize(size);
    });
});

to

$(function() {
    $('body').on( "change", "PageSizes", function () {
        var size = this.value;
        if (size != 'undefined')
            ChangePageSize(size);
    });
});

that way all elements with the id PageSizes will have the event handler not only thos that are present with the initial document.ready event