Involver Developer Network : Chapter 7 - Advanced Partials & Ajax Links

This page last changed on Apr 16, 2012 by jed.wheeler@involver.com.

In This Chapter

Nesting Partials
Intro to complex Multi-page tabs

In Chapter 6 we looked at using Partials to pass custom variables from an ajax link but that’s just the beginning of what they can do. Not all SML projects are simple single-page affairs, often clients will ask for tabs with multiple pages and sub-pages. We can create that user experience by using partials to dynamically load and replace content.

This model tab will use the rss_feed we created in chapters 2 and 3, the signup_form from chapters 4 and 5, and the you_tube_feed from chapter 6. It will also have a simple landing page whose content will be set using editable_html, making it editable by the client. Each of those items will be displayed on its own “page”, created using partials.

Let’s start by building a basic wireframe for our page layout.

{% partial name:"landing_page" %}
    {% editable_html name:"welcome_text" %}
{% endpartial %}

{% partial name:"rss" %}
    <!-- rss feed exercise goes here -->
{% endpartial %}

{% partial name:"youtube" %}
    <!-- youtube exercise goes here -->
{% endpartial %}

{% partial name:"signup" %}
    <!-- signup form exercise goes here -->
{% endpartial %}

<div class="topmenu">
    <ul>
        <li>{% ajax_link partial:"landing_page" container:"content_box" %}Welcome{% endajax_link %}</li>
        <li>{% ajax_link partial:"rss" container:"content_box" %}Latest News{% endajax_link %}</li>
        <li>{% ajax_link partial:"youtube" container:"content_box" %}Videos{% endajax_link %}</li>
        <li>{% ajax_link partial:"signup" container:"content_box" %}Sweepstakes{% endajax_link %}</li>
    </ul>
</div>

<div id="content_box">
    {% render partial:"landing_page" %}
</div>

Now that we’ve tested that out let’s go ahead and copy the individual pages in from our previous exercises.

Embedding ajax-sorted Content into for loops

While we’re in the code, let’s add a bit of extra functionality to the older exercises. We’ll start with the RSS page

Start with:

{% partial name:"rss" %}
    {% rss_feed name:"my_feed" %}
        <h2>Latest deals from <a href="{{ rss_feed.url }}">DealNews.com Daily Feed</a></h2>

        {% for source in rss_feed.sources %}
            <h3>{{ source.title }}</h3>

            {% paginate source.feed_items per_page:3 %}
                {% for item in feed_items %}
                    <div>
                        <h4><a href="{{ feed_item.origin_url }}">{{ item.title}}</a></h4>
                        <p>{{ item.summary_text_body | strip_html | truncate: 140 }}</p>
                    </div>

                    {% facebook_like item send:true%}
                {% endfor %}

                {{ pagination_links }}
            {% endpaginate %}
        {% endfor %}
    {% endrss_feed %}
{% endpartial %}

Let's abstract the entry galleries into a partial so we can dynamically re-sort the entries with our ajax links. In order to do that we’ll need to convert the destination div id into variables - notice how the capture scopes to the for loop that contains it so its value is re-written dynamically for each iteration in the loop. Also notice the source:source variable set we’re inserting in the partial through our render and ajax_links. We need that in place in order to pass in the set of items which the partial will be iterating through, without it the content items will not display.

{% partial name:"rss" %}
    {% rss_feed name:"my_feed"%}
        <h2>Latest deals from <a href="{{ rss_feed.url }}">DealNews.com Daily Feed</a></h2>

        {% partial name:"current_blog" %}
            {% paginate source.feed_items order:order_by per_page:3 %}
                {% for item in feed_items %}
                    <div>
                        <h4><a href="{{ feed_item.origin_url }}">{{ item.title}}</a></h4>
                        <p>{{ item.summary_text_body | strip_html | truncate: 140 }}</p>
                    </div>

                    {% facebook_like item send:true%}
                {% endfor %}

                {{ pagination_links }}
            {% endpaginate %}
        {% endpartial %}

        {% for source in rss_feed.sources %}
            {% capture blog_display %}blog_display{{source.id}}{% endcapture %}

            <h3>{{ source.title }}</h3>

            <div class="menu">
                {% ajax_link partial:"current_blog" order_by:"created_at DESC" container:blog_display source:source %}Newest{% endajax_link %}
                {% ajax_link partial:"current_blog" order_by:"created_at ASC" container:blog_display source:source %}Oldest{% endajax_link %}
                {% ajax_link partial:"current_blog" order_by:"fb_like_count DESC" container:blog_display source:source %}Favorites{% endajax_link %}
            </div>

            <div id="{{ blog_display }}">
                {% render partial:"current_blog" order_by:"created_at DESC" source:source %}
            </div>
        {% endfor %}
    {% endrss_feed %}
{% endpartial %}

{% render partial:"rss" %}