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
– nav_jan, Commented Jun 18, 2013 at 14:28

Community · Accepted Answer · 2017-05-23 12:21:34Z

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, 2017 at 12:21

CommunityBot

11 silver badge

answered Jun 18, 2013 at 14:17

Mohammad Areeb Siddiqui

10.2k16 gold badges74 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nav_jan Over a year ago

how stackoverflow.com/questions/3592270/… solves my problem kindly elaborate. Thanks!

Mohammad Areeb Siddiqui Over a year ago

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.

nav_jan Over a year ago

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.

Alexander Kludt · Accepted Answer · 2013-06-18 14:13:47Z

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, 2013 at 14:13

Alexander Kludt

8636 silver badges17 bronze badges

Collectives™ on Stack Overflow

Displaying div from other html file on button click

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related