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({}).
Related
I am trying to take amount from the html tags and store the amount into database but the about here
ajax code is not working and data is not stored in the database. And how to know if ajax code is redirected it's control to the laravel controller
#include('layouts.students.header')
<meta name="csrf-token" content="{{csrf_token()}}">
<body>
<div class="col">
<p class="text-right" style="font-size: 18px;">
<i class="fa fa-rupee"></i><strong
class="amount">299</strong>
</p>
</div>
<div class="form-group text-right">
<button class="btn btn-warning btn-block btn-lg
buy_now">Proceed</button>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('button').click(function(event){
e.preventDefault();
var amount = $('.amount').html();
$.ajax({
url : '{{route('razorpay')}}',
method : 'POST',
dataType : 'jason',
data : {amount :amount * 100},
success : function (Response) {
console.log(Response);
}
});
});
});
</script>
</body>
</html>
controller :
public function dopayment(Request $request)
{
$data = $request->all();
$result = Payment::insert($data);
echo "inserted";
}
In ajax method can you use dataType : 'json', instead of jason
I have a problem in getting the POST data from a page using ajax. In the jquery code the data is running smoothly and it will display when i alert the data. In the ajax request code the data from jquery has been successfully pass into showpercent.php file. Now the problem about showpercent.php, the data POST index percentage_id is unidentified. How can i fix this problem in getting the value of POST?
Below is the table list with button when the data is coming from.
<table>
<tr>
<td>
<button class="btn btn-info show-percentage" title="Click to add view percentages!" data-percentage_id="'.$row['hidden_id'] .'" data-toggle="show-percentage"><i class="glyphicon glyphicon-time"></i></button>
</td>
</tr>
</table>
Below is the ajax request sending the data into showpercent.php file. When I alert the percentage_id from button click the data will show in the alert and the ajax was successfully pass into specific php file which is showpercent.php.
<script>
$(document).ready(function(){
$(".show-percentage").click(function(){
var percentage_id = $(this).data('percentage_id');
alert("Ajax Landing ID "+landing_id);
$.ajax({
url: 'ajax/showpercent.php',
type: 'POST',
cache: false,
data: { percentage_id : percentage_id },
success: function(data) {
alert(data);
$('#add-percentage').modal('show');
readRecords();
},
error: function(request, status, error){
alert("Error!! "+error);
}
});
// READ recods when the button is click
readRecords();
});
function readRecords() {
$.get("ajax/showpercent.php", {}, function (data, status) {
$(".display_percentage").html(data);
});
}
});
</script>
Below is the modal having a tab will display the data from ajax request. The class display_percentage will display the current data from showpercentage.
<div id="add-percentage" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Fish Landing Percentage</h4>
</div>
<div class="modal-body">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#menu1">Add Percentage</a></li>
</ul>
<div class="tab-content">
<div id="menu1" class="tab-pane fade in active">
<br>
<div class="display_percentage"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="primary" class="btn btn-primary" onclick="AddPercentage()"> Add Percentage </button>
<button type="button" id="danger" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
showpercent.php
This file will read by readRecords() function to display into the modal with tab class display_percentage when the button click is triggered.
This is now the problem comes, when the data was successfully pass from ajax request the data POST in the showpercent.php is not properly set and cannot proceed to the mysql process because the POST is not set.
<?php
include 'db.php';
$data = '
<table">
<thead>
<tr class="success">
<th ><center>No.</center></th>
<th ><center>Percentage ID</center></th>
<th ><center>Landing ID</center></th>
<th><center>Percentage</center></th>
<th><center>Date Added</center></th>
</tr>
</thead>';
if(isset($_POST['percentage_id'])){
$landing_id = $_POST['percentage_id'];
$query = mysqli_query($conn, "SELECT
percentage.percent_id,
percentage.landing_id,
percentage.percentage,
percentage.date_recorded
FROM
percentage
WHERE percentage.landing_id = '$landing_id'");
$number = 1;
while($row = mysqli_fetch_array($query)) {
$data .= '
<tr>
<td><center>' . $number . '</center></td>
<td><center>' . $row['percent_id'] . '</center></td>
<td><center>' . $row['landing_id'] . '</center></td>
<td><center>' . $row['percentage'] . '%</center></td>
<td><center>' . date("M. d, Y", strtotime($row['date_recorded'])) . '</center></td>
</tr>';
$number++;
}
}else{
echo 'Percentage id is not set!';
}
$data .= '
</table>';
echo $data;
?>
But in the console the ajax passing data will run smoothly.
I wish anybody will help me to fix this problem.
I read your code your showpercent.php, javascript and html and soo far and notice this
<button class="btn btn-info show-percentage" title="Click to add view percentages!" data-percentage_id="'.$row['hidden_id'] .'" data-toggle="show-percentage"><i class="glyphicon glyphicon-time"></i></button>
and check this
data-percentage_id="'.$row['hidden_id'] .'"
you're doing it wrong this is not how you put php value into html value, this will return undefined in javascript if you try to get its value so
This is why
var percentage_id = $(this).data('percentage_id');
returns undefined in javascript and php
So replace it with this
data-percentage_id="<?php echo $row['hidden_id']; ?>"
So replace your button into like this
<button class="btn btn-info show-percentage" title="Click to add view percentages!" data-percentage_id="<? echo $row['hidden_id']; ?>" data-toggle="show-percentage"><i class="glyphicon glyphicon-time"></i></button>
thanks to #Keval Mangukiya
try:
add this in your html
<button id="percentage_id" class="btn btn-info show-percentage" title="Click to add view percentages!" data-percentage_id="<?=$row['hidden_id'] ?>" data-toggle="show-percentage"><i class="glyphicon glyphicon-time"></i></button>
set the value of your percentage_id before getting it
add to your JavaScript with
$("#percentage_id]").data('percentage_id',loading_id); //setter
var percentage_id = $(this).data('percentage_id'); //getter
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 ?
I have a problem to delet the row data from a page. After clicking "OK" buttton nothing would be appear.
<td><a id ="mybutton" data-toggle="modal" data-target="#confirm_delete_button" data-id="<?php echo $row -> id?>" href="" ><i class="glyphicon glyphicon-remove"></i></a>
The modal is
<div class="modal fade" id="confirm_delete_button" role="dialog" aria-labelleby="myModalLabel" aria-hidden="true" z-index: 1050;>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h class="modal-title" id="myModalLabel">Delet this data</h>
</div>
<div class="modal-body">
<h4>Are you sure? </h4>
<div id="done"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" id="confirmOk">Ok</button>
<button type="button" class="btn btn-success" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
The JQuery code is
<script type="text/javascript">
$(document).ready(function(){
$('#mybutton').click(function(){
var id = $(this).data('id');
$('#confirmOk').data('id',id);
});
$('#confirmOk').click(function(){
var id = $(this).data('id');
$.ajax {
url : "<?php echo base_url();?>item_list/delete_item/",
type : "post" ,
data : {"id":id},
dataType:"json",
success : function (data) {
$('#confirm_delete_button').modal('hide');
}
}
});
});
</script>
The function of controller file item_list.php file is
public function delete_item () {
//$id = $this->uri->segment(3);
$id=$this->input->post('id');
$this -> item_list_model -> delete_item ($id);
echo $id;
}
The item_list_model.php file is
public function delete_item ($id) {
return $this -> db -> query ("DELETE FROM item WHERE id='$id' ");
}
The output is The "OK" button does not delet the row
Actually your ajax post endpoint into controller should return some response using echo + json enconde. In that way your success callback into ajax jquery call can catch it and continue the flow correctly (hiding modal).
JQuery Ajax POST in Codeigniter
Try out below code
Controller
public function delete_item () {
//$id = $this->uri->segment(3);
$id=$this->input->post('id');
$result = $this->item_list_model->delete_item ($id);
if($result > 0 ){
echo "success";
}else{
echo "failure";
}
}
Model
public function delete_item ($id) {
$this->db->where('id', $id);
$this->db->delete('item');
return $this->db->affected_rows();
}
ajax
success : function (data) {
//$('#confirm_delete_button').modal('hide');
alert(data);
}
try changing data : {"id":id}, into data : {id:id}, maybe the data id didn't sent correctnly in the controller thats why it's not working.
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>