Question

I have the following code in main.js:

(function($) {
    // Code goes here
    $.fn.switcher=function(opts)
    {
        var defaults={
            btn:'.info_btn', //Класс кнопки
            block:'.details_info', //Класс блока, который нужно скрыть
            hideifout:false, //Если true то скроект блок когда мышь его покент
            classActive:'open' //Класс который ставится активной кнопке
            //classNotActive:'close'
        };
        var options=$.extend(defaults, opts);
        this.each(
            function(){
                var $this=$(this);
                var btn=$this.find(options.btn);
                var block=$this.find(options.block);
                var plaing=false;
                var click=function(e){
                    if (e.type=='mouseleave')
                    {
                        e.stopPropagation();
                    }
                    if (plaing) return;
                    plaing=true;
                    if (block.is(':visible'))
                    {
                        block.hide('blind',function(){
                            btn.removeClass(options.classActive);
                            btn.css('z-index',0);
                            plaing=false;
                        });
                    } else {
                        btn.addClass(options.classActive);
                        btn.css('z-index',2);
                        block.show('blind',function(){

                            plaing=false;
                        });
                    }
                }

                btn.click(click);
                if (options.hideifout){
                    block.mouseleave(click);
                }

            }
        );
    }
})(jQuery);

And js code in my aspx file:

<script type="text/javascript">
    $(document).ready(function () {
        $('#listInfoBlock').load('/cinema/filmlist'); // load films by default

        $(".title").click(function (e) {
            e.preventDefault();
            loadFilmList($(this));
        });

        $("#buttonFindFilmByName").click(function (e) {
            e.preventDefault();
            loadFilmList($(this));
        });

        // load films by criteria
        function loadFilmList(id) {
                $('#listInfoBlock').load('/cinema/filmlist?id=' + $(id).attr("id"));
                $(".tabs").find("a").removeClass("active");
                $(id).parent().addClass("active");

            };
    });
</script>

The function loadFilmList fills listInfoBlock.
The problem in that function in main.js executes first and there are no div called .details_info (it will be there when loadFilmList is executed)

How can I solve this problem?
Thanks.

SOLUTION:

I rewrite like that:

function loadFilmList(id) {
            $('#listInfoBlock').load('/cinema/filmlist?id=' + $(id).attr("id"), function () {
                $('.infoBlock').switcher();
                $('div.widgets').switcher(
                    {
                        btn: '.expand',
                        block: '.voice_block',
                        hideifout: true
                        // classActive:'expand'
                    });
            });
            if (id !== undefined) {
                $(".tabs").find("a").removeClass("active");
                $(id).parent().addClass("active");
            }            
        };

now it’s work.
Thanks Nate.

Answer 1

The problem is that you’re declaring $.fn.switcher but aren’t ever calling it anywhere. I think you need to call it in two places, in a callback function on both of your .load() AJAX calls.

$('#listInfoBlock').load('/cinema/filmlist', function() { $.fn.switcher({ }); });

and

$('#listInfoBlock').load('/cinema/filmlist?id=' + $(id).attr("id"), function() { $.fn.switcher({ }); });