JSON vs PHP to handle returned data via ajax

PHP
21

Thanks. Some insight into what is going on PHP side. First there’s this function that exists within the responder classes that send out these responses.


/**
	 * Parse javascript. This function strips the <script type="text/javascript"></script> 
	 * wrappers off javascript snippets passed to this function. Those tags 
	 * are present to make sure IDE's color context the code correctly.
	 * @param string
	 */
	public function parseScript() {
		foreach (func_get_args() as $js) {
			$this->body .= "\
".substr( $js, 31, strlen($js) - 40);
		}
	}

That function is pure 100% programmer convenience only in that it allows for php blocks that read like this.


if (condition) {
  return x
} else if (condition) {
  ob_start() ?><script type="text/javascript">
    js code response here
  </script><? return $this->parseJavascript(ob_get_clean);
}

VERY short js snippets I’ll just put into strings, but past a few lines that’s clumsy. The above approach makes the IDE colorize the js correctly. Waste of cpu cycles? Yep - but it makes the code easier to manage.

In the past I’ve abused this to put scripts that should by all rights exist off in their own files into the PHP controllers, but I’m working on a way to move from this while retaining the possibility of call and callback in one file.

22

At the moment I’m replacing entire blocks of HTML, for example a list of images for a page. The list of images has a remove button which has an event attached to it using jQuery. If you add or remove an image the whole list of images is updated (could just remove the element but the image has a position so all positions need to be re-calculated), then the events are added again to all the remove buttons. How would I go about implementing your method oddz?

23 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Event handling</title>
	
	<!-- jQuery lib -->
	<script type="text/javascript" src="jquery-1.4.2-min.js"></script>
	
	<script type="text/javascript">
		$(document).ready(function() {
			
			$('#images').click(function(evt) {
				if(evt.target.nodeName === 'BUTTON') {
					evt.preventDefault();
					alert('Remove image ' + evt.target.value);
				}
			});
			
		});
	</script>
	
</head>
<body>

	<div id="images">
		<ul>
			<li>
				<img src="" alt="img 1">
				<button value="1">Remove</button>
			</li>
			<li>
				<img src="" alt="img 2">
				<button value="2">Remove</button>
			</li>
			<li>
				<img src="" alt="img 3">
				<button value="3">Remove</button>
			</li>
			<li>
				<img src="" alt="img 4">
				<button value="4">Remove</button>
			</li>
			<li>
				<img src="" alt="img 5">
				<button value="5">Remove</button>
			</li>
			<li>
				<img src="" alt="img 6">
				<button value="6">Remove</button>
			</li>
			<li>
				<img src="" alt="img 7">
				<button value="7">Remove</button>
			</li>
			<li>
				<img src="" alt="img 8">
				<button value="8">Remove</button>
			</li>
		</ul>
	</div>

</body>
</html>

Another way it could achieved if using links, rather than buttons for graceful degradation purposes.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Event handling</title>
	
	<!-- jQuery lib -->
	<script type="text/javascript" src="jquery-1.4.2-min.js"></script>
	
	<script type="text/javascript">
		$(document).ready(function() {
			
			$('#images').click(function(evt) {
				if(evt.target.nodeName === 'A' && evt.target.href.match(/^.*?\\?remove=[0-9]*?$/)) {
					evt.preventDefault();
					alert('Remove image ' + evt.target.href.replace(/^.*?\\?remove=([0-9]*?)$/,'$1'));
					
					/* 
					* PSEUDO code to reload frame	
					$.ajax(
						url: evt.target.href + '&layout=blank'
						,success;function(data,status,xhr) {
							$('#images').html(data);
						}
						,error:function(xhr,status,error) {
						}
					);
					*/
					
				}
			});
			
		});
	</script>
	
</head>
<body>

	<div id="images">
		<ul>
			<li>
				<img src="" alt="img 1">
				<a href="?remove=1">Remove</a>
			</li>
			<li>
				<img src="" alt="img 2">
				<a href="?remove=2">Remove</a>
			</li>
			<li>
				<img src="" alt="img 3">
				<a href="?remove=3">Remove</a>
			</li>
			<li>
				<img src="" alt="img 4">
				<a href="?remove=4">Remove</a>
			</li>
			<li>
				<img src="" alt="img 5">
				<a href="?remove=5">Remove</a>
			</li>
			<li>
				<img src="" alt="img 6">
				<a href="?remove=6">Remove</a>
			</li>
			<li>
				<img src="" alt="img 7">
				<a href="?remove=7">Remove</a>
			</li>
			<li>
				<img src="" alt="img 8">
				<a href="?remove=8">Remove</a>
			</li>
		</ul>
	</div>

</body>
</html>