jQuery replaceWith

Ryan.King1809 · 11-13-2011, 11:57 PM

I've set up two buttons to dynamically load in content. However for some reason the content only loads on the first time you click a button. The transition function does receive the correct variables however. The fade0ut animation also doesn't take affect whilst the replaceWith() function is inside the transition function. Can you help me out?

HTML:

Code:

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Javascript Transition Test</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
    </head>

	<body>
    	<div id="navbar">
        	<button name="Page1">Page1</button><button name="Page2">Page2</button>
        </div>
		<div id="content">
        	<p>This is the content for the first page.</p>
		</div>
        <script src="script.js"></script>
	</body>
</html>

Javascript:

Code:

var page1 = "<p>This is the content for the first page.</p>";
var page2 = "<p>This is the content for the second page.</p>";

$("button[name=\"Page1\"]").click(function () {
	transition(page1);
});

$("button[name=\"Page2\"]").click(function () {
	transition(page2);
});

function transition(newPage) {
	$("#content").fadeOut(1000, $("#content").replaceWith(newPage));
	$("#content").fadeIn(1000);
};

webdev1958 · 11-14-2011, 05:16 AM

I posted a solution in your thread at sitepoint.

Ryan.King1809 · 11-14-2011, 05:38 AM

jquery solution

Code:

var page1 = "<div id=\"content\" style=\"display: none;\"><p>This is the content for the first page.</p></div>";
var page2 = "<div id=\"content\" style=\"display: none;\"><p>This is the content for the second page.</p></div>";

$("button[name=\"Page1\"]").click(function () {
	transition(page1);
});

$("button[name=\"Page2\"]").click(function () {
	transition(page2);
});

function transition(newPage) {
	$("#content").fadeOut(1000, function () {
		$("#content").replaceWith(newPage)
		$("#content").fadeIn(1000);
	});
	
};