Jump to content

Best practice for displaying content with ajax


Marc
 Share

Recommended Posts

I'm using the delayed output template structure the way Ryan recommends. That means I have a _main.php file with all of my HTML markup and each page has a template that outputs to a variable that is echo'd in _main.php. Now I doing some very basic ajax testing, to figure out how this fits into the Processwire workflow. I'm already running into an issue: the file that handles the ajax request is not only outputting the data I'm requesting, but it's also outputting the complete _main.php markup into the ajax container where only the result of my ajax request should be going. Here what I've got:

_main.php (greatly simplified)

<html>
<body>

<!-- template output goes here -->
<p><?php echo $bodycopy; ?></p>

<p>This line will unfortunately also be output to the ajax container</p>

</body>
</html>

ajax_test.php template

<?php
ob_start();
?>

<?php 

?>
<form method="post" enctype="multipart/form-data">
	<div id="enter_template_container">
		<input type="text" name="select_template" id="select_template"/>
	</div>
	<p>
		<a href="#" class="button" id="button_select_template">Search</a>
	</p>
</form>

<div id="placeholder_template"></div>
<?php
$bodycopy .= ob_get_clean();

front.js

/**
	Simple ajax test: search templates
**/
	
	var show_template = function(template) {

		// Ajax
		data = {
			template_search: template,
			command: 'show_template' // add a unique command value to every ajax call so we can identify what function to call in function.php
		};
		  
		$.post("../functions/", data, function (response) {
			// Add form
			$('#placeholder_template').html(response);
		}).fail(function() {
         
            // Just in case posting your form failed
            alert( "Posting failed." );
             
        });
		
	}

	$('#button_select_template').on('click', function() {
		var template = $('#select_template').val();

	    show_template(template);
	});

functions.php template (yes I have a Wordpress background ;-))

/**
	Simple ajax test: search templates
**/

if ($command == "show_template") {

	$template = $templates->get(htmlspecialchars($_POST['template_search']));

	foreach($template->fields as $field){
	    echo $field->name . "<br/>";
	}

}

Functions.php does the ajax output which is placed in a div with "placeholder_template" ID in a template called ajax_test.php. The problem is that all the contents of _main.php are also put into that div, not just the output generated by functions.php. What is the best way to counter this behavior? Is it a good idea to add "die;" at the end of the functions.php template for instance? What's the best way to deal with this?

Link to comment
Share on other sites

I assume you have a special template for /functions/ and you have set up your config.php to auto-append _main.php. You can exclude templates from auto-appending and auto-prepending in the “files” tab of the template settings. If auto-append is active, there will be a checkbox called “Disable automatic append of file: _main.php”.

Regardless, it’s always a good idea to die() as soon as possible. In your case, I would advocate putting a die() at the end of each if ($command ...) block, unless there’s something you need to do afterwards. Probably a good idea to use a switch, too, then.

  • Like 6
Link to comment
Share on other sites

I assume you have a special template for /functions/ and you have set up your config.php to autp-append _main.php. You can exclude templates from auto-appending and auto-prepending in the “files” tab of the template settings. If autp-append is active, there will be a checkbox called “Disable automatic append of file: _main.php”.

Regardless, it’s always a good idea to die() as soon as possible. In your case, I would advocate putting a die() at the end of each if ($command ...) block, unless there’s something you need to do afterwards. Probably a good idea to use a switch, too, then.

Your assumptions are correct, and so is your answer. Problem solved  :)

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

×
×
  • Create New...