Updating part of a page while also changing the navigation

Question

Updating part of a page while also changing the navigation

Apologies in advance, as this is my first attempt at coding a website. I have a specific need where I want to update only one div on my web page 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>

The main goal is to change the content of the "mainwrap" div and update the URL without refreshing the entire page. Each HTML file for 1, 2, and 3 contains different "main" divs that ideally will be inserted into the "mainwrap" div.

I've tried tutorials like this and other resources like this. While I attempted to follow the instructions, the solution still doesn't seem to work. Could there be a simple fix that I'm overlooking due to my limited coding knowledge? (I'm using Dreamweaver, if that matters.)

Thanks!

javascript jquery html ajax

Answer 1

Answer №1

Correct! If you are unfamiliar with jQuery, here is the complete code snippet that demonstrates how to achieve a partial page update using jQuery: http://jsfiddle.net/yrbvnayy/.

<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>

Answer 2

Correct! If you are unfamiliar with jQuery, here is the complete code snippet that demonstrates how to achieve a partial page update using jQuery: http://jsfiddle.net/yrbvnayy/.

<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>

Answer 3

Answer №2

To illustrate the solution, I will refer back to a similar method using jQuery ajax. Learn more about partial page update with jQuery here

Adapting the above example to your situation:

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

UPDATE

If you only want the specific div from the linked HTML pages:

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$('#mainnav a').click(function(e){
  // Use e.preventDefault() to stop the default event or return false
  e.preventDefault();
  var loc = $(this).attr('href');
  $.ajax({
    url: loc,
    type: 'GET', // Choose GET or POST as needed
    success: function(data, textstatus, xhr)
    {
      var div = $(data).find('#main');
      $('#mainwrap').html(div);
    },
    error: function(xhr, status, error)
    {
      alert('Error - ' + xhr.responseText);
    }
  });
  // Load HTML content into your div
})
});
</script>

For additional information on Ajax functionalities, visit http://api.jquery.com/jquery.ajax/

Answer 4

To illustrate the solution, I will refer back to a similar method using jQuery ajax. Learn more about partial page update with jQuery here

Adapting the above example to your situation:

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

UPDATE

If you only want the specific div from the linked HTML pages:

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$('#mainnav a').click(function(e){
  // Use e.preventDefault() to stop the default event or return false
  e.preventDefault();
  var loc = $(this).attr('href');
  $.ajax({
    url: loc,
    type: 'GET', // Choose GET or POST as needed
    success: function(data, textstatus, xhr)
    {
      var div = $(data).find('#main');
      $('#mainwrap').html(div);
    },
    error: function(xhr, status, error)
    {
      alert('Error - ' + xhr.responseText);
    }
  });
  // Load HTML content into your div
})
});
</script>

For additional information on Ajax functionalities, visit http://api.jquery.com/jquery.ajax/

Answer 5

Answer №3

Your referenced scenario utilizes php, a tool capable of fulfilling your requirements.

Answer 6

Your referenced scenario utilizes php, a tool capable of fulfilling your requirements.

Updating part of a page while also changing the navigation

Answer №1

Answer №2

Answer №3

Similar questions

Troubleshooting issues with CSS dropdown menu in Internet Explorer and Chrome

The API is returning a successful response code of 200 when the HEAD and OPTIONS methods are utilized

Limiting zero is ineffective when it comes to pop-up issues

Place an element into an alternate container from a dynamically created list using PHP, jQuery, and AJAX

javascript authorization for iframes

Applying the jqtransform plugin to all forms except for one

deleting the current product information during an ajax request

Choose a punctuation mark using jQuery

Is the UUID key displayed as an object within a Reactjs prop?

Steps to incorporate / insert Angular directive in an application

A web application using JavaScript and Node.js with a focus on creating a REST

Retrieve information from a form in AngularJS without relying on two-way data binding

Show a div depending on user input

Ways to retrieve information beyond the scope of the 'then' method

Could Angular be automatically applying margins or padding to my component?

The use of Jquery's $.ajax function is causing an internal server error

Sorting through an array of objects based on a key and value that match another object

Automatic capitalization of menu options in Bootstrap dropdown

Assign a Value to a Hidden Input Type When a User Submits a Form

What is the best way to eliminate the blue outline around an image map?