Loading content into a div using jQuery is deleting part of my content

Question

I am trying to create a website that's split into two interactive frames. If you click on a link on the left hand side, the left hand side reloads with new content, while the right hand side remains unchanged (and doesn't refresh).

If I click on a link at the top of the sidebar just once, it behaves fine. Once I click on the same link twice, though my navigation elements disappear.

This is my sidebar's content code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  $.get("sidebar-navigation.html", function(data){
    $(".sidebar-nav").html(data);
  });

  /*
  Use $.on() to associate a click handler with any link nested under .sidebar-navigation, 
  even if the links are dynamically added to the page in the future (ie after a 
  $.get())
  */
  $('body').on('click', '.sidebar-nav a', function() {

    /*
    Get the href for the link being clicked
    */
    var href = $(this).attr('href');

    /*
    Issue a request for the html document
    or resource at href and load the contents
    directly into .sidebar if successful
    */
    $('.sidebar-content').load(href);

    /*
    Return false to prevent the link's default
    navigation behavior
    */
    return false;
  })
</script>

</head>
<body>
<div class="sidebar-content">

<div class="sidebar-nav">
</div>

  <p>
    My sidebar content
  </p>


</div>

</body>
</html>

Well, hard to experiment without any provided demo, but I may see your problem. As you NAV is inside the CONTENT, in some cases, even if you have some preventing mechanisms there, your NAV is being reloaded by the content. The easiest way I can suggest: split the nav from content. You can do it simply adding NAV completely outside the CONTENT, or, you can add another DIV into CONTENT and target the data load inside to new div. I mean like `
` — Zorak, Jan 27 '19 at 00:21
That's definitely closer to what I'm looking for! Now though, the first time I click on a link in the sidebar, the navigation appears a second time. Here's what I'm describing: https://imgur.com/a/bnqohUC — Katherine, Jan 27 '19 at 00:28
Well, I see in your image, that you have physically the NAV twice there. You have to have the nav outside of sidebar OR inside, not on both places. Please, can you provide some demo via jsfiddle.net? you can use some append random var string instead of file loads, but we need to see the reproduced behavior, so we are able to edit it for you to the workable shape :) — Zorak, Jan 28 '19 at 13:12

score 0 · Answer 1 · answered Jan 27 '19 at 01:23

your answer is about right, you just need to target a bit better

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <script>
          $.get("sidebar-navigation.html", function(data){
            $(".sidebar-nav").html(data);
          });

          /*
          Use $.on() to associate a click handler with any link nested under .sidebar-navigation, 
          even if the links are dynamically added to the page in the future (ie after a 
          $.get())
          */
          $('body').on('click', '.sidebar-nav a', function() {

            /*
            Get the href for the link being clicked
            */
            var href = $(this).attr('href');

            /*
            Issue a request for the html document
            or resource at href and load the contents
            directly into .sidebar if successful
            */
            $('#stick-my-stuff-here').load(href);

            /*
            Return false to prevent the link's default
            navigation behavior
            */
            return false;
          })
        </script>

    </head>
    <body>
        <div class="sidebar-content">

            <div class="sidebar-nav">
            </div>

              <p id="stick-my-stuff-here">
                My sidebar content
              </p>


            </div>

    </body>
</html>

Could you post only the code you changed and explain what the problem was? While this is helpful for the OP it's not helpful for anyone else with a similar problem. — Itay Grudev, Jan 27 '19 at 01:24
This didn't seem to fix my particular issue. I commented above for what seemed to work for me. Thanks for your time though! — Katherine, Jan 27 '19 at 01:49

score 0 · Answer 2 · answered Jan 27 '19 at 01:48

I think what ultimately happened was I was calling out for the sidebar navigation to be reloaded when it shouldn't have been on the destination page. Once I removed the sidebar-nav div from the other pages I wanted to display in the sidebar, everything worked out fine.

Loading content into a div using jQuery is deleting part of my content

2 Answers2