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..

your code seems okay to me. Are these working if no ajax involve? — Reigel Gallarde
– Reigel Gallarde, Commented Sep 22, 2010 at 7:28
@Ari, This actually has nothing to do with asp.net mvc. You should take a look at jquery.live(): api.jquery.com/live — Mattias Jakobsson
– Mattias Jakobsson, Commented Sep 22, 2010 at 7:41
@Mattias - Why .live() ? That can't help the problem here. ;) — Reigel Gallarde
– Reigel Gallarde, Commented Sep 22, 2010 at 7:44
@Reigel, You are right, sorry. I totally misread the question :) But still, the problem has nothing to do with asp.net mvc. — Mattias Jakobsson
– Mattias Jakobsson, Commented Sep 22, 2010 at 7:49

TheGeekYouNeed · Accepted Answer · 2010-09-22 08:09:25Z

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.

answered Sep 22, 2010 at 8:09

TheGeekYouNeed

7,5412 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related