This question already has answers here:
jquery can't get data attribute value
(6 answers)
Closed 3 years ago.
I have records that are being looped through and sent to the html file via json_encode. For each record, I have a data-attribute that I am storing the record id. What I am trying to accomplish is when the user clicks "Edit" (.recEdit) then I can obtain the id (data-recId). I am trying to do this with a click function, utilizing the $(this) and parent() functions.
What am I doing wrong?
Here is the looped code from the php file:
$html .= '<div class="recentProjectCont" data-recId="'.$recProjId.'">';
$html .= '<div class="recProjInfoCont">';
$html .= '<div class="recInfoCont1">';
$html .= '<span class="recProjName recBaseFormat">'.$recProjName.'</span>';
$html .= '</div>';
$html .= '<div class="recInfoCont2">';
$html .= '<span class="recInfoStat recBaseFormat">'.$recProjStat.'</span>';
$html .= '</div>';
$html .= '</div>';
$html .= '<div class="recEdit">Edit</div>';
$html .= '</div>';
Then the click function where I am attempting to obtain the id.
$(document.body).on('click', '.recEdit' ,function() {
var projID = $(this).parent().data('recId');
console.log('Project ID is..... ' + projID);
});
The names of data attributes get normalised to lowercase in jQuery's internal cache, so you need to use data('recid') instead of data('recId')
$(document.body).on('click', '.recEdit', function() {
var projID = $(this).parent().data('recid');
console.log('Project ID is..... ' + projID);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="recentProjectCont" data-recId="$recProjId">
<div class="recProjInfoCont">
<div class="recInfoCont1">
<span class="recProjName recBaseFormat">$recProjName</span>
</div>
<div class="recInfoCont2">
$html
<span class="recInfoStat recBaseFormat">$recProjStat</span>
</div>
</div>
<div class="recEdit">Edit</div>
$html
</div>
If you don't stick to using $(this), you can try to provide onClick handler function like this:
function(event) {
var projID = $(event.target).parent().data('recId');
console.log('Project ID is..... ' + projID);
}
You can change a little your approach in this way - change before last php line to
$html .= '<div class="recEdit" onclick="clicked('.$recProjId.')">Edit</div>';
Then remove jquery handler and add simple
function clicked(projID) {
console.log('Project ID is..... ' + projID);
}
function clicked(projID) {
console.log('Project ID is..... ' + projID);
}
.recEdit{ padding: 10px; background: #fdf; width: 30px; cursor:pointer }
<div class="recentProjectCont" data-recId="666">
<div class="recProjInfoCont">
<div class="recInfoCont1">
<span class="recProjName recBaseFormat">My-project</span>
</div>
<div class="recInfoCont2">
<span class="recInfoStat recBaseFormat">stat_123</span>
</div>
</div>
<div class="recEdit" onclick="clicked(666)">Edit</div>
</div>
I will insert new boostrap card inside my page. My problem, I have not success to include a new card inside my content.
When i click on insert, the card is not displayed
Below the code
display a new boostrap card if record exist
<div class="row">
<button type="button" class="btn btn-primary" aria-label="Insert" id="insert">
<span aria-hidden="true">Insert</span>
</button>
</div>
<div class="row">
<ul class="row list-unstyled" id="list">
<?php
$i = 0;
while ($QoptionValue->fetch()) {
.....
?>
<li class="col-md-4" id="element'<?php echo $i; ?>">
<div class="card">
<h4 class="card-header">Card title <a class="close" href="#">×</a></h4>
<div class="card-body">
<div class="card-text">
<div><?php ..... ?></div>
</div>
</div>
</li>
<?php
$i++;
}
?>
</ul>
</div>
Display a new card or first card inside the content
<?php
$card = '<li class="col-md-4" id="element0">';
$card .= '<div class="card">';
$card .= '<h4 class="card-header">Card title <a class="close" href="#">Remove</a></h4>';
$card .= '<div class="card-body">';
$card .= '<div class="card-text">';
$card .= '<div>';
for ($l=0, $n=count($languages); $l<$n; $l++) {
$card .= Language->getImage($languages[$l]['code']) . ' ' . HTML::inputField('option_value[' . $i . '][option_value_description][name][' . $l . ']', $options_name) . '<br />';
$card .= HTML::hiddenField('option_value[' . $i . '][option_value_description][language_id][' . $l . ']', $options_name);
}
$card .= '</div>';
$card .= '<div>';
$card .= HTML::inputField('option_value[' . $i . '][sort_order]', $QoptionValue->value('sort_order'), 'id="sort_order[' . $i . ']"');
$card .= '</div>';
$card .= '<div>';
$card .= '</div>';
$card .= '</div>';
$card .= '</li>';
?>
<script>
$('#insert').click(function(){
$( "ul#list" ).append( "<?php echo $card; ?>" );
});
</script>
<script type="text/javascript">
$('.close').click(function(){
var $target = $(this).parents('li');
$target.hide('slow', function(){ $target.remove(); });
})
</script>
console error
it seems on this line has a problem :
$( "ul#list" ).append(""<li class=\"col-md-4\" id=\"element0\"><div class=\"row\"><div class=\"col-md-12\"><div class=\"card\"><h4 class=\"card-header\"><a class=\"close\" href=\"#\">Supprimer<\/a><\/h4><div class=\"card-body\">Nom de la valeur<div><img src=\"http:\/\/localhost\/test_option\/shop\/sources\/third_party\/flag-icon-css\/flags\/4x3\/gb.svg\" alt=\"Anglais\" title=\"Anglais\" width=\"16\" height=\"12\" \/> <input type=\"text\" name=\"option_value[0][option_value_description][name][0]\" class=\"form-control\" \/><br \/><input type=\"hidden\" name=\"option_value[0][option_value_description][language_id][0]\" \/><img src=\"http:\/\/localhost\/test_option\/shop\/sources\/third_party\/flag-icon-css\/flags\/4x3\/fr.svg\" alt=\"Francais\" title=\"Francais\" width=\"16\" height=\"12\" \/> <input type=\"text\" name=\"option_value[0][option_value_description][name][1]\" class=\"form-control\" \/><br \/><input type=\"hidden\" name=\"option_value[0][option_value_description][language_id][1]\" \/><\/div><div class=\"row\"><span class=\"col-md-4\">Ordre de tri<\/span><\/div><\/div><\/div><\/div><\/div><\/li>"");
Uncaught SyntaxError: missing ) after argument list
It's good practice to pass any PHP variable to javascript using json_encode(). Using json_encode() you'll always get a properly formatted JavaScript object with the quotes escaped.
<script>
$('#insert').click(function(){
$( "ul#list" ).append(<?php echo json_encode($card); ?>);
});
</script>
This script below allow to validate all checkox inside a form.
My problem, I need to have just one to validate.
What is the element to change to verify if just one chabox is validated ?
<?php
$display_option .= '<div class="form-group ProductsInfoOptionCheckbox" options>';
$display_option .= '<label class="control-label ProductsInfoOptionCheckbox" for="input-option' . $option['products_option_id'] . '">' . $option['name'] . '</label>';
foreach ($option['products_option_value'] as $t => $option_value) {
$display_option .= '<div class="checkbox">';
$display_option .= '<ul class="list-unstyled ProductsInfoOptionCheckbox">';
$display_option .= '<li class="ProductsInfoOptionCheckbox">';
$display_option .= HTML::checkboxField('id[' . $option['products_option_id'] . ']', $option_value['products_option_value_id'], $checked_attribute, 'required');
}
$display_option .= '<div>';
echo $display_option;
?>
<script>
$(function(){
var requiredCheckboxes = $('.options :checkbox[required]');
requiredCheckboxes.change(function(){
if(requiredCheckboxes.is(':checked')) {
requiredCheckboxes.removeAttr('required');
} else {
requiredCheckboxes.attr('required', 'required');
}
});
});
</script>
I solved this by using:
$display_option .= '<div class="form-group ProductsInfoOptionCheckbox options">';
I have a loop i create form with, but the problem is im not sure how to pass the data from the form to the server.
this is my form:
foreach ($appeals as $appeal) {
$attached_file = $appeal["file_dir"];
$output = '<div class="appeal">';
$output .= '<div class="form-response"><form class="form-signin" method="post">';
$output .= '<div class="form-group">';
$output .= '<input type="text" class="form-control" name="first_name" value="'.$appeal['course_id'].'" required readonly/>';
$output .= '</div>';
$output .= '<div class="form-group">';
$output .= '<label>Student: '.$appeal['first_name']." ".$appeal['last_name'].'</label>';
$output .= '</div>';
$output .= '<div class="form-group">';
$output .= '<label>Submit Date: '.$appeal['submit_date'].'</label>';
$output .= '</div>';
$output .= '<div class="form-group">';
$output .= '<label>Message: '.$appeal['content'].'</label>';
$output .= '</div>';
$output .= '<div class="form-group">';
$output .= '<label for="response">Message:</label>';
$output .= '<textarea class="form-control" name="response" rows="5" required></textarea>';
$output .= '</div>';
$output .= '<button type="submit" name="approve" value="'.$appeal['appeal_id'].'" class="btn btn-default">Approve</button>';
$output .= '<button type="submit" name="decline" value="'.$appeal['appeal_id'].'" class="btn btn-default">Decline</button>';
$output .= '</form></div>';
$output .= '</div>';
echo $output;
}
considering the fact i don't want the data to be visible in the client side, is there a way to add onclick="someFunc(...) to the submit buttons and than pass the variables from $appeal to this function without showing them in the client, or should i consider passing the data using AJAX, but than again how can i call a function with the data from $appeal without revealing it in the client side? thx
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?
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
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
}
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.