CODEWITHSUNDEEP
javascriptphpjqueryhtml
Max Flawes
Max Flawes

Reputation: 1

change div content using javascript and php

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.

Upvotes: 0

Views: 1060

Answers (1)

Tejas
Tejas

Reputation: 711

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!

Upvotes: 2

Related Questions