CODEWITHSUNDEEP
jqueryasp.netwebhtml
Carlos
Carlos

Reputation: 57

Jquery script does nothing on one page but on another

I have a little JQuery script that I got from a guy with a foreign page.

$(function () {
    var $txt = $('input[id$=TextBoxFiltroProv]');
    var $ddl = $('select[id$=DropDownListProv]');
    var $items = $('select[id$=DropDownListProv] option');

    $txt.keyup(function () {
        searchDdl($txt.val());
    });

    function searchDdl(item) {
        $ddl.empty();
        var exp = new RegExp(item, "i");
        var arr = $.grep($items,
                function (n) {
                    return exp.test($(n).text());
                });

        if (arr.length > 0) {
            countItemsFound(arr.length);
            $.each(arr, function () {
                $ddl.append(this);
                $ddl.get(0).selectedIndex = 0;
            }
                );
        }
        else {
            countItemsFound(arr.length);
            $ddl.append("<option>No Items Found</option>");
        }
    }

    function countItemsFound(num) {
        $("#para").empty();
        if ($txt.val().length) {
            $("#para").html(num + " items found");
        }
    }
});

It works on a page that has already rendered everything (HTML controls) and has some of the elements inside an update panel. But on the other page I have 2 update panels, and one Panel (It starts hidden). The controls are inside the ASP.net PANEL. ¿Is the problem that the controls are hidden? And in that case ¿How do I tell JQuery to start this piece of code when the panel is visible and its controls have been rendered? I think I missed something but I cant see it. Thanks.

Upvotes: 1

Views: 131

Answers (2)

Carlos
Carlos

Reputation: 57

I have sovled this problem, it was because of the updatepanels, I added the following code, surrounded my main code with a function called BindEvents and in update panel I added this script:

 <asp:UpdatePanel...>
<ContentTemplate>
     <script type="text/javascript">
                    Sys.Application.add_load(BindEvents);
     </script>
</ContentTemplate>
    </asp:UpdatePanel>

Upvotes: 0

Gabe
Gabe

Reputation: 50475

If the elements are being added dynamically in an update panel then you will have to set up delegates to bind to the events. That way, when the elements are added dynamically, jquery will be sure to bind the events as declared.

Below is an example where on the document I want to bind any element with the given selector input[id$=TextBoxFiltroProv] to the keyup event that is existing onload or is added to the DOM after the document is ready.

Example:

$(document).on('keyup', 'input[id$=TextBoxFiltroProv]', function () {
      searchDdl($(this).val());
});

Upvotes: 1

Related Questions