JQuery stops working after an AJAX call (ASP.NET MVC)

Question

Hi guys i know this is a known problem in ASP.NET MVC, basically what i have here is a photo gallery with categories (Red, Blue, Green).

When i choose one category, say 'Red', it will do an ajax call and load the page with photos of red colored products. when i click one of the photos, i expect it to be enlarged (lightbox kinda effect). I use a jQuery plugin called fancybox for that.

but as u all know jQuery using a dynamically loaded content with jquery in it , doesnt actually work in ASP.NET MVC. So i added the jQuery call to fancybox into the ajax.success.

but since it is a plugin, the function $(".fancybox").fancybox() does not register and says that it's not a valid javascript function. How can i solve this problem, so that i can do the image enlarge thing after an ajax call? thank you!

   $(document).ready(function() {
        $("select#Colors").change(function() {
            var color = $("#Colors > option:selected").attr("value");
            var tempnric = $(".tempnric").attr("value");
            $("#ProductsDiv").hide();
            $('#ajaxBusy').show();
            $.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                url: "/FindProducts/" + color,
                data: "{}",
                dataType: "json",

                success: function(data) {
                    $('#ProductsDiv > div').remove(); // remove any existing Products
                    if (data.length > 0) {
                        var options = '';
                        for (p in data) {
                            var product = data[p];
                            options += "<a href='/GetPhotoSet/" + product.PhotoID + "' class='fancybox load fade'><img src='/GetPhotoSet/" + product.PhotoID + "'/></a>";

                        }
                        $("#ProductsDiv").html(options);
                        $('#ajaxBusy').hide();
                        $("#ProductsDiv").show();

                    } else {
                        $("#Products").attr('disabled', true).html('');
                        $("#ProductsDiv").append('<div>(None Found)</div>');
                    }
                }
            });

        });
    });

Here is the remaining code it works ok except that when i click on the images, it opens up a new browser..

Answer 1

Before your document.ready call, put this line of code:

 var $j = jQuery.noConflict();

Then replace all of the '$' references with '$j' and your code should now work.

There is probably a conflict between some other javascript and the jQuery script, so your document.ready is not being seen. This is the quickest way to work around the problem. And if you're feeling ambitious, you can find out what is going on by using a tool such as FireFox's Error Console.