Question

I am having hardtime figuring out what’s wrong with load() function in the below code.
What this code basically does is take a date(named as tabledate in the form) from user through a form( whose id is caltag) and gives a table with all events of that day. But whatever date I give through the form, I always get todays schedule. I am not sure even if jquery part is being executed fully because
submit button is even being disabled as the code says. Moreover, I dont know how to debug js programs.
Have been stuck for hours on this. Any suggestions would be of great help.

$("#caltag").submit(
                function(e){
                    $("#caltag").attr('action', '/table/fetch/');
                    e.preventDefault();
                    $("submit").attr('disabled',true);
                    var calform=$("#caltag");
                    var values = $("#caltag").serializeArray();
                    $("#table").load(
                        $("#caltag").attr('action') + "#table", 
                        values, 
                        function() {
                            $("#table").hide().fadeIn(1000);
                            $("#getdate").attr('disabled', false);
                        });});

view part of the

def table(request):  #     '/table/fetch/' requests of this view
events=[['_'] * 5 for row in range(5)]
if request.method=='POST':
    datestring=request.POST['tabledate']
    date=datetime.strptime(datestring,'%m/%d/%Y').strftime('%Y-%m-%d')
else:
    date=datetime.today()
eventset=Location.objects.filter(eventdate=date)
for event in eventset:
    events[event.x][event.y]=event
return render(request, 'scheduler/table.html',{'events':events,'tabdate':date})

html form for the same.

<div id="cal" class="span-10">
                <form method='POST' id='caltag' action="/table/fetch/">
                    <p>
                        <label for="datepicker">tabledate:</label>
                        <input type="text" id="datepicker" name="tabledate" />
                    </p>
                    <input type='submit' id="getdate">
                </form>
            </div>

Answer 1

Why do you append the string “#table” to the url?

$("#caltag").attr('action'), 

Does var values = $("#caltag").serializeArray(); show valid data? try a console.log(values); on the line below to make sure valid data is generated

Make sure to check the the actual request that is made to make sure the right parameters are sent and the right content is received.

Why don’t you just send the value of #datepicker? var values = { 'date': $("#datepicker").val() };