I'm loading my website's pages with ajax by replacing the content inside the main tag.
Problem is, using Wordpress, each page has its own body classes that are useful for styling purposes, so I want to replace the old page's body classes by the next page's classes.
I thought i'd run a new ajax request to get the whole html page, then check for the body element, then use .attr("class") to get the list of class and finally replace the old body classes by the new one...
But the classes always return undefined instead of a list of classes.
EDIT: I tried to use .cd-main-content instead of body and weirdly it works, I get the classes of this element. So I assume now that the problem doesn't e from my syntax but from the element itself.
How can I possibly get it to work on the body element ? (I already tried to replace .find by .filter but it doesn't work either.)
HTML stucture
<body id="body" class="home page-id-number other-classes">
<main>
<div class="cd-main-content">
<!-- inside is the dynamically loaded content-->
</div>
</main>
</body>
jQuery
$.ajax({url: url,
success: function(data){
var body = $(data).find("#body");
var classes = body.attr("class");
console.log(data); //returns the html as expected
console.log("body : "+body); //returns [object Object]
console.log("classes : "+classes); //returns undefined
}
});
I'm loading my website's pages with ajax by replacing the content inside the main tag.
Problem is, using Wordpress, each page has its own body classes that are useful for styling purposes, so I want to replace the old page's body classes by the next page's classes.
I thought i'd run a new ajax request to get the whole html page, then check for the body element, then use .attr("class") to get the list of class and finally replace the old body classes by the new one...
But the classes always return undefined instead of a list of classes.
EDIT: I tried to use .cd-main-content instead of body and weirdly it works, I get the classes of this element. So I assume now that the problem doesn't e from my syntax but from the element itself.
How can I possibly get it to work on the body element ? (I already tried to replace .find by .filter but it doesn't work either.)
HTML stucture
<body id="body" class="home page-id-number other-classes">
<main>
<div class="cd-main-content">
<!-- inside is the dynamically loaded content-->
</div>
</main>
</body>
jQuery
$.ajax({url: url,
success: function(data){
var body = $(data).find("#body");
var classes = body.attr("class");
console.log(data); //returns the html as expected
console.log("body : "+body); //returns [object Object]
console.log("classes : "+classes); //returns undefined
}
});
3 Answers
Reset to default 2"body" tag filtering by jQuery when getting from string.
So $(data)[0] will back all content, without body.
Also use filter, not "find" So you can get classes like that:
$.ajax({url: url,
success: function(data){
//replace body tag
data = data.replace("<body", "<container").replace("body>", "container>");
var classes = $(data).filter("container").attr("class");
$("body").attr("class", classes);
}
});
Your jQuery code is wrong:
$.ajax({url: url,
success: function(data){
var body = $(data).find("body"); //not #body
var classes = body.attr("class");
console.log(data); //returns the html as expected
console.log("body : "+body); //returns [object Object]
console.log("classes : "+classes); //returns undefined
}
});
The right selector is body not #body, which is an id selector
So, to change your body classes use this code:
$.ajax({url: url,
success: function(data){
var classes = $(data).find("body").attr("class"); //get the classes
$("body").attr("class", classes); //set the classes
}
});
jQuery Selectors
I found a solution, it's not ideal but it fixed the problem.
First, I have to assume that it is not possible to get the attributes of the body element as it appears to be filtered by jQuery. However it is possible to get the child elements.
I ended up adding the body classes to both the body and main elements (in the header.php file of wordpress).
Here's my code now :
HTML
<body id="body" class="home page-id-number other-classes">
<main class="home page-id-number other-classes">
<!-- if I had the possibility, I'd have added "data-body-class" instead of "class" -->
<div class="cd-main-content">
<!-- inside is the dynamically loaded content-->
</div>
</main>
</body>
jQuery
$.ajax({url: url,
success: function(data){
var classes = $(data).filter("main").attr("class"); //get the classes
$("body, main").attr("class", classes); //set the classes
}
});