0

I have a single page concept, where there is always one navigation-menu, and below is a div with exchangable contents. The contents come from other html files.

In the function "navigateToPage", I'm trying to grab data from inside a div in another html-file, the div has an ID (#content-main) and class (.fragment), so I would like to filter/find for all the content from in there and put it in the current site's div with the same ID.

function getPageName() {
    var
        pathName = window.location.pathname,
        pageName = "";

    if (pathName.indexOf("/") != -1) {
        pageName = pathName.split("/").pop();
    } else {
        pageName = pathName;
    }

    return pageName;
}



function navigateToPage() {

    var pageName = getPageName();


        $.get(pageName, function (response) {

        var
        // Wrap the resulting HTML string with a parent node
        // so jQuery can properly select against it.
            markup = $("<div>" + response + "</div>"),

        // Extract the fragment out of the markup.
            fragment = markup.find(".fragment").html();

        $("#content-main").html(fragment);
        });
}

Problem is, there seems to be no content grabbed into navigateToPage().

The description for the procedure is from Craig Shoemaker. I thought maybe the get & response is deprecated, and I would have to use sth like this ?

I should add the 3rd part, maybe the error is there..?

    $("a[data-role='ajaxLink']").on('click', function (e) {

        if (window.history && window.history.pushState) {
          e.preventDefault();
          var pageName = $(this).attr("href");
          window.history.pushState(null, "", pageName);
          navigateToPage();
        }
    });
Community
  • 1
  • 1
JuliaWatanabe
  • 67
  • 1
  • 9

1 Answers1

0

It seems this solved the issue:

$('#content-main').load(pageName + " .fragment");

Thou', don't know why the other method did not work...

I have to add, since the DIV with class ".fragment" will be loaded into DIV #content-main, one has to beware to not create nested DIVs. I solved the problem because I have a DIV below #content-main on each html, where I will put the class .fragment.

JuliaWatanabe
  • 67
  • 1
  • 9