bigskysoftware/intercooler-js

Set history and new URL after ic-get-from?

BoPeng opened this issue ยท 3 comments

I have multiple pages sharing the same navigation menu, set up as follows:

  1. A jinja2 based template user_base.html that loads the correct sub-panel using variable panel. Users can expand this page from URLs /users_update, /users_emails etc.
        <nav class="menu position-relative" ic-target='#sub-panel'>
        <a class="menu-item" ic-get-from="{{ url("users:update") }}"></i>Profile</a>
        <a class="menu-item" ic-get-from="{{ url("users:emails") }}">Emails</a>
       </nav>
        <div id="sub-panel">
            {% include("users/user_" + panel + ".html") %}
        </div>

The jinja2 part does not matter because this is equivalent to multiple full pages with the same set of navigation menu. As you can imagine, this is converted from an old-style menu with

<a class="menu-item" href="{{ url("users:update") }}"></i>Profile</a>

where url("users:update") contained complete pages.

  1. When ic-get-from is triggered, intercooler.js would load only the included page and replace the content in #sub-panel.

This layout works well but there are two problems:

  1. When I enter the page through /users_email and AJAX to /users_profile, the address bar stays at /users_email, and /users_email will be loaded if the user refresh the page. How can I set the URL to /user_email after ic-get-from?

  2. When I go to /users_email from /users_profile, the history is not recorded and back button will not go to /users_email. I understand that there are examples for ic-history-elt and ic-push-url="true" but I cannot figure out where I should put these meta data. Neither nav nor #sub-panel works.

Thanks,

@BoPeng On issue 1. - i think you're looking for http://intercoolerjs.org/attributes/ic-push-url.html (set ic-push-url="true"). After that, your second issue should be resolved too, since ic-push-url will auto-push URL to history.

Your links will be looking somewhat like:

<nav class="menu position-relative" ic-target='#sub-panel'>
        <a class="menu-item" ic-get-from="{{ url("users:update") }}" ic-push-url="true">Profile</a>
        <a class="menu-item" ic-get-from="{{ url("users:emails") }}" ic-push-url="true">Emails</a>
</nav>
1cg commented

Yep @scsmash3r is right. You should be able to move the ic-push-url="true" up to the nav element, as it is inherited.

If that isn't working let me know and I'll try to troubleshoot.

Thank you both! Putting ic-push-url in nav works like magic and it even knows what url to put there.

I love intercooler.js.