Question

I thought I was doing great with this web app I’m working on, but alas.. I’m starting to think I designed it poorly, even though I started over like 6 times while learning the CI framework.

The application is here and my problem is as follows: when you go to, for example, december 31 2011 (by pressing the right arrow then clicking on the 31st), you get some red errors and my table headers (second part of the page) go crazy. After doing that, you should try going back to say.. april 1, you’ll see that my headers go even more crazy, looping through some stuff that I don’t know where it’s coming from. If you go to april 2nd then, you’ll see it still loops through that stuff, even though it shouldn’t.

I’m not sure how to debug this, I don’t even know where the problem lies: in my AJAX call or my PHP code.

My source code can be found here. The files involved are:

/logic/controllers/planner.php
/logic/models/planner_model.php
/logic/views/planner/days_content.php
/logic/views/planner/detail_content.php

Would anyone be so kind to look at this and help me find the problem here? I’m honestly not sure where to look for the solution to this issue. I can provide more information about how my application works if necessary.

I basically store everything in an array, and pass that to the view. When I do an AJAX call, I update the array and load the view again, after which I pass it into my page using .html().

Thanks a lot.

Answer 1

You can use firebug for firefox to debug ajax/javascript. When I click on a date there are multiple ajax calls. I think its happening because you have the js click handler inside dates_content.php which gets loaded every time you click right/left arrow. So your dates have multiple click handlers associated with it.

$("#day_list li").live("click", function() {
$(".selected").removeClass("selected");
var day = $(this).attr('value');
$(this).addClass('selected');
$.ajax({
type: "POST",
url: "/planner/change_detail",
data: { day: day, month: current_month, year: current_year },
success: function(data)
{
$("#detail_content").html(data);
}
})
});

I am talking about the above code you have