change div content using javascript and php

Question

I'm trying to replace a the following div with a similar div in a file called file.php when clicked. the div tag is..

<div  style="display: none;" id="extra" class="container2" xml:id="page">
		<div class="title">
			<h2>Stuff to check out</h2>
			<span class="byline">gotta gets that money</span> </div>
		<div id="three-column">
			<div class="boxA">
				<div class="box"> <span class="fa fa-cloud-download"></span>
					<p>Praesent pellentesque facilisis elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p>
				</div>
			</div>
			<div class="boxB">
				<div class="box"> <span class="fa fa-cogs"></span>
					<p>Etiam neque. Vivamus consequat lorem at nisl. Nullam non wisi a sem semper eleifend. Donec mattis.</p>
				</div>
			</div>
			<div class="boxC">
				<div class="box"> <span class="fa fa-user"></span>
					<p> Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus.</p>
				</div>
			</div>
		</div>
		<ul class="actions">
			<li><a id="addContent" href="#" class="button">Close</a></li>
		</ul>
</div>

the JavaScript function is..

$('#addContent').click(function(){
   $("#extra").load("file.php");
   return false;
});

the file.php looks exactly like the above div. can anyone tell me where I'm going wrong. ps, i want to replace the div with multiple file.php files when clicked with a seamless transition. thanks.

@KristianHareland, it looks like he is using jQuery because of the JS snippet. — Tejas
– Tejas, Commented Jul 30, 2015 at 6:10
@KristianHareland OP tagged jQuery and also already used jQuery. — Norlihazmey Ghazali
– Norlihazmey Ghazali, Commented Jul 30, 2015 at 6:11
@NorlihazmeyGhazali, my bad. On mobile device so didnt see tags at once. — MrK
– MrK, Commented Jul 30, 2015 at 6:12

Tejas · Accepted Answer · 2015-07-30 06:14:14Z

2

Your code will not replace the div#addContent, but it will put the similar div inside div#addContent. To replace it with the similar div, put it inside a container and then load your similar div from the PHP file into the container.

SAMPLE

<div id="container">
  <div  style="display: none;" id="extra" class="container2" xml:id="page">
          <div class="title">
              <h2>Stuff to check out</h2>
              <span class="byline">gotta gets that money</span> </div>
          <div id="three-column">
              <div class="boxA">
                  <div class="box"> <span class="fa fa-cloud-download"></span>
                      <p>Praesent pellentesque facilisis elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p>
                  </div>
              </div>
              <div class="boxB">
                  <div class="box"> <span class="fa fa-cogs"></span>
                      <p>Etiam neque. Vivamus consequat lorem at nisl. Nullam non wisi a sem semper eleifend. Donec mattis.</p>
                  </div>
              </div>
              <div class="boxC">
                  <div class="box"> <span class="fa fa-user"></span>
                      <p> Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus.</p>
                  </div>
              </div>
          </div>
          <ul class="actions">
              <li><a id="addContent" href="#" class="button">Close</a></li>
          </ul>
  </div>
</div>

and then,

$('#addContent').click(function(){
   $("#container").load("file.php");
   return false;
});

I hope that was helpful!

answered Jul 30, 2015 at 6:14

Tejas

7113 silver badges12 bronze badges

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

3 Comments

Max Flawes Over a year ago

when clicked on..nothing.

Tejas Over a year ago

Looks like there's something wrong with your PHP file, because it works perfectly according to this fiddle. In the fiddle, I removed the display: none; from your div element as well, which is why it wasn't displaying in the browser.

Max Flawes Over a year ago

the jsfiidle snippet gives me an error as well, Error("jQuery requires a window with a document");return ....

Collectives™ on Stack Overflow

change div content using javascript and php

1 Answer 1

SAMPLE

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

SAMPLE

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related