I am using jQuery pjax in my project. I'm trying to load a fragment of a page into an area of my page. So far I have the following code:
HTML from the page I am loading with pjax
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Builder1</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css" />
<link href="/css/builder.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- I want to pjax this fragment into my current page -->
<div id="root">
<div id="start">
<form id="createPage">
<label>
Enter a name for your page
<input id="pageName" type="text" value="" placeholder="Page name" />
</label>
</form>
</div>
</div>
<!-- I want to pjax this fragment into my current page -->
<script data-main="js/main" src="js/plugins/require.js"></script>
</body>
</html>
The format of the page I'm loading into is the same as above.
JS pjax
$( document ).on( 'submit', '#createPage', function( event ) {
event.preventDefault();
// Some vars and other DB stuff here (removed for brevity)
// Insert name into collection 'projects'
pageCollection.insert({
project: activeProject,
name: pageTitle,
active: true
}, function( result ) {
if( result.inserted.length ) {
$.pjax({
url: 'page-builder.html',
container: '#root',
fragment: '#root'
});
} else {
console.log('Error on page insertion');
}
});
// Save Projects Database
pageCollection.save();
});
The pjax call is triggered after a successful call to the database.
What I want to do is ajax in the #root div from my target page and insert into the #root div on my current page. Whats actually happening is I'm loading the entire page even though I've specified a container and fragment.
Can anyone help point me in the right direction?
