Displaying div from other html file on button click

Question

<!DOCTYPE html>
<body>
    <div id=div1 style="display:block;">
        <p id="intro">Hello World!</p>
        <p>This example demonstrates the <b>getElementById</b> method!</p>
    </div>
    <div id=div2 style="display:none;">
        <p id="intro">Hello World again!</p>
        <p>This example demonstrates the <b>getElementById</b> method!</p>
    </div>
    <button type="button" onclick="func()">Change div</button>
    <script>
        function func() {
            x = document.getElementById("div1");
            x.style.display = "none";
            x1 = document.getElementById("div2");
            x1.style.display = "block";
        }
    </script>
</body>

It basically displays div2 on button click.

This works fine when div2 and div1 are in same file. I want div2 to be in different file and be displayed when we click the button without changing the url.

One way to achieve this is by using iframes and changing the url(in which div2 is there) of iframe on button click.

Is there any other way to achieve this?

I am very new to html and javascript so an explation with answer will help a lot. Thanks!

@algorhythm can it be done only with PHP without using jQuery or AJAX, as other have suggested if yes than a small code on how to achieve that would help. I know some basic php but I am completely unaware of AJAX and jQuery. If this can be done only by using PHP than I would like to take that approach. Thanks! — nav_jan, Jun 18 '13 at 14:28

score 2 · Answer 1 · edited May 23 '17 at 12:21

2

For these type of things that you want to happen dynamically on your page without getting the whole page to load you need to use AJAX.

And this code below may help you understanding some very basic technique of using AJAX thorugh jQuery:

$(document).ready(function(){
    $("button").click(function(){
        alert('Load was performed.');
        $.get('target_file.html', function(data) {
            $('div').html(data);
            alert('Load was performed.');
        });
    });
});

To be more specific, you can find that <div> from your target file like this:

$("div").html(data.find("#div_id"));

One more thing. If you want to use PHP you can see this post here :

php: Get html source code with cURL

edited May 23 '17 at 12:21

Community

1
1

answered Jun 18 '13 at 14:17

Mohammad Areeb Siddiqui

9,795
14
71
113

how http://stackoverflow.com/questions/3592270/php-get-html-source-code-with-curl solves my problem kindly elaborate. Thanks! – nav_jan Jun 18 '13 at 14:58
This tells you how to get a source code of a file and then you would be able to print out that div on the button click. – Mohammad Areeb Siddiqui Jun 18 '13 at 14:59
1

I have to try it out before accepting the answer. I will try to learn about curl. I will try to post the code and then accept your answer but it might take few days. Upvoted it though. Thanks for your guidance. – nav_jan Jun 19 '13 at 06:31

score 0 · Answer 2 · answered Jun 18 '13 at 14:13

0

You need to use AJAX to do so if you do not want to work with iframes. See http://en.wikipedia.org/wiki/Ajax_(programming)

answered Jun 18 '13 at 14:13

Alexander Kludt

854
6
17

Displaying div from other html file on button click

2 Answers2