Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine
TRACK

JavaScript Frameworks & Tools >

COURSE

Symfony UX: Turbo >

CHAPTER

Using a Full HTML Page to Populate a Frame

Buy Access to Course
Next Chapter

Challenge #1 of 2

Q: 

My animal rescue website has a page with very useful contact numbers. And since this info is so useful, I'd like to also show this information at the bottom of every page!

My footer looks like this:

<div id="footer">
  <p>Emergency Contact Numbers:</p>

  <turbo-frame id="contact-numbers" src="{{ path('contact_numbers') }}"></turbo-frame>
</div>

And my contact page has all of its content in the body block.

{% block body %}
    <h1>Useful Contact Numbers</h1>

    <p>Here are some useful contact numbers in case you are in an emergency and
    in need of help!</p>

    <p><strong>Hope for Paws</strong>: +1 310-880-1416</p>

    <p><strong>National Mill Dog Rescue</strong>: +1 719-683-3334</p>

    <p><strong>Catskill Animal Sanctuary</strong>: +1 845-336-8447</p>
{% endblock %}

How can I make turbo load only the contact information into my footer?

a) 
{% block body %}
    <h1>Useful Contact Numbers</h1>

    <p>Here are some useful contact numbers in case you are in an emergency and
    in need of help!</p>

    <turbo-frame id="contact-numbers">
        <p><strong>Hope for Paws</strong>: +1 310-880-1416</p>

        <p><strong>National Mill Dog Rescue</strong>: +1 719-683-3334</p>

        <p><strong>Catskill Animal Sanctuary</strong>: +1 845-336-8447</p>
    </turbo-frame>
{% endblock %}
b) 
{% block body %}
    <turbo-frame id="contact-numbers">
        <h1>Useful Contact Numbers</h1>

        <p>Here are some useful contact numbers in case you are in an emergency and
        in need of help!</p>

        <p><strong>Hope for Paws</strong>: +1 310-880-1416</p>

        <p><strong>National Mill Dog Rescue</strong>: +1 719-683-3334</p>

        <p><strong>Catskill Animal Sanctuary</strong>: +1 845-336-8447</p>
    </turbo-frame>
{% endblock %}
c) 
{% block body %}
    <h1>Useful Contact Numbers</h1>

    <p>Here are some useful contact numbers in case you are in an emergency and
    in need of help!</p>

    <turbo-frame src="{{ path('contact_numbers') }}">
        <p><strong>Hope for Paws</strong>: +1 310-880-1416</p>

        <p><strong>National Mill Dog Rescue</strong>: +1 719-683-3334</p>

        <p><strong>Catskill Animal Sanctuary</strong>: +1 845-336-8447</p>
    </turbo-frame>
{% endblock %}
d) 
{% block body %}
    <h1>Useful Contact Numbers</h1>

    <p>Here are some useful contact numbers in case you are in an emergency and
    in need of help!</p>

    <turbo-frame>
        <p><strong>Hope for Paws</strong>: +1 310-880-1416</p>

        <p><strong>National Mill Dog Rescue</strong>: +1 719-683-3334</p>

        <p><strong>Catskill Animal Sanctuary</strong>: +1 845-336-8447</p>
    </turbo-frame>
{% endblock %}
Rewatch Video
userVoice