Ajax is loading entire page instead of pertinent data

Question

I am using ExpressionEngine (2.4) with the Solspace Calendar add-on. I have been following the tutorials here for reference:

• Part 1: http://themetaq.com/mobile/articles/ajax-ee-sort-and-order-data-with-expressionengine-and-ajax-part-one

• Part 2: http://themetaq.com/articles/ajax-ee-sort-and-order-data-with-expressionengine-and-ajax-part-two

I am using a template with a regular 'index' page (where the JS and HTML is) and an 'ajaxlist' template in the same group that contains the solspace:cal stuff.

JS:

$(document).ready( function() {
  var sortTable = $('#sort-table tbody'),
      trigger   = $('.trigger');
  trigger.click( function() {
    var ajaxTarget  = '<template name>/ajaxlist/' + $(this).attr('data-orderby') + '/';
    sortTable.load(ajaxTarget);
    return false;
  });
});

index:

<a href="{path='<template name>/ajaxlist/test'}" class="trigger" data-orderby="test">Test</a>

<table id="sort-table">
  {embed="<template name>/ajaxlist"}
</table>

ajaxlist

<tbody>
{if segment_3 == 'test'}
{exp:calendar:cal first_day_of_week="{current_time format="%w"}" date_range_start="today"}
    {display_each_day}
        {events}
            {event_title}
        {/events}
    {/display_each_day}
{/exp:calendar:cal}
{/if}
</tbody>

please note that the ajaxlist code (without the js to load via ajax) redirects to the url appropriately and loads the data just fine.

PROBLEM

When we add the JS it runs but instead of returning the stuff inside 'ajaxlist' it returns the entire web page again inside the <tbody>! (Nesting the page within itself :p). I really don't know why and would like some help one what steps to take to remedy this to use in conjunction with ajax or with EE.

A coworker of mine suggested that the 'test' variable isn't working because we don't have (and rightly shouldn't have) anything named 'test'. I'm really confused at this point.

Thanks

EDIT 1:

I should note that even when removing the 'test' element from all of the code and just used <template name>/ajaxlist it still returns the entire page.

Answer 1

By "entire web page" do you mean it loads the current page instead of the fragment template content?

Try debugging the ajax call to make sure you're loading the right URL. I bet this is the issue. Most likely you need a leading slash added to the ajaxTarget. Assuming you are removing index.php from your URLs the path to your partial should be "/template_group_name_here/ajaxlist/" instead of "template_group_name_here/ajaxlist/"

To debug, add console.log(ajaxTarget); and see what value output in the web inspector console.

$(document).ready( function() {
  var sortTable = $('#sort-table tbody'),
      trigger   = $('.trigger');
  trigger.click( function() {
    var ajaxTarget  = '<template name>/ajaxlist/' + $(this).attr('data-orderby') + '/';
    console.log(ajaxTarget); // <----- **ADD THIS TO DEBUG**
    sortTable.load(ajaxTarget);
    return false;
  });
});

Alternatively, you could just keep an eye on the "Network" tab in the web inspector and see what URL is being requested by AJAX.

Answer 2

What you are describing is expected behaviour.

If you want to load only a part of the loaded page, specify what container you want loaded like so:

sortTable.load(ajaxTarget + " #container");

This is also described in the jQuery docs about the .load() function

Answer 3

So i figured it out with the help of @Alex Kendrick and @megatrond and combining their suggestions together.

I really don't know what it was. I incorporated the following items to get ther:

• preceding forward slashes
• sortTable.load(ajaxTarget + " #sort-table");
• moved the table into the ajaxlist template
• adding the td and tr elements

Here's the final code:

JS

$(document).ready( function() {

    var sortTable = $('#sort-table tbody'),
            trigger     = $('.trigger');

    trigger.click( function() {

            var ajaxTarget  = '/<template name>/ajaxlist/' + $(this).attr('data-orderby');
            sortTable.load(ajaxTarget + " #sort-table");
            return false;
    });

});

index

<a href="{path='/<template name>/ajaxlist/test/'}" class="trigger" data-orderby="test">Test</a>

{embed="<template name>/ajaxlist"}

ajaxlist

<table id="sort-table">
<tbody id="sort-table-body">

    {if segment_3 == 'test'}
    {exp:calendar:cal first_day_of_week="{current_time format="%w"}" date_range_start="today"}

        {display_each_day}
        <tr>
            {events}
                <td>
                    {event_title}
                </td>
            {/events}
        </tr>
        {/display_each_day}

    {/exp:calendar:cal}

    {/if}
</tbody>
</table>

Thank you both again for you help today.