[Solved] JQuery Tools Overlay and AJAX Binding

[Jako]

Hi there

I have an overlay window that I use with jquery tools, there is also a grid using ajax databinding.

The problem is that when I use the next page button on the grid, the data reloads, but the $document.ready() function never fires again. This means that when I page away from the first page of the grid, I lose the ability of the overlay window. I tried adding it to a function in the ClientEvents.onComplete and onDataBound events of the datagrid, but it doesn't work either.
Grid:

@(Html.Telerik().Grid(Model)
        .Name("uxList")
        .ToolBar(toolBar => toolBar.Template(
                    @<text>
                        <label>Search:</label>
                        @(Html.TextBox("uxSearch"))
                        <input type="button" onclick="javascript:submitSearch()" value="search" />
                    </text>
                ))
        .Columns(columns =>
            {
                columns.Template
                        (
                            @<text>
                                @(Html.ActionLink("change", "Change", "Secure",
                                    new { imprintID = item.ImprintID, publisherID = item.PublisherID },
                                    new { @rel = "#overlay"} ))
                            </text>
                        )
                        .ClientTemplate
                                    (
                                            "<a  rel=\"#overlay\" href='" + Url.Content("~/Secure/Change") + "?imprintID=<#=ImprintID#>&publisherID=<#=PublisherID#>'>change</a>"
                                    )
                        .Width(60);
            })
        .DataBinding(dataBinding => dataBinding.Ajax().Select("_GetList", "Secure"))
        .ClientEvents(clientEvents => clientEvents.OnDataBinding("dataBinding").OnComplete("setOverlay"))
    )

Script:

<script type="text/javascript">

    $(document).ready((function () {

        setOverlayLinks();

    }));

 

    function setOverlayLinks() {

        // if the function argument is given to overlay,

        // it is assumed to be the onBeforeLoad event listener

        $("a[rel]").overlay({

 

            mask: 'grey',

            effect: 'apple',

 

            onBeforeLoad: function () {

 

                // grab wrapper element inside content

                var wrap = this.getOverlay().find(".ImprintChangeContent");

 

                // load the page specified in the trigger

                wrap.load(this.getTrigger().attr("href"));

            }

 

        });

    }

 

    function dataBinding(args) {       

        var rpgSearch = getRPGName();

        args.data = $.extend(args.data, { rpgName: rpgSearch });

      

    }
    function setOverlay(args) {
        setOverlayLinks();
    }


</script>

[Jako]

it seems that the databound event does actually work, but only about 5-10% of the time.

I changed the JQuery overlay to a FancyBox and it works if the type is iFrame, but when its ajax it responds the same as the overlay.

any ideas?