[SOLVED] How to include <div> from different file html in the same pages?

Questions
1

Hi.
I’ve a lot

<div>

in common with different pages in my app. What I’m trying to do is like an

 php  include("");

inside my page.html I’d like to include different div in the same windows from different html files: pages1.html, page2.html …

my pages.html

<div data-name="pages" class="page">    
<div class="page-content pg-no-padding">
<div class="row justify-content-center">
    <div class="col-100 tablet-100 desktop-80">
        <div class="block">
        <form class="list" id="pages">

            <div class="row justify-content-center">
                <div class="block-title">
                    <h1> Pages</h1>
                </div> <!--block-title-->
            </div><!--row-->

            <div class="row">
                <div class="col">
                    <div class="block-title">
                        <h2> Card 1</h2>
                    </div> 

                    <div class="card">
                        <div class="card-content card-content-padding"> 
                        <div class="row">
                            <div class="col-100 tablet-auto desktop-auto">
                                <div class="list no-hairlines-md">
                                <ul>
                                    <li class="item-content item-input">
                                        <div class="item-inner">
                                            <div class="item-title item-label">Input1</div>
                                            <div class="item-input-wrap">
                                                <input type="number" placeholder="" name="">
                                                <span class="input-clear-button"></span>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="item-content item-input">
                                        <div class="item-inner">
                                            <div class="item-title item-label">Input2</div>
                                            <div class="item-input-wrap">
                                                <input type="number" placeholder="" name="">
                                                <span class="input-clear-button"></span>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                </div>
                            </div><!--col-->
                        </div><!--row-->
                        </div><!--card-content-->
                    </div><!--card-->                               
                </div><!--col-->
            </div><!--row-->


            Here I'd like to include the code inside pages1.html

            Here I'd like to include the code inside pages2.html


        </form> 
        </div><!--block-->


        <div class="block">
        <a class="col button button-fill" href="#">Save</a>
        </div>

    </div><!--col-100-->        
</div><!--row-->

my pages1.html

<div class="row">
                <div class="col">
                    <div class="block-title">
                        <h2> Card2</h2>
                    </div> 

                    <div class="card">
                        <div class="card-content card-content-padding"> 
                        <div class="row">
                            <div class="col-100 tablet-auto desktop-auto">
                                <div class="list no-hairlines-md">
                                <ul>
                                    <li class="item-content item-input">
                                        <div class="item-inner">
                                            <div class="item-title item-label">Input1</div>
                                            <div class="item-input-wrap">
                                                <input type="number" placeholder="" name="">
                                                <span class="input-clear-button"></span>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="item-content item-input">
                                        <div class="item-inner">
                                            <div class="item-title item-label">Input2</div>
                                            <div class="item-input-wrap">
                                                <input type="number" placeholder="" name="">
                                                <span class="input-clear-button"></span>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                </div>
                            </div><!--col-->
                        </div><!--row-->
                        </div><!--card-content-->
                    </div><!--card-->                               
                </div><!--col-->
            </div><!--row-->

thank you for your help

2

In HTML there is no such thing as PHP includes. If you use Template7/Router Component pages, you may save content of the required block to some variable and then output in template

1 Like
3

Can you give me an example with Router component pages?

4

Hey, files with a .htm or .html extension cannot run PHP in them. I use PHP but it’s better to use it as an externa API… You could host your files on a server somewhere and just make a request for data.

Please take some time off and run through framework7 components, by the time you finish, you will have the whole understanding of what you need to do…

Also, dowload the kitchen sink files from github and take a look at different component pages to get the whole thing at a broader extent…