Load dynamic content in div from different navbars

Question

On one page, alphabet.php, in my project I have a sidebar further down on the page that loads diverse php-pages in a Content div. Like this:

HTML SideMenu

<nav id="sideMenu">
        <ul class="list-unstyled components">
          <li id="a"><a href="a.php">A</a></li>
          <li id="b"><a href="b.php">B</a></li>
          <li id="c"><a href="c.php">C <span class="caret"></span></a>
             <ul>
               <li id="c1"><a href="c.php#c1">C1</a></li>
               <li id="c2"><a href="c.php#c2">C2</a></li>
            </ul>
          </li>
       </ul>
</nav>
<div id="Content">
      <h2>Lorem bla bla</h2>
        <p>lorem bla bla </p>
</div>

JS

$(function() {
'use strict';
var newHash     = '',
$content    = $("#Content");

$("#sideMenu").delegate("a", "click", function() {

    window.location.hash = $(this).attr("href");

    return false;

});

$(window).bind('hashchange', function() {

    newHash = window.location.hash.substring(1);

    $content.load(newHash);

    console.log(newHash);
 });
});

The same content should be loaded also when you click the topmenu and footer navigation. And at the same time scroll to the Content div.

HTML MainMenu

<li class="dropdown"><a href="#alpha" class="dropdown-toggle" data- 
toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
Alphabet <span class="caret"></span></a>
   <ul class="dropdown-menu dropdown-menu-left" role="menu" id="alpha">
      <li><a href="alphabet.php#a.php role="button" aria-expanded="false">A</a> 
      </li>
      <li><a href="alphabet.php#b.php" role="button" aria-expanded="false">B</a> 
      </li>
      <li><a href="alphabet.php#c.php role="button" aria-expanded="false">C</a>
         <ul class="dropdown-menu dropdown-menu-left" role="menu">
            <li><a href="c.php#c1">C1</a></li>
            <li><a href="c.php#c2">C2</a></li>
         </ul>
      </li>
  </ul>
</li>

I solved the JS for the main-menu with this code

$(function() {
'use strict';
if(location.hash) $('#Content').load(location.hash.substring(1));
$('#alphaa').click(function() {
    $('#Content').load(this.hash.substring(1));
});

});

EDIT: I changed the URL in MainMenu to alphabet.php#a.php etc., and it loads the content into the div IF you are on the current page (alphabet.php). Not if you're on another page.

EDIT 2: Solution for the main-menu JS. Now everything works fine but I guess you could make it prettier without two different js functions for the main-menu and the side-menu, but for now I'm pleased with this. It works!

i hope this link would help [link](https://stackoverflow.com/a/18938994/2417602) — vikscool, Apr 30 '18 at 10:40
@vikscool I made a loadfunction but can't make it work properly. Somehow the preventDefault is overridden because it loads the page but not in the Content div — Mia Raunegger, May 02 '18 at 10:33

vikscool · Answer 1 · 2018-05-03T10:02:10.267

Here is how i am able to do the navigation i wrote the links like:

<a class="nav-link" href="javascript:void(0);" data-href="/page1.html #div1">Page 1</a> <a class="nav-link" href="javascript:void(0);" data-href="/page2.html #div2">Page 2</a> <a class="nav-link" href="javascript:void(0);" data-href="/page3.html #div3">Page 3</a>

If you use javascript:void(0) in your href= then you don't need to call the event.preventDefault.

then in my scripting side i wrote:

$(window).on('load', function () {
$('.nav-link').on('click', function () {
    var linkPage = $(this).attr('data-href');
    if (linkPage !== undefined)
    {
        $('#content').load(linkPage);
    }
});});

Note

One thing you need to make sure is that domain of the calling page and pages from which the data has to come should be the same or else you will have the cross-domain issue.

Edit 1 The #div1,#div2,.#div3 are basically the ids of the div on their respective pages from which the data has to be fetched.

for example if i have some content on my pages like this:

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Page 1</title>
</head>
<body>
<div id="div1">
    hi i am the content of page 1
</div>
</body>
</html>

So, when someone clicks on the menu links the load function will go to the particular page (which is in our case the page1.html or any other) and return the HTML contents of div with id as div1 and load the data to the particular div(i.e. div with id content).

Edit 2

The JQuery's Load() is better explained on this Jquery Load you can use this to understand more about it.

So, what i think you are doing is you are creating a request to a /page1.html from the domain www.example.com, in that case load function will call the www.example.com/page.html and will load the contents of the page but if you make a request to other any other page let say /page11.html from the domain www.example.com/page2.html then the load() will create this www.example.com/page2.html/page11.html url which is not correct and hence it will not load any content.

So,what you can do is either you can put the whole url on the of the page i.e. www.yourdomain.com/page.html #divid in the attribute data-href or you can create the particular url on the javascript calling funciton like:

$(window).on('load', function () {
 $('.nav-link').on('click', function () {
 var linkPage = $(this).attr('data-href');
 if (linkPage !== undefined)
 {
    var pageUrl = window.location.origin+'any other seperation for the pages 
    if any'+linkPage;
    $('#content').load(pageUrl);
 }
 });
});

Here the window.location.origin is going to give you the domain on which the website is running regardless of hashes or slashes and then it will concate it with the linkPage and will make the proper url for the called page.

Ok, I will try that. But what is #div1, #div2 and #div3 in the navigation? — Mia Raunegger, May 02 '18 at 18:08
@MiaRaunegger if you want to check weither you are getting a data from the page link or not try to do a `$.get` request on the particular url without the div from which the data is to be fetched for example: `('/a.php')`. It will give you the html content of the given url if not please check the console for error. — vikscool, May 03 '18 at 04:36
It loads the content in the div, but only IF you are on the current site. Not from another — Mia Raunegger, May 03 '18 at 07:57
`Cross - domain` will not allow you to access a domain that is different from the calling one. So, if you still wan't to do that (which i will not recommend) you have to make a server-side request. — vikscool, May 03 '18 at 09:00
It's not from another domain - it's from the same site but if you are positioned on another page than the one with the div that should be loaded, it doesn't work from the topnav. — Mia Raunegger, May 03 '18 at 09:18
@MiaRaunegger i have updated my answer please take a look at the 2nd edit. — vikscool, May 03 '18 at 10:02
I just can't make it work with javascript:void(0); It blocks the load and nothing happens. This should be a simple thing with load() but I just can't make it work. — Mia Raunegger, May 03 '18 at 12:24
@MiaRaunegger the`javascript:void(0)` is just a blank function that returns nothing I added that to avoid any extra hashing on the page's url can you please check in the `click` function what is the value of pageUrl is it referencing to any of your page or not. if not please do some modification to make the pageUrl. Further you can check the url by putting a get request of the same if you get the requested page's HTML code then the url Is working. — vikscool, May 03 '18 at 16:39
Still not working. I removed the javascript and I get the same result; the div loads with the pages only when you are at the current page. Not if you're on another page and click one of the links in the mainmenu. — Mia Raunegger, May 03 '18 at 21:09

Load dynamic content in div from different navbars

1 Answers1