knot22 knot22 - 4 months ago 13
jQuery Question

render data without a page load when user clicks on controls

In an application that uses PHP server-side code the following array exists in a file called data.php:



$htdocs = 'C:\xampp\htdocs';
$projects = ['Pies' => [
'app' => $htdocs. '\PiesAreSquare\OOP',
'db' => 'C:\MySQL\Scripts'
],
'Cats' => [
'app' => $htdocs . '\CatJetInc',
'db' => 'C:\SQLServer\Scripts'
]
];





The corresponding web page looks like this:
enter image description here

The project select box on the webpage is populated with the array keys from the $projects array.

I want to get things set up so the correct text from the nested arrays appears next to the "path:" label. The page defaults to the first project in the array and "app" as the script type so when the page first renders the value next to "path:" in this example would be what's in $projects['Pies']['app']. If the user chooses Cats as the project and db as the script type then the text that should appear next to "path:" would be the value in $projects['Cats']['db']. The value next to "path:" should change whenever the user changes the value in the "project:" box or clicks on a "script type:" radio button. My goal is to achieve this without reloading the page. How is this possible?

Answer

This was achieving using AJAX. It was possible to use plain JavaScript, though my final solution ended up using jQuery because the code was more concise.

The HTML for the page looks like this:

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
		<script src="js/functions.js"></script>		
	</head>
<body>	
<ol>
	<li>
		<label>project:</label>
		<select id="ProjectName" onchange="choosePath()">
			<?php echo $project_options; ?>
		</select>
	</li>
	<li>
		<label>script type:</label>
			<input type="radio" name="ScriptType" onclick="choosePath()" id="app" value="app"/><label for="app" class="rblabel">app</label>
			<input type="radio" name="ScriptType" onclick="choosePath()" id="db" value="db"/><label for="db" class="rblabel">db</label>
	</li>
		<li>
		<label>path:</label>
		<span id="path"></span>
	</li>
  </ol>
  <noscript><br><div class="msg">This site requires the use of JavaScript.  Either enable JS to run or view this site on a browser with JS capability.</div></noscript>
</body>
</html>

The jQuery, in the functions.js file, looks like this:

function choosePath()
{
  	$.ajax({
	method: "POST",
	url: "utility/utility1.php",
	data:
	{		
		caller: 'choosePath',
		projectname: $('#ProjectName option:selected').text(),
		scripttype: $('input:radio[name="ScriptType"]:checked').val()
	},
	async: true,
	success:			
	function(data){
		var extracted = JSON.parse(data);
		document.getElementById("path").textContent = extracted.path;		
	}});	
}

The PHP, in the utility1.php file, looks like this:

<?php
function retrieveParameterValue($key, $default)
{
	return (isset($_POST[$key])) ? $_POST[$key] : $default;
}

require_once ('../includes/data.php');	# make $projects array accessible to this script

$projectname = retrieveParameterValue('projectname', 'default project');
$scripttype = retrieveParameterValue('scripttype', 'default script type');

$path = $projects[$projectname][$scripttype];

$array = ['path' => $path];
	
echo json_encode($array);
?>
Here are the results: enter image description here

enter image description here

enter image description here

enter image description here