Load div inside child page based on button click on parent page

Question

Here is a trimmed down example of what I am trying to accomplish. I have two pages the parent page (index.html) and the child page (child.html). The child page has multiple children html pages which are dynamically loaded using jQuery inside child page div container based on button click on child.html page, which works fine but what I need to do is to load the children pages in child.html based on parent button clicks in index.html. Can anyone solve this?

index.html

<body>
    <div class="container-fluid">
        <div class="row">
            <ul>
                <h1>Main Nav</h1>
                <!--When this button is clicked, it opens child.html in a new tab and must load pageone.html inside the #shared-page div of child.html page and the corresponding <li> item in child.html page should be active--> 
                <li><a href="child/child.html" class="share-one" target="_blank">Page One</a></li>
                <!--When this button is clicked, it opens child.html in a new tab and must load pagetwo.html inside the #shared-page div of child.html page and the corresponding <li> item in child.html page should be active -->
                <li><a href="child/child.html" class="share-one" target="_blank">Page Two</a></li>
            </ul>
        </div>
    </div>
</body>

child.html

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                <ul>
                    <h1>Left Nav</h1>
                    <li><button class="share-one" type="button">Page One</button></li>
                    <li><button class="share-two" type="button">Page Two</button></li>
                </ul>
            </div>
            <div class="col-md-9">
                <div id="shared-page"></div>
            </div>
        </div>
    </div>
</body>

jQuery to load shared pages dynamically

$(document).ready(function(){
    $(".share-one").on("click",function(){
        $("#shared-page").load("https://www.hostnanny.tk/test/shared/shareone.html");
    });

    $(".share-two").on("click",function(){
        $("#shared-page").load("https://www.hostnanny.tk/test/shared/sharetwo.html");
    });
});

Have you tried using iframes, or do you want to do something that doesn't allow iframes. See how they work from [here](https://www.w3schools.com/html/html_iframe.asp) — AntonyMN, Jun 08 '18 at 10:34
I don't want to use iframes. Need to achieve this jQuery way. Moreover, iframes will not solve my problem because I need the shared html page to load into the child html page based on the button click on the parent page. With iframes I cannot load nested pages — wibwaj, Jun 08 '18 at 10:35
@AntonyMN I don't see how append will solve my problem. Can you illustrate? — wibwaj, Jun 08 '18 at 10:44
where do you put the js ? on separate js file or in the html file? — Elyas Esna, Jun 08 '18 at 10:45
You can add query strings to the url then get them when the page loads to determine what has to load on the 2nd page.. https://stackoverflow.com/questions/4656843/jquery-get-querystring-from-url — Hastig Zusammenstellen, Jun 08 '18 at 11:14
@HastigZusammenstellen my problem is different. The html page should load on a different page than the one with the click event — wibwaj, Jun 08 '18 at 13:32
@wibwaj the click event is on index.html. the click event determines what was clicked and adjusts the url to reflect that. When the 2nd page (child.html) is loaded, the js gets the current url, gets the query from that and determines what loads. If query is `..html?share-one` the js loads the share-one code else loads share-two. — Hastig Zusammenstellen, Jun 08 '18 at 14:48
@wibwaj I meant to give you a full answer but I was busy the evening you asked and forgot about it, but you got it. Nice work :) — Hastig Zusammenstellen, Jun 13 '18 at 06:06
@HastigZusammenstellen thanks! Do I need to post the answer here and close the question or soemthing? — wibwaj, Jun 14 '18 at 07:00
@wibwaj Yea, you can post it and accept it so it can help others in the future. — Hastig Zusammenstellen, Jun 14 '18 at 07:07

Load div inside child page based on button click on parent page

0 Answers0