1

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

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.

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.

| improve this answer | |
  • Yeah I mean the current page in the place of where the fragment should appear. After adding the '/' to the beginning of the URL string it fails to load anything. Even if I remove the {if segment_3 == 'test'} conditional it still fails to load it. – adamellsworth Sep 18 '13 at 17:41
  • I think most likely you are just providing an incorrect path for ajaxTarget then. – Alex Kendrick Sep 18 '13 at 17:42
  • I removed the /test variables again and made it <template name>/ajaxlist (which are both valid templates in the same group) and the console returns back the url in the correct format. – adamellsworth Sep 18 '13 at 17:47
  • I suggest you hardcode the path you want to load by ajax, making sure it's valid and loads the exact content you want when loaded directly in your browser. Then build back up from there. – Alex Kendrick Sep 18 '13 at 17:59
  • That was the first step actually and it redirects to the <template name>/ajaxlist and returns the data correctly. Thank you very much by the way for all of your suggestions and your time today. – adamellsworth Sep 18 '13 at 18:20
1

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

| improve this answer | |
  • True, but in this case it should work with the default of full page because he does want the whole page (the whole fragment page generated by the ajaxlist template). – Alex Kendrick Sep 18 '13 at 17:48
  • Oh, then I misunderstood what he meant by "entire web page". – megatrond Sep 18 '13 at 17:53
  • After testing this on both the <table> and <tbody> as containers it still failed to load. The page itself didn't load (which is a step in the right direction) but the fragment failed to load. here are the one's i tried: sortTable.load(ajaxTarget + " #sort-table"); sortTable.load(ajaxTarget + " #sort-table-body"); sortTable.load(ajaxTarget + " #sort-table tbody"); sortTable.load(ajaxTarget + " tbody"); The last one is clearly part of the DOM but i thought i'd try it anyway. – adamellsworth Sep 18 '13 at 17:57
  • Try adding an id to the tbody in ajaxlist, and add that to the load() function. I'm not even sure I got your question right though, so this might be an entirely futile exercise :/ EDIT: Or maybe move the <table id="sort-table">...</table> into ajaxlist – megatrond Sep 18 '13 at 18:02
1

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.