I am designing CI application and is stuck in ajax query. Basically the function which i have written is taking id as null when save button is pressed even though when i click on edit button it shows its picking up the correct id. Looks like I have some error in function. BELOW IS THE FUNCTION WHICH i HAVE WRITTEN :
public function ajax_update()
{
$this->_validate();
$data = array(
//'firstName' => $this->input->post('firstName'),
//'lastName' => $this->input->post('lastName'),
//'gender' => $this->input->post('gender'),
//'address' => $this->input->post('address'),
//'dob' => $this->input->post('dob'),
//'tid' => $this->input->post('tid'),
'name' => $this->input->post('tname'),
);
$this->transport->update(array('tid' => $this->input->post('tid')), $data);
var_dump( $this->input->post());
echo json_encode(array("status" => TRUE));
}
the update function is
public function update($where, $data)
{
$this->db->update($this->table, $data, $where);
return $this->db->affected_rows();
}
View is
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><html lang="en">
<head>
<?php include_once("header.php"); ?>
</head>
<body class="fixed-nav sticky-footer bg-dark">
<!-- Navigation-->
<?php include_once("sidebar.php"); ?>
<div>
<div class="content-wrapper">
<div class="container-fluid">
<!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item active">Manage Transport</li>
</ol>
<!--Button to add Client
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2"><i class="fa fa-plus" style="color:white"></i> Add Transport</button>-->
<button class="btn btn-success" onclick="add_transport()"><i class="glyphicon glyphicon-plus"></i> Add Transport</button>
<br>
<br>
<!-- Example DataTables Card-->
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-table"></i> View Transport Details</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th style="width:90%;">Transport Detail</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Transport Detail</th>
<th>Action</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- /.container-fluid-->
<!-- /.content-wrapper-->
</div>
<!-- Modal to add Transport-->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add Transport Details</h4>
<button type="button" class="close" data-dismiss="modal">x</button>
</div>
<div class="modal-body">
<!--<form role="form" name="form1" action="<?php echo base_url('search/add_trans'); ?>" method="post" autocomplete="on">-->
<form action="#" id="form" class="form-horizontal">
<div class="row">
<div class="col-md-2">
<label>Transport Details</label>
</div>
<div class="col-md-10" id="new_data">
<textarea name="tname" class="form-control" placeholder="Transport Name" rows="5" value=""></textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<!--<input type="submit" name="submit" class="btn btn-primary" value="Submit">-->
<button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal Finishes-->
</div>
<?php include_once 'footer.php'; ?>
<script type="text/javascript">
var save_method; //for save method string
var table;
//set input/textarea/select event when change value, remove class error and remove text help block
$("input").change(function(){
$(this).parent().parent().removeClass('has-error');
$(this).next().empty();
});
$("textarea").change(function(){
$(this).parent().parent().removeClass('has-error');
$(this).next().empty();
});
$("select").change(function(){
$(this).parent().parent().removeClass('has-error');
$(this).next().empty();
});
function add_transport()
{
save_method = 'add';
$('#form')[0].reset(); // reset form on modals
$('.form-group').removeClass('has-error'); // clear error class
$('.help-block').empty(); // clear error string
$('#myModal').modal('show'); // show bootstrap modal
$('.modal-title').text('Add Transport'); // Set Title to Bootstrap modal title
}
function edit_transport(id)
{
//var table = $('#dataTable').DataTable();
// console.log( table.row( id ).data() );
// $("#tid").val(data.tname);
save_method = 'update';
$('#form')[0].reset(); // reset form on modals
$('.form-group').removeClass('has-error'); // clear error class
$('.help-block').empty(); // clear error string
//Ajax Load data from ajax
$.ajax({
url : "<?php echo site_url('transport/ajax_edit/')?>/" + id,
type: "GET",
dataType: "JSON",
success: function(data)
{
// $('[name="id"]').val(data.id);
//$('[name="tid"]').val(data.tid);
$('[name="tname"]').val(data.tname);
// $('[name="firstName"]').val(data.firstName);
//$("#tid").val(data.tname);
//alert(data.tname);
// $('[name="lastName"]').val(data.lastName);
// $('[name="gender"]').val(data.gender);
// $('[name="address"]').val(data.address);
// $('[name="dob"]').datepicker('update',data.dob);
// $('#modal_form').modal('show'); // show bootstrap modal when complete loaded
$('#myModal').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('Edit Transport'); // Set title to Bootstrap modal title
// new_data
//$("#new_data").html('<textarea name="name" class="form-control" placeholder="Transport Name" rows="5" value=""></textarea> <input type="text" name="row_id" value="'+id+'" readonly hidden >');
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}
//function reload_table()
//{
// table.ajax.reload(null,false); //reload datatable ajax
//}
function reload_table() {
table.api().ajax.reload(null, false); //reload datatable ajax
}
function save()
{
$('#btnSave').text('saving...'); //change button text
$('#btnSave').attr('disabled',true); //set button disable
var url;
if(save_method == 'add') {
url = "<?php echo site_url('transport/ajax_add')?>";
} else {
url = "<?php echo site_url('transport/ajax_update')?>";
}
// console.log($('#form').serialize());
// ajax adding data to database
$.ajax({
url : url,
type: "POST",
data: $('#form').serialize(),
dataType: "JSON",
success: function(data)
{
if(data.status) //if success close modal and reload ajax table
{
$('#myModal').modal('hide');
reload_table();
}
else
{
for (var i = 0; i < data.inputerror.length; i++)
{
$('[name="'+data.inputerror[i]+'"]').parent().parent().addClass('has-error'); //select parent twice to select div form-group class and add has-error class
$('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]); //select span help-block class set text error string
}
}
$('#btnSave').text('save'); //change button text
$('#btnSave').attr('disabled',false); //set button enable
//$("#new_data").html('<textarea name="name" class="form-control" placeholder="Transport Name" rows="5" value=""></textarea> ');
reload_table();
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error adding / update data');
$('#btnSave').text('save'); //change button text
$('#btnSave').attr('disabled',false); //set button enable
//$("#new_data").html('<textarea name="name" class="form-control" placeholder="Transport Name" rows="5" value=""></textarea>');
}
});
}
function delete_transport(id)
{
if(confirm('Are you sure delete this data?'))
{
// ajax delete data to database
$.ajax({
url : "<?php echo site_url('transport/ajax_delete')?>/"+id,
type: "POST",
dataType: "JSON",
success: function(data)
{
//if success reload ajax table
$('#myModal').modal('hide');
reload_table();
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error deleting data');
}
});
}
}
function reload_table()
{
//console.log(table);
table.api().ajax.reload( null, false );
}
$(document).ready(function() {
//datatables
table = $('#dataTable').dataTable({
"processing": true, //Feature control the processing indicator.
"serverSide": true, //Feature control DataTables' server-side processing mode.
"order": [], //Initial no order.
// Load data for the table's content from an Ajax source
"ajax": {
"url": "<?php echo site_url('transport/ajax_list')?>",
"type": "POST"
},
//Set column definition initialisation properties.
"columnDefs": [
{
"targets": [ -1 ], //last column
"orderable": false, //set not orderable
},
],
});
});
</script>
</body>
</html>
Any pointers please ?
Related
In presented controller, it's displaying all the users and his attributes(?) such as name, surname, phone and roles. How do I make it that when I select role in checkbox and press "potvrdi"(submit) it submits to database? Do I have to use jquery, ajax?
Thank you
Controller
public function action(Request $request)
{
if ($request->ajax()) {
$query = $request->get('query');
if ($query != '') {
$data = User::where('surname', 'like', '%'.$query.'%')
->orWhere('name', 'like', '%'.$query.'%')
->orWhere('phone', 'like', '%'.$query.'%')
->orderBy('id')
->get();
} else {
$data = User::orderBy('id')
->get();
}
return json_encode($this->generateUserTable($data));
}
}
public function generateUserTable($data)
{
$total_row = $data->count();
$output = "";
if ($total_row > 0) {
foreach ($data as $row) {
$roleNames = '';
$userRoles = $row->roles()->pluck('id')->toArray();
// var_dump($userRoles);
$checked = '';
foreach (Role::all() as $roles1) {
if (in_array($roles1->id, $userRoles)) {
$checked = 'checked="checked"';
}
$roleNames .= $roles1->role != null ? $roles1->role.' '.'<input type="checkbox" '.$checked.' name="role" value="'.$roles1->id.'" class="checkbox" id="checkboxId">'.' ' : '';
}
$output .= '
<tr>
<td>'.$row->surname.'</td>
<td>'.$row->name.'</td>
<td>'.$row->phone.'</td>
<td>'.$roleNames.'</td>
<td><button type="button" id="potvrdi" class="potvrdi-button btn btn-primary" data-id="'.$row->id.'">
<div class="potvrdi">Potvrdi</div>
</button></td>
<td><button type="button" id="rowId" class="remove-button btn btn-danger" data-id="'.$row->id.'">
<div class="close">x</div>
</button></td>
</tr>
';
}
} else {
$output = '
<tr>
<td align="center" colspan="5">Nema podataka</td>
</tr>
';
}
return array(
'table_data' => $output,
'total_data' => $total_row,
);
}
EDIT:
part of html is in controller after $output in generateUserTable
view with js
<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<h2>{{ $modal }}</h2>
</div>
<div class="modal-footer">
<button type="button" class="rem-mod btn btn-secondary" data-dismiss="modal">Zatvori</button>
<button type="button" class="bck-mod test btn btn-danger" data-dismiss="modal">Obriši korisnika</button>
</div>
</div>
</div>
</div>
<!-- users and search bar -->
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Pretraži korisnike</div>
<div class="panel-body">
<div class="form-group">
<input type="text" name="search" id="search" class="form-control" placeholder="Pretraži korisnike" />
</div>
<div class="table-responsive">
<h3 align="center">Broj korisnika: <span id="total_records"></span></h3>
<table id="users" class="table table-striped table-bordered">
<thead>
<tr>
<th>Prezime</th>
<th>Ime</th>
<th>Telefon</th>
<th>Rola</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
Gets data from database
<script>
$(document).ready(function(){
fetch_user_data();
function fetch_user_data(query = ''){
$.ajax({
url:"{{ route('live_search.action') }}",
method:'GET',
data:{query:query},
dataType:'json',
success:function(data)
{
$('tbody').html(data.table_data);
$('#total_records').text(data.total_data);
}
})
}
$(document).on('click', '.potvrdi-button', function(){
post_user_role();
var id = $(this).data('id');
function post_user_role(id){
$.ajax({
url:"{{ route('live_search.action') }}",
method:"GET",
data:{id:id},
dataType:'json',
success:function(data)
{
$('tbody').html(data.table_data);
$('#total_records').text(data.total_data);
}
})
}
})
$(document).on('keyup', '#search', function(){
var query = $(this).val();
fetch_user_data(query);
});
Modal js
$('#users').on('click', '.remove-button', function(){
var id = $(this).data('id');
$(".test").attr('data-id', id);
$("#deleteModal").modal("show");
});
$(document).on('click', '.bck-mod', function(){
var id = $(this).data('id');
$.ajax({
//url:"{{ route('live_search.destroy') }}",
url:"/live_search/destroy",
method:"get",
data:{id:id},
dataType:'json',
success:function(data)
{
$('tbody').html(data.table_data);
$('#total_records').text(data.total_data);
},
error: function(data)
{
console.log(data);
}
})
});
});
</script>
I prepared sample fiddle for you. I used dummy values for your users table, also I used select instead of checkbox, but you should follow the same approach.
$(document).on('click', '.potvrdi-button', function(e) {
var value = $(this).closest('tr').find('select[name="role"]').val();
$.ajax({
url: "{{ route('live_search.action') }}",
method: "GET",
data: {
value: value
},
dataType: 'json',
success: function(data) {
$('tbody').html(data.table_data);
$('#total_records').text(data.total_data);
}
})
})
Check your method. Right now it's a GET. You probably want it to be a POST. Check your laravel router to make sure its responding to the POST method.
i am trying to show ajax returned success data in bootstrap popup modal when clicking on the link.i tried but i have no idea where i have to call datatable function.
In index.php i have a modal div and ajax function to call data.php. data.php returning json encoded values.
index.php
Show Popup
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h5 class="modal-title"><i class="glyphicon glyphicon-list"></i> Stone Details</h5>
</div>
<div class="modal-body">
<div class="fetched-data">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function (e) {
var rowid = '1';
var reference = '2';
var nemix_id = '3';
$.ajax({
type : 'post',
url : 'data.php', //Here you will fetch records
data : 'rowid='+ rowid+'&reference='+reference+'&nemix_id='+nemix_id, //Pass $id
success : function(data){
$('#example').DataTable( {
"ajax": data
});
}
});
});
} );
data.php
$sql_sel = mysqli_query($con,"SELECT * FROM `table`");
$array = array();
$array['data'] = array();
while($res_sel = mysqli_fetch_row($sql_sel)){
$array['data'][] = $res_sel;
}
echo json_encode($array);
i figure it out...here i am sharing for others
var table = $('#example').DataTable( {
"ajax": {
"type" : "GET",
"url" : "data.php",
"dataSrc": function ( json ) {
return json.data;
}
}
});
If you need to show modal on load try this:
$(document).ready(function() {
// show the modal onload
$('#myModal').modal({
show: true
});
$('#myModal').on('show.bs.modal', function (e) {
var rowid = '1';
var reference = '2';
var nemix_id = '3';
$.ajax({
type : 'post',
url : 'data.php', //Here you will fetch records
data : 'rowid='+ rowid+'&reference='+reference+'&nemix_id='+nemix_id, //Pass $id
success : function(data){
$('#example').DataTable( {
"ajax": data
});
}
});
});
});
I want to terminate a employee from the system. When clicks on terminate button it will popup a moadal asking whether wants to terminate or cancel. If terminate database value resign should be updated as 0, but right now button does not working.
Here is my code
controller
public function ajax_list()
{
$list = $this->employees->get_datatables();
$data = array();
$no = $_POST['start'];
foreach ($list as $emp) {
$no++;
$row = array();
$row[] = $emp->employee_id;
$row[] = $emp->name;
$jid = $emp->job_title;
$desigdata = $this->employees->GetJobTitlebyID($jid);
$row[] = $desigdata->desc;
$did = $emp->department;
$deptdata = $this->employees->GetDepartmentbyID($did);
$row[] = $deptdata->title;
$secid = $emp->section;
$secdata = $this->employees->GetSectionbyID($secid);
$row[] = $secdata->desc;
//add html for action
$row[] = '<a class="btn btn-sm btn-primary" href="javascript:void()" onclick="terminate_emp('."'".$emp->id."'".')"><i class="glyphicon glyphicon-pencil"></i> Terminate</a>';
$data[] = $row;
}
$output = array(
"draw" => $_POST['draw'],
"recordsTotal" => $this->employees->count_all(),
"recordsFiltered" => $this->employees->count_filtered(),
"data" => $data,
);
echo json_encode($output);
}
public function ajax_terminate()
{
$this->_validate();
$data = array(
'resign' => $this->input->post('resign'),
);
$this->employees->update(array('id' => $this->input->post('id')), $data);
echo json_encode(array("status" => TRUE, "id" => $this->input->post('id')));
}
Model
function terminate_emp($data)
{
$this->db->where('resign', 0);
$this->db->update('employees', $data);
}
View
function terminate_emp(id)
{
save_method = 'update';
$('#form')[0].reset();
$('.form-group').removeClass('has-error');
$('.help-block').empty();
//Ajax Load data from ajax
$.ajax({
url : "<?php echo site_url('employees_con/ajax_terminate/')?>/" + id,
type: "GET",
dataType: "JSON",
success: function(data)
{
$('[name="id"]').val(data.id);
if(data.resign == 1)
{
//$('[name="resign"]').val(data.resign);
$('#resign').prop('checked', true);
}
$('[name="resign"]').val(data.resign);
$('#modal_formterminate').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('Terminate Employee'); // Set title to Bootstrap modal title
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}
<div class="modal fade" id="modal_formterminate" role="dialog">
<div class="modal-dialog modal-full" style="max-width: 600px">
<div class="modal-content">
<div class="modal-header bg-blue-steel bg-font-blue-steel">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title bold uppercase">Person</h3>
</div>
<div class="modal-body form">
<form action="#" id="form" class="form-horizontal">
<input type="hidden" value="" name="id"/>
<div class="form-body">
<div id="empWizard">
<p style="color: #0000cc"><b>Are You sure to Terminate this employee</b></p>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnSaveterminate" onclick="save()" class="btn btn-primary">Terminate</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
In controller
$this->employees->update(array('id' => $this->input->post('id')), $data);
You are passing two parameters to update function of your model, one is an array and the other one $data that is also an array.
But In Model,
function terminate_emp($data)
{
$this->db->where('resign', 0);
$this->db->update('employees', $data);
}
you are just accepting one parameter in the update function.
First of all you are making GET request through AJAX and on Controller function ajax_terminate() you are accessing variables using POST. You resign value is not passing through ajax and you are trying to get on controller function ajax_terminate(). See below code:-
function terminate_emp(id)
{
save_method = 'update';
$('#form')[0].reset();
$('.form-group').removeClass('has-error');
$('.help-block').empty();
//Ajax Load data from ajax
$.ajax({
url : "<?php echo site_url('employees_con/ajax_terminate/')?>/",
type: "POST",
dataType: "JSON",
data: {id:id,resign:YOUR_RESIGN_VALUE}
success: function(data)
{
$('[name="id"]').val(data.id);
if(data.resign == 1)
{
//$('[name="resign"]').val(data.resign);
$('#resign').prop('checked', true);
}
$('[name="resign"]').val(data.resign);
$('#modal_formterminate').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('Terminate Employee'); // Set title to Bootstrap modal title
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}
Change Model to
function terminate_emp($where,$data)
{
$this->db->where($where);
$this->db->update('employees', $data);
}
I have following html markup:
<button class="btn btn-success" id="search"><span class="glyphicon glyphicon-search"></span> Search</button>
<div class="row text-center" style="margin-top: 50px;">
<div class="col-md-12">
<div id="content-area"></div>
</div>
</div>
I want to load a page.php inside #content-area. This is the jQuery I used for this:
$("#search").click(function(){
$("#content-area").load("page.php");
});
The problem is page.php is not loading inside #content-area but it loads as a new page itself. I want page.php to load inside #content-area. Please help.
//you have to make ajax call to get content without page load.
$("#search").click(function(){
$.ajax({
url: 'page.php', // point to server-side PHP script
dataType: 'json', // what to expect back from the PHP script, if anything
type: 'POST',
success: function (data) {
if (data.status === 'success')
{
$("#content-area").html(data);
}
else if (data.status === 'error')
{
alert(data.message);
}
},
error: function (e) {
return false;
Msg.show('Something went wrong, Please try again!','danger', 7000);
}
});
});
I have tried below code its working fine for me.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<button class="btn btn-success" id="search"><span class="glyphicon glyphicon-search"></span> Search</button>
<div class="row text-center" style="margin-top: 50px;">
<div class="col-md-12">
<div id="content-area"></div>
</div>
</div>
<script>
$("#search").click(function(){
$("#content-area").load("test1.php");
});
</script>
I have a view which shows a table with rows of data from a local wamp database. Each row has a View, Edit and Delete button which allows a user to View, Edit and Delete records respectively.
Clicking on a row's Delete button will bring up a confirmation modal and is deleted when the modal's Delete button is clicked.
Right now, clicking on the Delete button throws up these errors:
Warning: setState(...): You passed an undefined or null state object; instead, use forceUpdate().
Uncaught TypeError: this.setState(...) is not a function
I also get a warning when trying to bind a variable:
Warning: bind(): React component methods may only be bound to the component instance. See GamePlatformTable
I've tried using forceUpdate in place of setState from stuff I've been searching, but I get the same 2nd errors. If it helps, I'm using php, CodeIgniter 3.0.3 and native React 0.14.3. I'm still relatively new to React, and thanks for helping.
Here's my code:
View:
<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<?php
$this->load->view("templates/meta_common");
$this->load->view("templates/css_common");
?>
<title>Video Game Portal Admin</title>
</head>
<body>
<div class="container">
<?php $this->load->view("admin/admin_navbar"); ?>
<div class="page-header">
<h1>
<i class="text-info fa fa-file-text-o"></i> Browse Game Platforms
<span class="badge">REACT JS</span>
<button onclick="window.location.replace('<?= site_url("admin/game_platform/add_game_platform/") ?>')" type="button"
class="btn btn-danger"><i class="fa
fa-plus"></i> Add Game Platform
</button>
</h1>
</div>
<?php $this->load->view("admin/template_user_message"); ?>
<div id="GamePlatformTable">
</div>
<?php $this->load->view("admin/admin_footer"); ?>
</div>
<?php $this->load->view("templates/js_common"); ?>
<script src="<?=RESOURCES_FOLDER?>js/react.js"></script>
<script src="<?=RESOURCES_FOLDER?>js/react-dom.js"></script>
<script src="<?=RESOURCES_FOLDER?>js/JSXTransformer.js"></script>
<script src="<?=RESOURCES_FOLDER?>jsx/BrowseGamePlatform.js" type="text/jsx;harmony=true"></script>
<script type="text/jsx">
var gamePlatforms = <?=json_encode($game_platforms)?>;
ReactDOM.render(
<GamePlatformTable
gamePlatforms = {gamePlatforms}
siteUrl = "<?=site_url()?>"
/>,
document.getElementById("GamePlatformTable")
);
</script>
External React:
The error occurs in the deleteButtonClicked function of GamePlatformTable.
var rowIndex = 0;
var GamePlatformRow = React.createClass({
render: function () {
++rowIndex;
var developer = !this.props.gamePlatform.developer || this.props.gamePlatform.developer == "none" ?
<span className="text-placeholder">none</span> : this.props.gamePlatform.developer;
var year_intro = !this.props.gamePlatform.year_intro || this.props.gamePlatform.year_intro == "0" ?
<span className="text-placeholder">0</span> : this.props.gamePlatform.year_intro;
var logo_img = this.props.gamePlatform.logo_url ?
<img className="img-rounded" src={this.props.siteUrl + "/uploads/" + this.props.gamePlatform.logo_url}
alt={this.props.gamePlatform.abbr} width="50px" height="50px"/> :
<span className="text-placeholder">no logo</span>;
var view_action = <a
href={this.props.siteUrl + "/admin/game_platform/view_game_platform/" + this.props.gamePlatform.platform_id}
type="button" className="btn btn-default"><i className="fa fa-eye"></i> View</a>;
var edit_action = <a
href={this.props.siteUrl + "/admin/game_platform/view_game_platform/" + this.props.gamePlatform.platform_id}
type="button" className="btn btn-default"><i className="fa fa-file-text-o"></i> Edit</a>;
return (
<tr>
<td>{rowIndex}</td>
<td>{this.props.gamePlatform.platform_name}</td>
<td><span className="badge">{this.props.gamePlatform.abbr}</span></td>
<td>{logo_img}</td>
<td>{developer}</td>
<td>{year_intro}</td>
<td>
{view_action}
{edit_action}
<button type="button" className="btn btn-default"
onClick={this.props.deleteButtonClicked.bind(this, this.props.gamePlatform.platform_id)}><i
className="fa fa-trash"></i> Delete
</button>
</td>
</tr>
);
}
}); //end GamePlatformRow
var GamePlatformTable = React.createClass({
getInitalState: function () {
return {
gamePlatforms: this.props.gamePlatforms,
deletePlatformId: null
};
},
refreshTableData: function () {
var data = {
"gamePlatforms": this.props.gamePlatforms
};
$.ajax({
url: this.props.siteUrl + "game_platform/json_get_all_platforms",
dataType: "json",
data: data,
cache: false,
success: function (data) {
this.setState({gamePlatforms: data.gamePlatforms});
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.siteUrl + "game_platform/json_get_by_platform_id", status, err.toString());
}.bind(this)
});
},
confirmDeleteClicked: function () {
var data = {
"platform_id": this.state.deletePlatformId
}
$.ajax({
type: "POST",
url: this.props.siteUrl + "game_platform/json_delete_by_platform_id",
dataType: "json",
data: data,
success: function (data) {
this.refreshTableData();
}.bind(this),
error: function (xhr, status, err) {
this.refreshTableData();
}.bind(this)
});
},
deleteButtonClicked: function (platform_id) {
console.log("GamePlatformTable.deleteButtonClicked\nplatform_id: " + platform_id);
$("#ConfirmDeleteModal").modal("show");
this.setState()({
deletePlatformId: platform_id
}).bind(this);
},
render: function () {
var rows = [];
this.props.gamePlatforms.forEach(
function (gamePlatform) {
rows.push(<GamePlatformRow gamePlatform={gamePlatform} key={gamePlatform.platform_id}
siteUrl={this.props.siteUrl}
deleteButtonClicked={this.deleteButtonClicked}/>);
}.bind(this)
);
return (
<div className="table-responsive">
<table className="table table-hover" id="GamePlatformTable">
<thead>
<tr>
<th>#</th>
<th>Platform Name</th>
<th>Platform Abbr</th>
<th>Platform Logo</th>
<th>Platform Developer</th>
<th>First Release Year</th>
<th> </th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
<div className="modal fade" id="ConfirmDeleteModal">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 className="modal-title">Delete Game Platform</h4>
</div>
<div className="modal-body">
<p>Are you sure?</p>
<p>This action <strong className="text-danger">cannot</strong> be undone.</p>
</div>
<div className="modal-footer">
<button type="button" onclick={this.confirmDeleteClicked} className="btn btn-danger"
data-dismiss="modal"><i className="fa fa-trash"></i> Delete
</button>
<button type="button" className="btn btn-default" data-dismiss="modal"><i
className="fa fa-ban"></i> Cancel
</button>
</div>
</div>
</div>
</div>
</div>
);
}
}); // end GamePlatformTable
Edit 1:
Removing the .bind(this) removed the bind warning.
Edit 2:
I forgot to add, the console.logs() are showing the correct IDs.
Eh, I solved the prob.
I had parenthesis in front of setState.... like setState()({}) instead of setState({}).