Looking for recommendations for a jQuery plugin or JavaScript solution that allows me to load a full "view" into a <div> when a user clicks on a link.
The challenge I'm facing is that I have 8 pages, with the Homepage consisting of 3 divisions: a header, a picture, and a footer. I want to load the view into the second division. Despite my efforts in searching Google, I haven't found a stable solution yet.
Thanks in advance!
I've attempted the following code, but it's not functioning as expected:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("http://localhost:56708/Home/Books");
});
</script>
</head>
<body>
<div id="mainDiv">
<div id="headerDiv">
@Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
@Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
</body>
This snippet is taken from my HomePage where I render the Header (Partial view) into the first division. When clicking on a link within the Header, the book view should appear in the middle division, however, it's currently not loading. Any suggestions?