Reputation: 6068

Using AJAX to Call PHP method within PHP file

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?

Upvotes: 0

Answers (3)

Greg Borbonus

Reputation: 1384

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.

Upvotes: 0

cssyphus

Reputation: 40058

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

Upvotes: 2

Abdul Mannan - Data Engineer

Reputation: 1092

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 
}

Upvotes: 0

Using AJAX to Call PHP method within PHP file

Answers (3)

Related Questions