a-ok Posted April 3, 2015 Share Posted April 3, 2015 Hi folks, I'm building a fairly simple site using PW but I am also working with AJAX driven content (as noted by @ryan here: https://processwire.com/talk/topic/225-how-to-work-with-ajax-driven-content-in-processwire/) and everything works fine except for the change of body classes per page. So, for example, in the head.inc I have the following: <body class="<?php echo $page->name; ?>"> which is useful as it means I can create page specific styles etc. However, as the head and foot remain constant if an AJAX request is called using the following, for example: <?php if(!$config->ajax) include('./head.inc'); ?> the body class fails to update for obvious reasons. Is there any way round this so the body class is updated per ajax call, if you know what I mean? This may be a global AJAX question and not a PW specific question but thought I would ask all the same. Thanks, R Link to comment Share on other sites More sharing options...
a-ok Posted April 3, 2015 Author Share Posted April 3, 2015 I'd also like to note that I am using pjax for HTML5 history etc. and it's really great with PW. But perhaps this is actually an application specific issue (https://github.com/defunkt/jquery-pjax/issues/493) Link to comment Share on other sites More sharing options...
LostKobrakai Posted April 3, 2015 Share Posted April 3, 2015 At best one doesn't even send rendered markup via ajax which would mean you could easily swap the class on the client. In your case, how about using json in a small version like so: <script type="text/javascript"> if(myconfig == undefined) var myconfig = { "title": <?php echo $page->title; ?> }; else myconfig = { "title": <?php echo $page->title; ?> }; </script> Inline it to your ajax response and use the infos by your javascript after the ajax request is done. Link to comment Share on other sites More sharing options...
diogo Posted April 6, 2015 Share Posted April 6, 2015 You probably have the class name in the text of each item in the navigation, so why not use it? With jQuery, written in the browser, and making lots of assumptions about your markup. but so you get an idea: $('nav a').click(function () { // do your ajax thing // and then $('body').addClass($(this).text().toLowerCase()); }); or, in case you use the name of the page, or anything else instead of the text in the nav item, add it as title or even data-something attribute to the link in the nav and do instead: $('body').addClass($(this).attr('data-something')); Link to comment Share on other sites More sharing options...
a-ok Posted April 6, 2015 Author Share Posted April 6, 2015 Hi folks, thanks for all your replies. Here's how I did it. $(document).on('pjax:end', function() { var bodyClass = $('meta[name=body-class]').attr('content'); if (bodyClass !== undefined) { document.body.className = bodyClass; } }); Then on every template which would be within the ajax/pjax container: <meta name="body-class" content="<?php echo $page->name; ?>" /> Thanks, R 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now