Jump to content

HomePage source missing using AJAX

Faisal

By Faisal,
in General Support

 Share

Recommended Posts

Faisal Full Member

Faisal

Posted
Posted

Hi all
 
 
I don't know if this is a bug or not, but this what happen:
 
 
Testing the AJAX sample in https://processwire.com/talk/topic/225-how-to-work-with-ajax-driven-content-in-processwire/
 

change code in home.php and basic-page.php to

if(!$config->ajax) include("./head.inc");

echo $page->body;

if(!$config->ajax) include("./foot.inc");

And add before </head>

<script type="text/javascript">
    $(document).ready(function() {
        $("#topnav a").click(function() {

            $("#topnav a.on").removeClass('on'); // unhighlight selected nav item...
            $(this).addClass('on'); // ...and highlight new nav item
            $("#bodycopy").html("<p>Loading...</p>");
            
            $.get($(this).attr('href'), function(data) {
                $("#bodycopy").html(data);
            });

            return false;
        });
    });
</script>

With default installation and all OK except if I click any link and view page source I see all HTML code from NO problem
But if I want to back to homepage and after click the home link from any page then view the homepage source I only see:
 

<h2>What is ProcessWire?</h2><p>ProcessWire gives you full control over your fields, templates and markup. It provides a powerful template system that works the way you do. Not to mention, ProcessWire's API makes working with your content easy and enjoyable. <a href="http://processwire.com">Learn more</a> </p><h2>Basic Site Profile</h2><p>This is a basic starter site for you to use in developing your own site. There are a few pages here to serve as examples, but this site profile does not make any attempt to demonstrate all that ProcessWire can do. To learn more or ask questions, visit the <a href="http://www.processwire.com/talk/" target="_blank">ProcessWire forums</a>. If you are building a new site, this basic profile is a good place to start. You may use these existing templates and design as they are, or you may replace them entirely. <a href="./templates/">Read more</a></p><h2>Browse the Site</h2>

 
Also the three links under Browse the Site will not show!

Link to comment
Share on other sites
Faisal Full Member

Faisal

Posted
  • Author
Posted

WOW That was fast

here:

<?php

/**
 * Demo site header include file (HTML5)
 *
 * Note that this file has nothing to do with ProcessWire. We just split our common 
 * header and footer markup into separate files (head.inc and foot.inc) like this, 
 * since it was common to all of our templates. 
 *
 */

?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />

	<title><?php echo $page->get("headline|title"); ?></title>

	<meta name="description" content="<?php echo $page->summary; ?>" />

	<meta name="generator" content="ProcessWire <?php echo $config->version; ?>" />

	<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/main.css" />

	<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/ie.css" />
	<![endif]-->	

	<script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/jquery-1.4.2.min.js"></script>

	<script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/main.js"></script>

	<!--
	This website is powered by ProcessWire CMF/CMS.
	ProcessWire is a free open source content management framework licensed under the GNU GPL.
	ProcessWire is Copyright 2012 by Ryan Cramer / Ryan Cramer Design, LLC.
	Learn more about ProcessWire at: http://processwire.com
	-->

	
<script type="text/javascript">
    $(document).ready(function() {
        $("#topnav a").click(function() {

            $("#topnav a.on").removeClass('on'); // unhighlight selected nav item...
            $(this).addClass('on'); // ...and highlight new nav item
            $("#bodycopy").html("<p>Loading...</p>"); 
            
            $.get($(this).attr('href'), function(data) { 
                $("#bodycopy").html(data); 
            }); 

            return false; 
        }); 
    }); 
</script>

</head>
<body>

	<p id='bgtitle'><?php 

		// print the section title as big faded text that appears near the top left of the page
		echo $page->rootParent->title; 

	?></p>	

	<div id="masthead" class="masthead">

		<div class="container">

			<a href='<?php echo $config->urls->root; ?>'><p id='logo'>ProcessWire</p></a>
		
			<ul id='topnav'><?php
			
				// Create the top navigation list by listing the children of the homepage. 
				// If the section we are in is the current (identified by $page->rootParent)
				// then note it with <a class='on'> so we can style it differently in our CSS. 
				// In this case we also want the homepage to be part of our top navigation, 
				// so we prepend it to the pages we cycle through:
				
				$homepage = $pages->get("/"); 
				$children = $homepage->children;
				$children->prepend($homepage); 
		
				foreach($children as $child) {
					$class = $child === $page->rootParent ? " class='on'" : '';
					echo "<li><a$class href='{$child->url}'>{$child->title}</a></li>";
				}

			?></ul>

			<ul id='breadcrumb'><?php

				// Create breadcrumb navigation by cycling through the current $page's
				// parents in order, linking to each:

				foreach($page->parents as $parent) {
					echo "<li><a href='{$parent->url}'>{$parent->title}</a> > </li>";
				}

			?></ul>

			<h1 id='title'><?php 

				// The statement below asks for the page's headline or title. 
				// Separating multiple fields with a pipe "|" returns the first
				// one that has a value. So in this case, we print the headline
				// field if it's there, otherwise we print the title. 
				
				echo $page->get("headline|title"); 

			?></h1>

			<form id='search_form' action='<?php echo $config->urls->root?>search/' method='get'>
				<input type='text' name='q' id='search_query' value='<?php echo htmlentities($input->whitelist('q'), ENT_QUOTES, 'UTF-8'); ?>' />
				<button type='submit' id='search_submit'>Search</button>
			</form>

			<?php

			// Grab a random image from the homepage and display it.
			// Note that $homepage was loaded above where we generated the top navigation.

			if(count($homepage->images)) {
				$image = $homepage->images->getRandom(); 
				$thumb = $image->size(232, 176); 	
				echo "<a href='{$image->url}'><img id='photo' src='{$thumb->url}' alt='{$thumb->description}' width='{$thumb->width}' height='{$thumb->height}' /></a>";
			}

			?>

		</div>
	</div>

	<div id="content" class="content">

		<div class="container">

			<div id="sidebar">

				<?php

				// Output subnavigation
				// 
				// Below we check to see that we're not on the homepage, and that 
				// there are at least one or more pages in this section.
				// 
				// Note $page->rootParent is always the top level section the page is in, 
				// or to word differently: the first parent page that isn't the homepage.

				if($page->path != '/' && $page->rootParent->numChildren > 0) { 

					// We have determined that we're not on the homepage
					// and that this section has child pages, so make navigation: 

					echo "<ul id='subnav' class='nav'>";

					foreach($page->rootParent->children as $child) {
						$class = $page === $child ? " class='on'" : '';
						echo "<li><a$class href='{$child->url}'>{$child->title}</a></li>";	
					}

					echo "</ul>";
				}

				?>

				<div class='sidebar_item'>

					<?php

					// if the current page has a populated 'sidebar' field, then print it,
					// otherwise print the sidebar from the homepage
					
					if($page->sidebar) echo $page->sidebar; 
						else echo $homepage->sidebar; 
					?>

				</div>

			</div><!--/sidebar-->

			<div id="bodycopy">
Link to comment
Share on other sites
Luis Sr. Member

Luis

Posted
Posted

Do you have any errors in you Web-Dev-tools console?

From here, it looks like $config->ajax is triggered correctly and just echoes the $page->body. 

Just for clarification, after you clicked 'home' the whole page refreshed and you only see your $page->body contents?

Link to comment
Share on other sites
Faisal Full Member

Faisal

Posted
  • Author
Posted

As I say default installation with default profile in my local host MAMP server on mac also same problem on custom profile on my live server but site not published yet (under construction).

No, no errors in Web-Dev-tools console.

If you visit the homepage in the first time the page source is showing completely but if you navigate to any page then navigate back to home the home page will not reload (refreshed) the ajax works but the page source became funny as above and the links in the footer disappear!

I can set up a live PW with default profile if needed.

Link to comment
Share on other sites
Luis Sr. Member

Luis

Posted
Posted

Meh works as intendet. 

The problem is, the ajax call replaces the html content of div#bodycopy. If you take look into your footer,inc you could find a foreach iterating through the page children creating the links you are missing. 

They wont be rendered in the ajax response because they are not part of $page->body. 

To solve your issue you have to change the markup in your footer.inc to something like this:

                    </div><!--/bodycopy-->

?php 

				// Output navigation for any children below the bodycopy.
				// This navigation cycles through the page's children and prints
				// a link and summary: 

				if($page->numChildren) {

					echo "<ul class='nav'>";

					foreach($page->children as $child) {
						echo "<li><p><a href='{$child->url}'>{$child->title}</a><br /><span class='summary'>{$child->summary}</span></p></li>"; 
					}

					echo "</ul>";
				}

				?>			

		</div><!--/container-->

	</div><!--/content-->

This needs some changes in your css to regain the original look and feel.

EDIT:

I had a brainfuck :D

Do something like this, edit the javascript in head to

<script type="text/javascript">
    $(document).ready(function() {
        $("#topnav a").click(function() {

            $("#topnav a.on").removeClass('on'); // unhighlight selected nav item...
            $(this).addClass('on'); // ...and highlight new nav item
            $("#bodyContent").html("<p>Loading...</p>");
            
            $.get($(this).attr('href'), function(data) {
                $("#bodyContent").html(data);
            });

            return false;
        });
    });
</script>

now edit home.php and basic-page.php like this:

<?php include("./head.inc"); ?>

<div id="bodyContent"><?= $page->body ?></div>

<?php include("./foot.inc"); ?>
Link to comment
Share on other sites
Faisal Full Member

Faisal

Posted
  • Author
Posted

OK what about the page source?

I remove the links completely

				/*if($page->numChildren) {

					echo "<ul class='nav'>";

					foreach($page->children as $child) {
						echo "<li><p><a href='{$child->url}'>{$child->title}</a><br /><span class='summary'>{$child->summary}</span></p></li>"; 
					}

					echo "</ul>";
				}*/

And still if you navigate back to the page you started from and view page source you can't see the correct HTML code! I think you must see the full html code of the page

Starting from
<!DOCTYPE html>

until

</html>

I don't know if this will be a problem in a live site or not.

Link to comment
Share on other sites
Luis Sr. Member

Luis

Posted
Posted

Which browser do you use? 

Source in Chrome looks good, the only thing I could imagine is that you see the network response which could only be something like you posted because it just contains the markup of $page->body.

The whole markup is already there because you just replace the markup inside your bodycopy via javascript.  

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...