Using AJAX to Call PHP method within PHP file
Question
Right now I have a dynamic form of sorts that allows a user to pick a category, type, and a subtype. This information will then be used in a PHP function (hopefully). All of this is within a PHP file.
I am hoping to use AJAX to call a function within that PHP file. I've seen ways to call a PHP file with AJAX from within an HTML document, but not from within a PHP document.
This is the relevant portion of my configs.php :
<?php
use FW\Config;
require_once 'setup.php';
function build($category, $type, $subtype){
//WANT TO GET HERE
}
function getTypes($dir) {
return array_diff(scandir($dir), array('..', '.'));
}
function getSubTypes($dir, $type) {
return array_diff(scandir("$dir//$type"), array('..', '.'));
}
function getVersions($dir, $type, $subType) {
return array_diff(scandir("$dir//$type//$subType"), array('..', '.'));
}
function getFileContents($dir, $type, $subtype, $file){
$path = "$dir/$type/$subtype/$file.txt";
$openFile = fopen($path, "r");
$content = fread($openFile, filesize($path));
fclose($openFile);
return split("/", $content)[0];
}
$project_dir = Config::$appConfig['project_file_dir']['scriptPath'];
$workflow_dir = Config::$appConfig['workflow_file_dir']['scriptPath'];
$project_types = getTypes($project_dir);
$project_subtypes = array();
$project_versions = array();
$workflow_types = getTypes($workflow_dir);
$workflow_subtypes = array();
$workflow_versions = array();
foreach ($project_types as $type) {
$project_subtypes[$type] = getSubTypes($project_dir, $type);
//@todo remove once folder structure is all setup
if ($type !== 'CD') continue;
foreach ($project_subtypes[$type] as $subType) {
$project_versions[$subType] = getVersions($project_dir, $type, $subType);
}
}
foreach ($workflow_types as $type) {
$workflow_subtypes[$type] = getSubTypes($workflow_dir, $type);
foreach ($workflow_subtypes[$type] as $subType) {
$workflow_versions[$subType] = getVersions($workflow_dir, $type, $subType);
}
}
function makeInfoSection($type, $subType, $versions, $dir) {
// list versions
$html .= '<h4>Available Versions</h4>';
$html .= '<ul class="list-group">';
foreach ($versions as $v) {
if (strpos($v, '.txt')) continue;
$html .= '<li class="list-group-item">';
$html .= '<span class="badge"><a href="#" style="color:orange">';
$html .= '<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"';
$html .= 'onclick="build()">'; //@todo add onclick to trigger build()
$html .= '</span></a></span>';
$html .= $v;
$html .= '</li>';
}
$html .= '</ul>';
return $html;
}
function makeSection($parent, $prefix, $type, $subTypes) {
$headingID = 'heading-'.$type;
$bodyID = 'collapse-'.$prefix.$type;
$html = '<div class="panel panel-default" style="margin-bottom:10px;">';
$html .= '<div class="panel-heading" role="tab" id="'.$headingID.'">';
$html .= '<h4 class="panel-title">';
$html .= '<a role="button" data-toggle="collapse" data-parent="'.$parent;
$html .= '" href="#'.$bodyID.'" aria-expanded="true"';
$html .= 'aria-controls="'.$bodyID.'">'.$type;
$html .= '</a></h4></div>';
$html .= '<div id="'.$bodyID.'" class="panel-collapse collapse in" ';
$html .= 'role="tabpanel" aria-labelledby="'.$headingID.'">';
$html .= '<div class="list-group">';
foreach ($subTypes as $subType) {
$target = "tab-".$prefix.$type."-".$subType;
$html .= '<a href="#'.$target.'" class="list-group-item" ';
$html .= 'aria-controls="'.$target.'" role="tab" data-toggle="tab"';
$html .= '>'.$subType.'</a>';
}
$html .= '</div></div></div>';
return $html;
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
.list-group-item.active, .list-group-item.active:hover {
background-color: white;
color: black;
}
</style>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Configuration Management</h1>
</div>
<div class="row">
<div class="col-md-5 col-md-push-1 col-sm-6">
<ul class="nav nav-tabs" role="tablist" id="config-tabs">
<li role="presentation" class="active">
<a href="#project_list" aria-controls="project_list" role="tab" data-toggle="tab">
<h4>Project</h4>
</a>
</li>
<li role="presentation">
<a href="#workflow_list" aria-controls="workflow_list" role="tab" data-toggle="workflow_list">
<h4>Workflow</h4>
</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active panel-group" id="project_list" role="tablist" aria-multiselectable="true">
<?php
foreach ($project_types as $type) {
echo makeSection( '#project_list', 'project-',$type, $project_subtypes[$type]);
}
?>
</div>
<div role="tabpanel" class="tab-pane panel-group" id="workflow_list" role="tablist" aria-multiselectable="true">
<?php
foreach ($workflow_types as $type) {
echo makeSection( '#workflow_list', 'workflow-',$type, $workflow_subtypes[$type]);
}
?>
</div>
</div>
</div>
<div class="col-md-5 col-md-push-1 col-sm-6">
<div id="tabs" class="tab-content" style="padding:0em 0em 0em 1em">
<?php
foreach ($project_types as $type) {
// @TODO remove once folder structure is all setup
if ($type !== 'CD') continue;
foreach ($project_subtypes[$type] as $subType) {
$html = "<div role ='tabpanel' class='tab-pane'";
$html .= "id='tab-project-".$type."-".$subType."'>";
$html .= makeInfoSection($type, $subType, $project_versions[$subType], $project_dir);
$html .= "</div>";
echo $html;
}
}
foreach ($workflow_types as $type) {
foreach ($workflow_subtypes[$type] as $subType) {
$html = "<div role ='tabpanel' class='tab-pane'";
$html .= "id='tab-workflow-".$type."-".$subType."'>";
$html .= makeInfoSection($type, $subType, $workflow_versions[$subType], $workflow_dir);
$html .= "</div>";
echo $html;
}
}
?>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="12345" crossorigin="anonymous"></script>
<script type="text/javascript">
function build (url, params, cb) {
url += "/buildWithParameters";
$.ajax({
type: 'POST',
url: url,
data: params,
success: cb
});
};
$('.collapse').collapse();
$('.list-group a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
$('#config-tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
</script>
</body>
</html>
In the code above, I want to call the PHP function build . I have a JavaScript function build() which is called at the appropriate time and should have the AJAX to make the call. How would I go about this? And how would I pass the params?
3 answers
solution1
2 ACCPTED 2016-03-18 17:48:30
Why not just have a separate file for the AJAX routine to call?
Anyway, to answer your question:
AJAX will send a data string to your PHP file, either via GET or POST. Standardize on one -- many folks prefer post.
As you know, the AJAX code block looks something like this (you will need to send the information required by your function):
var var_value = $('#my_element').val();
var cat = $('#category_element').val();
var typ = $('#type_element').val();
var sub = $('#subtype_element').val();
$.ajax({
type: 'post',
url: 'your_file.php',
data: 'var_name=' +var_value+ '&cat=' +cat+ '&typ=' +typ+ '&sub=' +sub,
success: function(d){
if (d.length) alert(d); //for testing - alerts anything your function ECHOs
}
});//end ajax
In your PHP file, just trap that var:
<?php
//Your existing PHP file contents go here. At bottom add:
if ( isset($_POST('var_name') ){
$category = $_POST('cat');
$type = $_POST('typ');
$subtype = $_POST('sub');
build($category, $type, $subtype);
}
See this post for some useful AJAX tips and simple examples
solution2
0 2016-03-18 17:43:14
place below code after the php tag starts.
// check if ajax call
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
// call your php function here and return some data
$data = someFunction();
echo json_encode($data); // return data back in json format, can return in other format as well.
exit(); // do use exit here otherwise it will return the whole file code
}
solution3
0 2016-03-18 17:47:05
Try this:
<?php
use FW\Config;
require_once 'setup.php';
//Check the get variable for the function being called.
if(isset($_GET['func']) AND function_exists($_GET['func'])){
$func=$_GET['func'];
$func();
//This is an ajax call, we really should exit here so we can let $func handle the ajax output;
exit;
}
function build($category, $type, $subtype){
//WANT TO GET HERE
}
function getTypes($dir) {
return array_diff(scandir($dir), array('..', '.'));
}
function getSubTypes($dir, $type) {
return array_diff(scandir("$dir//$type"), array('..', '.'));
}
function getVersions($dir, $type, $subType) {
return array_diff(scandir("$dir//$type//$subType"), array('..', '.'));
}
function getFileContents($dir, $type, $subtype, $file){
$path = "$dir/$type/$subtype/$file.txt";
$openFile = fopen($path, "r");
$content = fread($openFile, filesize($path));
fclose($openFile);
return split("/", $content)[0];
}
$project_dir = Config::$appConfig['project_file_dir']['scriptPath'];
$workflow_dir = Config::$appConfig['workflow_file_dir']['scriptPath'];
$project_types = getTypes($project_dir);
$project_subtypes = array();
$project_versions = array();
$workflow_types = getTypes($workflow_dir);
$workflow_subtypes = array();
$workflow_versions = array();
foreach ($project_types as $type) {
$project_subtypes[$type] = getSubTypes($project_dir, $type);
//@todo remove once folder structure is all setup
if ($type !== 'CD') continue;
foreach ($project_subtypes[$type] as $subType) {
$project_versions[$subType] = getVersions($project_dir, $type, $subType);
}
}
foreach ($workflow_types as $type) {
$workflow_subtypes[$type] = getSubTypes($workflow_dir, $type);
foreach ($workflow_subtypes[$type] as $subType) {
$workflow_versions[$subType] = getVersions($workflow_dir, $type, $subType);
}
}
function makeInfoSection($type, $subType, $versions, $dir) {
// list versions
$html .= '<h4>Available Versions</h4>';
$html .= '<ul class="list-group">';
foreach ($versions as $v) {
if (strpos($v, '.txt')) continue;
$html .= '<li class="list-group-item">';
$html .= '<span class="badge"><a href="#" style="color:orange">';
$html .= '<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"';
$html .= 'onclick="build()">'; //@todo add onclick to trigger build()
$html .= '</span></a></span>';
$html .= $v;
$html .= '</li>';
}
$html .= '</ul>';
return $html;
}
function makeSection($parent, $prefix, $type, $subTypes) {
$headingID = 'heading-'.$type;
$bodyID = 'collapse-'.$prefix.$type;
$html = '<div class="panel panel-default" style="margin-bottom:10px;">';
$html .= '<div class="panel-heading" role="tab" id="'.$headingID.'">';
$html .= '<h4 class="panel-title">';
$html .= '<a role="button" data-toggle="collapse" data-parent="'.$parent;
$html .= '" href="#'.$bodyID.'" aria-expanded="true"';
$html .= 'aria-controls="'.$bodyID.'">'.$type;
$html .= '</a></h4></div>';
$html .= '<div id="'.$bodyID.'" class="panel-collapse collapse in" ';
$html .= 'role="tabpanel" aria-labelledby="'.$headingID.'">';
$html .= '<div class="list-group">';
foreach ($subTypes as $subType) {
$target = "tab-".$prefix.$type."-".$subType;
$html .= '<a href="#'.$target.'" class="list-group-item" ';
$html .= 'aria-controls="'.$target.'" role="tab" data-toggle="tab"';
$html .= '>'.$subType.'</a>';
}
$html .= '</div></div></div>';
return $html;
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
.list-group-item.active, .list-group-item.active:hover {
background-color: white;
color: black;
}
</style>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Configuration Management</h1>
</div>
<div class="row">
<div class="col-md-5 col-md-push-1 col-sm-6">
<ul class="nav nav-tabs" role="tablist" id="config-tabs">
<li role="presentation" class="active">
<a href="#project_list" aria-controls="project_list" role="tab" data-toggle="tab">
<h4>Project</h4>
</a>
</li>
<li role="presentation">
<a href="#workflow_list" aria-controls="workflow_list" role="tab" data-toggle="workflow_list">
<h4>Workflow</h4>
</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active panel-group" id="project_list" role="tablist" aria-multiselectable="true">
<?php
foreach ($project_types as $type) {
echo makeSection( '#project_list', 'project-',$type, $project_subtypes[$type]);
}
?>
</div>
<div role="tabpanel" class="tab-pane panel-group" id="workflow_list" role="tablist" aria-multiselectable="true">
<?php
foreach ($workflow_types as $type) {
echo makeSection( '#workflow_list', 'workflow-',$type, $workflow_subtypes[$type]);
}
?>
</div>
</div>
</div>
<div class="col-md-5 col-md-push-1 col-sm-6">
<div id="tabs" class="tab-content" style="padding:0em 0em 0em 1em">
<?php
foreach ($project_types as $type) {
// @TODO remove once folder structure is all setup
if ($type !== 'CD') continue;
foreach ($project_subtypes[$type] as $subType) {
$html = "<div role ='tabpanel' class='tab-pane'";
$html .= "id='tab-project-".$type."-".$subType."'>";
$html .= makeInfoSection($type, $subType, $project_versions[$subType], $project_dir);
$html .= "</div>";
echo $html;
}
}
foreach ($workflow_types as $type) {
foreach ($workflow_subtypes[$type] as $subType) {
$html = "<div role ='tabpanel' class='tab-pane'";
$html .= "id='tab-workflow-".$type."-".$subType."'>";
$html .= makeInfoSection($type, $subType, $workflow_versions[$subType], $workflow_dir);
$html .= "</div>";
echo $html;
}
}
?>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="12345" crossorigin="anonymous"></script>
<script type="text/javascript">
function build (url, params, cb) {
url += "/buildWithParameters";
//Added so we set the $_GET['func']
url += "?func=build";
$.ajax({
type: 'POST',
url: url,
data: params,
success: cb
});
};
$('.collapse').collapse();
$('.list-group a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
$('#config-tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
</script>
</body>
</html>
I only altered 2 sections of your code.
Just below the require setup.php and right inside your Javascript build function.
If you need to pass parameters to it, Your current call to build is empty, you're calling build(), but build wants 3 arguments.
So, with url being empty(or undefined in this case), you may find that the url is not going to the correct location. Params is empty as well as cb. So all of those may need to be checked inside your function with
if(typeof VARIABLE == "undefined" ) VARIABLE="SOMETHING"; //populate, you can also call a function here to get data.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Call php file using AJAX
Using Ajax to call PHP object method in the same file
How to call php class method using ajax
Is it possible to call an entire php file using ajax?
Using ajax to call php
Use of AJAX call to pass JS variable to PHP from within the same file (using EOD tags)
Trying to post a javascript variable to a php file using the ajax method : POST but getting an undefined index in $POST array within php file
How to call a php file using ajax and is my php code correct?
How to call a PHP function within a page using AJAX
Call a PHP file with AJAX in Magento
Related Tags