views:

1264

answers:

5

Hi everyone!!

I have a ASP.NET MVC page of Events of a specific day. I'm also using jQuery datepicker and when I select a day, I create a function that send this selected day via Ajax to a MVC ActionResult method and this method will treat this day, will do all the database stuff and will return me all the Events of this selected day. So far, so good...

After that, I was trying to use jQuery cluetip to show me some Events details via Ajax and this also worked... partially!!!

Why partially?? When I load the page for the first time (and in all first times), the tips worked great and all the Ajax stuff! And in all first time loadings, the page will show the Events of today and this is not via Ajax, it's just a ViewData["events"] sending information for the page. But, if I select a day, the page is updated via Ajax, but the tips don't work anymore!! They don't show anything... I hover the links and nothing happens...nothing nothing.

I think this was a cluetip problem, but for my surprise it wasn't...

Just for testing purposes, I created this in jQuery:

$(".myLink").click(function(){ alert($(this).attr("id")); }

When the page loads for the first time, this code works, but if I select another day and the page is updated, this jQuery code doesn't work anymore!! The click function doens't work at all!!

So, finishing this doubt... does anyone know what could be happening? Why my jQuery codes don't work in ASP.NET MVC updated page via Ajax??

Thanks all!!

A: 

It has to do with the path. When you reference your scripts, be sure to use <% Url.Content("~/path/to/script") %>

Jarrett Meyer
Jarrett, can't I just use on $.ajax settings { url: 'Admin/Schedule' } ???
AndreMiranda
I understood just now what you've told me, but why is the problem in the path??? jquery is working just fine...
AndreMiranda
I change the script path but the problem still persists... :-(
AndreMiranda
A: 

Improbable, but you could be wiping out the JS that is responsible for showing the cluetip when the MVC updates the container as a result of an AJAX call. That is, of course, if that JS is declared inline, inside the document.

dalbaeb
the JS is declared in Site.Master as well cluetip. I was 'googling' around and found something about rebind my jQuery in theses Ajax callbacks... should it be that way?
AndreMiranda
Hmmm... The Microsoft AJAX Framework also uses the dollar variable ($), so sometimes that could be your problem. Try changing the code that stops working after the AJAX call to user jQuery variable instead of $ (i.e. jQuery(".myLink").click...) everywhere, and see if that fixes it.
dalbaeb
"to USE jQuery variable", not "to user jQuery variable" of course :)
dalbaeb
+1  A: 

Add your mouseover/click event handlers again on ajaxComplete. jQuery selectors don't always work on document elements that are added dynamically to the page, like those returned from an AJAX call.

This code re-binds your event right after content population:

$.get("/getMyContent/" + eventID, "{}", function(content) {
  $(".contentArea").html(content);
  $(".eventLink").click(function(){
    doMyPopupEtc();
  });
});
Peter J
Thanks Peter! the answer was in your direction... to rebind jQuery events after a ajax callback!!Thanks everyone!!
AndreMiranda
+1  A: 

Use the live function when binding events-

$(".myLink").live("click", function(){
    alert($(this).attr("id"));
});

This will ensure all elements with .myLink will be effected by the event, even if they are dynamically loaded later.

This doesnt work for every event though, so check the doc: http://docs.jquery.com/Events/live

elwyn
A: 

First I thought I had a similar problem. It turned out though that I was assigning the cluetip twice which stopped it from working.

Tillito

related questions