partial page update with navigation

First of all, I apologize because this is my first time trying to code a website (or anything), so this might be a stupid question. I have a web page where I would like to update only a single div when a link in the navigation bar is clicked.

<body> <div id="wrapper"> <header id="header"> </header> <section id="section1"> <div> </div> <nav id="mainnav"> <ul> <li> <a href="1.html"><b>1</b></a> </li> <li> <a href="2.html"><b>2</b></a> </li> <li> <a href="3.html"><b>3</b></a> </li> </ul> </nav> </section> <section id="section2"> <div id="mainwrap"> <div id="main"> </div> </div> </section> </div> </body> </html>

I know, it's a lot of useless stuff, but you get the point. What I'm trying to do is as you click on 1, 2, 3, etc., only the content of the div "mainwrap" changes, as does the URL (so the page does not refresh, but the URL changes from www.website/1.html to website/2.html, etc. and the content of the one div changes). I have different HTML files for 1, 2, and 3, each with different "main" divs, which ideally will be inserted into the "mainwrap."

I've tried following along with tutorials like https://css-tricks.com/rethinking-dynamic-page-replacing-content/ and other stackoverflow posts like how to do partial page update with jquery. That second one seems like what I want to do, but when I try to implement it, it still doesn't work. Is there a simple fix that I am just missing because I don't know much about coding? (Also, I'm using Dreamweaver. I don't know if that makes a difference.)

Thanks!

-------------Problems Reply------------

You are right how to do partial page update with jquery is exactly what you need. I assume you are new to jquery stuff so here is the complete markup http://jsfiddle.net/yrbvnayy/ that will get your job done!

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="edit-Type" edit="text/html; charset=utf-8" />

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

</head>
<body>
<div id="wrapper">
<header id="header">
</header>
<section id="section1">
<div>
</div>
<nav id="mainnav">
<ul>
<li>
<a href="1.html"><b>1</b></a>
</li>
<li>
<a href="2.html"><b>2</b></a>
</li>
<li>
<a href="3.html"><b>3</b></a>
</li>
</ul>
</nav>
</section>
<section id="section2">
<div id="mainwrap">
<div id="main">
</div>
</div>
</section>
</div>

<script type="text/javascript">
$("#mainnav li a").click(function(e) {
// prevent from going to the page
e.preventDefault();

// get the href
var href = $(this).attr("href");
$("#main").load(href, function() {
// do something after content has been loaded
});
});
</script>

</body>
</html>

I am using the same reference for jquery ajax to explain the answer. how to do partial page update with jquery

In your case I will apply the above usage as

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$('#mainnav a').click(function(e){
//either use e.preventDefault() to stop the default event or return false
var loc=$(this).attr('href');
$('#mainwrap').load(loc);
//This should load the html content to your div
});
</script>

EDIT

An alternative if you just want the div of the HTML pages you are pointing. <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(document).ready(function(){ $('#mainnav a').click(function(e){ //either use e.preventDefault() to stop the default event or return false e.preventDefault() var loc=$(this).attr('href'); $.ajax({ url:loc, type:'GET', //can be GET or POST depending on your requirement success: function(data,textstatus,xhr) { var div=$(data).find('#main'); $('#mainwrap').html(div); }, error:function(xhr,status,error) { alert('Error - '+xhr.responseText); } }); //This should load the html content to your div }); </script>

Fore more ajax related documentation you can go through http://api.jquery.com/jquery.ajax/

The example you cite is using php, which can do what you want.

Category:javascript Views:1 Time:2018-11-08

Related post

  • how to do partial page update with jquery 2010-10-23

    I have navigation menu when clicked only a content div in the page should be updated from html contect files that in the server withouod doing a full page refresh, how can i achieve this using jquery? --------------Solutions------------- Build your m

  • ASP.NET partial page update with GET parameters 2010-06-03

    I have a ASP text box which is acting as a search box. I have set AutoPostBack="True" and a server side ontextchanged event. The text box is in an update panel to avoid a full page postback. Currently the server event is fired when the text changes,

  • asp.net mvc partial page update vs. asp.net aspx partial page update 2011-04-17

    I have some questions: I tried out asp.net mvc and have jquery ajax [http get] to retrieve partial mvc views , which will be used in partial page update. I wonder this is a acceptable approach to do partial page update. Now I am working with a asp.ne

  • Partial page rendering with Primefaces - JSF 2.0 navigation 2011-04-27

    I am trying to create a facelet page which updates <ui:insert> elements with ajax calls. Whenever a <p:commandButton action="next"/> is clicked ajax call should take place and only <ui:insert> parts of the facelet template should be

  • How do I temporarily convert an ASP.NET Ajax form to not use partial page updates? 2009-06-30

    I need the ability to temporarily turn off the partial page update behavior for an ASP.NET Ajax / UpdatePanel based page. (The reason is to circumvent the issue where IE blocks "automatic file downloads" for downloads generated as a result of this po

  • UpdatePanel doesn't do partial-page update, and IsInAsyncPostBack is always false 2010-02-08

    I'm attempting to use an UpdatePanel, but can't get partial-page updates to work. When I look at the ScriptManager's IsInAsyncPostBack property, it's always false. Here's a page that reproduces the issue. It has a ScriptManager, an UpdatePanel, a Lin

  • AJAX Partial page update problem when displaying a control 2010-03-08

    I have an interesting problem when using partial page update in asp.net with scriptmanager and a update panel. My scenario looks like this: I'm using the tab control from the ajax toolkit. I also implemented this control using lazy loading, so that w

  • Asychronous page update with ASP.NET MVC 2010-03-14

    I'm learning ASP.NET MVC 1.0 and need to implement an asynchronous/dynamic page update. I'm new to MVC and jQuery so I'm not sure what to look for. What I want to do is to allow a user to start a monitoring a domain layer function (similar to a news

  • Partial Page update using jQuery to show image and delete images on confirmation 2011-11-03

    I want to partially update page when i upload or delete the image. What i want is that when ever i browse.. to upload images i should automatically be able to refresh the images section after image upload is complete and also refresh the image sectio

  • jQuery - Print element bacground css is not override after partial page update 2011-11-17

    I am using the jquery printElement plugin to print a div of my view. Currently it works fine, but the override css seems doesn't work if I update the div html with a partial view. My html construct: <div id="shopfoods"> <div id="shoplistcont

  • Partial page rendering with ASP.NET WebPages (Razor) 2011-11-26

    I'm trying to update only content pages using WebPages and not MVC. I'm new to using Razor. Is there a new updated method partial page rendering with Razor or will the following work? <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <Conte

  • asp.net mvc jquery Ajax partial page update issue 2012-02-08

    I am having a problem of a partial page update on Asp.net mvc 3 razor that I cannot get through I have this _LogOn partial view which has 2 text boxes Email and Password and a button connexion for login purpose: @using (Html.BeginForm()) { @Html.Vali

  • Asp.net field validator not firing after partial page update 2011-06-13

    I have TextBox, RequiredFieldValidator and a Button inside the Asp.net UpdatePanel. Initially the the Enabled property of the RequiredFieldValidator is set to false so that on the click of Button inside the UpdatePanel the validation does not fire fo

  • partial ajax update with back button 2011-12-19

    I'm doing partial update to the page with Ajax which is a shopping cart that updates with Ajax as users add items to it. The problem is that if users move to checkout and then hit the back button the shopping cart looks empty as it was updated with A

  • MVC partial page update 2010-03-26

    I have an MVC project where I have a form with fields a user can enter and save. On that same page I have a table which shows a brief listing of information that the user just saved. The problem I am having is trying to update only the table after a

  • partial page update without using partial views in ASP.NET MVC3 2012-02-01

    I would like to know if it is possible to update a section of the view asynchronously without moving that section into a partial view, in ASP.NET MVC 3.0. In webforms model, I can have all the mark-up in just one page, but I can still update a sectio

  • How to mix AJAXy page updates with the Back button so that the updates are still there when the user returns? 2012-03-19

    I have a page that the user can modify. All modifications are performed using JQuery, and also sent to the server, so that a full reload will produce the modified page too. This works fine in Firefox 11 / Chrome on Windows: even if the user navigates

  • Partial Record Updates with Linq to SQL and MVC 2009-09-08

    Let's say I have a DB table with columns A and B and I've used the Visual Studio designer to create a Linq objects for this table. All fields are marked NOT NULL. Now I'm trying to edit this record using typical MVC form editing and model binding, bu

  • jQuery plugin for page transitions with navigation history 2012-02-12

    I've been looking for quite a while now. I guess it's time to ask you guys. What i want to achieve is a web navigation system with smooth jquery slide in/out animations. I want to load a page with Ajax, specify its origin (top, bottom, right, left) a

  • Partial page return with MVC 2009-05-30

    I am pretty new to MVC and hope that I am approaching this the correct way. Any input or advice would be great. I would like to have a thumbnail view of an image load normally and when a user clicks on the image, the dynamic picture loads using the c

  • update page templates with new site columns in MOSS publishing site 2009-11-03

    I have created a feature, a publishing site, in Visual Studio to MOSS - this feature contains a masterpage, some pages, some site columns (grouped to match each page) etc. I have also created a site collection, some sites and pages based on my templa

  • Does partial page caching exist outside of asp.net? 2008-10-26

    I use partial page caching with ASP.NET. I find it to be particularly helpful with large volume sites, where I need only certain sections of a page to cache. Do other web application platforms have this type of technology? --------------Solutions----

  • Dynamic page fetching with AJAX 2011-07-23

    i have a question regarding partial page loading with AJAX. Suppose that an user clicks on a button that makes an AJAX call to load part of a page (it can possibly include dynamically loaded JS and/or CSS), and the html content is dropped on some div

  • I just got a Windows 8 computer and it prints only a partial page on my HP psc 750 printer from any program even with updated driver. What do I do? 2012-05-24

    Printing from any program on my Window's 8 computer to my HP psc 750 printer gives a partial page and then a "cant print document" error message. I down loaded a new driver and it didn't help. Dell, Microsoft, and HP tech support has not been helpful

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.176 (s). 11 q(s)