Here. I have codeigniter update code, it also worked but the problem is when i click the Edit button did not parsing After space data.
(After space Words did not fetch in update model).
How can I solve this problem.
vvIncome.php view
$(document).on('click','.btn_edit', function(e) {
$("#edit").val($(this).attr('edit_id'));
$("#in_dis").val($(this).attr("in_dis"));
$("#in_amnt").val($(this).attr('in_amnt'));
$("#confirm-edit").modal({show:'true'});
});
$(document).on('click', '#btn-ys', function() {
var income_id = $('#edit').val();
var in_dis = $('#in_dis').val();
var in_amnt = $('#in_amnt').val();
var result{"income_id":income_id,"in_dis":in_dis,"in_amnt":in_amnt};
$.ajax({
data:result,
type: "POST",
url:'<?php echo base_url(); ?>admin/income/editincome/'+income_id,
success: function(data){
$("#confirm-edit").modal('hide');
viewData();
}
});
});
View PHP Code
<div class="modal fade bs-example-modal-md" id="confirm-edit" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">EDIT CATEGORY</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="well">
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-12">
<input type="text"class="form-control" id="in_dis" placeholder="description">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="number" class="form-control" id="in_amnt" placeholder="amount">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="hidden" class="form-control" id="edit" placeholder="income_id">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="btn-ys" class="btn btn-success">SUBMIT</button>
</div>
</form>
</div>
</div>
</div>
</div>
`
Income_resut.php
<thead>
<tr>
<th ><center>DESCRIPTION</center></th>
<th ><center>AMOUNT</center></th>
<th ><center>EDIT</center></th>
<th ><center>DELETE</center></th>
</tr>
</thead>
<?php foreach ($incm as $in_key) { ?>
<tr>
<td><center><?php echo $in_key->description;?></center></td>
<td><center><?php echo $in_key->amount;?></center></td>
<td>
<center><button type="button" title="edit" data-toggle="modal" edit_id=<?php echo $in_key->income_id;?> in_dis=<?php echo $in_key->description;?> in_amnt=<?php echo $in_key->amount;?> class="btn btn-info btn_edit"><i class="fa fa-pencil"></i></button></center>
</td>
<td>
<center><button type="button" title="delete" data-toggle="modal" del_id=<?php echo $in_key->income_id;?> class="btn btn-danger btn-delete"><i class="fa fa-trash-o"></i></button></center>
</td>
<?php } ?>
</table>
`
income.php Controller
public function editincome($income_id)
{
$udata['income_id'] = $this->input->POST('income_id');
$udata['description'] = $this->input->POST('in_dis');
$udata['amount'] = $this->input->POST('in_amnt');
$update = $this->income_model>update_income_details($udata,$income_id);
}
Income_Model.php Model
public function update_income_details($udata,$income_id)
{
$this->db->from('income', $udata);
$this->db->where('income_id',$income_id );
return $this->db->update('income',$udata);
}
This on view table
enter image description here
This is edit model
enter image description here
Try changing to this,
for eg, in_dis=<?php echo $in_key->description;?> to data-in_dis="<?php echo rawurlencode($in_key->description); ?>"
then
$("#in_dis").val($(this).attr("in_dis")); to $("#in_dis").val(decodeURIComponent($(this).data("in_dis")));
Use .data() instead of .attr()
Let me know if it works for you.
Related
my view page
<!-- BEGIN PAGE -->
<div id="main-content">
<!-- BEGIN PAGE CONTAINER-->
<div class="container-fluid">
<!-- BEGIN PAGE HEADER-->
<div class="row-fluid">
<div class="span12">
<!-- BEGIN THEME CUSTOMIZER-->
<div id="theme-change" class="hidden-phone">
<i class="icon-cogs"></i>
</div>
<!-- END THEME CUSTOMIZER-->
<!-- BEGIN PAGE TITLE & BREADCRUMB-->
<h3 class="page-title">
contactus
<small> List </small>
</h3>
<ul class="breadcrumb">
<li>
<i class="icon-home"></i><span class="divider"> </span>
</li>
<li>
Dashboard<span class="divider"> </span>
</li>
<li>
contactus <span class="divider-last"> </span>
</li>
</ul>
<br /><br />
<div id="msg">
<?php
if($this->session->tempdata('success'))
{
?>
<div class="alert alert-success hide_msg pull" style="width: 95%"> <i class="fa fa-check-circle"></i> <?php echo $this->session->tempdata('success');?>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<?php
}
if($this->session->tempdata('error'))
{
?>
<div class="alert alert-danger hide_msg pull" style="width: 95%"> <i class="fa fa-check-circle"></i> <?php echo $this->session->tempdata('error');?>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<?php
}
?>
</div>
<!-- END PAGE TITLE & BREADCRUMB-->
</div>
</div>
<!-- END PAGE HEADER-->
<!-- BEGIN PAGE CONTENT-->
<div id="page" class="dashboard">
<div class="row-fluid">
<div class="span12">
<!-- BEGIN RECENT ORDERS PORTLET-->
<div class="widget">
<div class="widget-title">
<h4><i class="icon-reorder"></i> Contactus-List </h4>
<button class="btn btn-success" style="float:right"><i class="icon-plus icon-white"></i> EXCEL </button>
</div>
<div class="widget-body">
<!-- BEGIN Table-->
<table class="table table-striped table-advance table-hover" id="sample_1">
<thead>
<tr>
<th><i class="icon_profile"></i> S.No. </th>
<th> <i class="fa fa-picture-o" aria-hidden="true"></i> Date & Time </th>
<th><i class="icon_profile"></i> Name </th>
<th> <i class="fa fa-picture-o" aria-hidden="true"></i> Email </th>
<th> <i class="fa fa-picture-o" aria-hidden="true"></i> Mobile Number </th>
<th><i class="icon_mobile"></i> Message</th>
<th><i class="icon_cogs"></i> Action</th>
</tr>
</thead>
<tbody>
<?php
$i=1;
foreach($contactus as $e)
{
?>
<tr>
<td><?php echo $i++;?></td>
<td><?php echo $e->date_and_time;?></td>
<td><?php echo $e->name;?></td>
<td><?php echo $e->email;?></td>
<td><?php echo $e->mobile_no;?></td>
<td>
<?php
$string = strip_tags($e->message);
$stringCut = substr($string, 0, 15);
echo $stringCut."...";?> click to read more
</td>
<td><div class="btn-group">
<!--<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> -->
<!-- <button class="btn btn-primary"><i class="icon-eye-open"></i></button>
<button class="btn btn-primary view" onclick="view_contact(this.value)" id="user_id" user_id="<?php echo $e->id;?>"><i class="icon-eye-open"></i></button>-->
<button class="btn btn-primary view_data" id="<?php echo $e->id; ?>" ><i class="icon-eye-open">VIEW FULL INFO</i></button>
<a onclick="return confirm('Are you want to delete ')" href="<?php echo base_url('admin/contactus_cont/delete_contactus')."/".$e->id;?>"> <button class="btn btn-danger"><i class="icon-trash icon-white"></i></button></a>
</div></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
<!-- END RECENT ORDERS PORTLET-->
</div>
</div>
</div>
<!-- END PAGE CONTENT-->
</div>
<!-- END PAGE CONTAINER-->
</div>
</div>
<!-- END CONTAINER -->
<div id="dataModal" class="modal fade">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">VIEW FULL INFO</h4>
</div>
<div class="modal-body" id="your_modal_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var id = $(this).attr("id");
//alert(id);
$.ajax({
url : "<?php echo base_url('admin/contactus_cont/get_Full_data') ?>",
method:"POST",
data:{id:id},
success:function(data){
alert(data);
//console.log(data);
$('#your_modal_detail').html(data);
$('#dataModal').modal("show");
}
});
});
});
</script>
i want to view detail about each contact by AJAX & JQUERY
in this i am getting all contact data in list from database. But the problem is to show data in pop-up in datail.
like when i click on
it should display pop-up window with all detail by using particular ID close option
my controller function :-
public function get_Full_data()
{
$id = $this->input->post("id");
//echo $id; exit;
$data['fullData'] = $this->contactus_model->view($id);
$this->load->view('admin/datainModal',$data);
}
my model function :-
public function view($id)
{
$res = $this->db->get_where("contactus",array('id'=>$id));
return $res->row();
}
view page datainModal.php :-
<div class="table-responsive">
<table class="table table-bordered">
<div class='row col-md-12'>
<div class='col-md-6'>
<tr>
<td width="30%"><label>Id</label></td>
<td width="70%"><?php echo $fullData->id;?></td>
</tr>
</div>
<div class='col-md-6'>
<tr>
<td width="30%"><label>Data & Time</label></td>
<td width="70%"><?php echo $fullData->date_and_time;?></td>
</tr>
</div>
</div>
</table>
</div>
$(document).ready(function(){
$('.view_data').click(function(){
var id = $(this).attr("id");
console.log(id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button class="btn btn-primary view_data" id="1" >VIEW FULL INFO</button>
View Code:
<tr>
<td>
<button class="btn btn-primary view_data" id="<?php echo $e->id; ?>" ><i class="icon-eye-open">VIEW FULL INFO</i></button>
</td>
</tr>
Bootstrap Modal Code:-
<div id="dataModal" class="modal fade">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">VIEW FULL INFO</h4>
</div>
<div class="modal-body" id="your_modal_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JQUERY AJAX Code:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var id = $(this).attr("id");
$.ajax({
url : "<?php echo base_url('ControllerName/get_Full_data') ?>",
type:"POST",
data:{id:id},
success:function(data){
//alert(data);
$('#your_modal_detail').html(data);
$('#dataModal').modal("show");
}
});
});
});
</script>
Controller Code:-
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class ControllerName extends CI_Controller {
public function get_Full_data(){
$id = $this->input->post("id");
$this->load->YourModelName();
$data['fullData'] = $this->YourModelName->getDatainModal($id);
$this->load->view('datainModal',$data);
}
}
?>
Modal Code:-
<?php
class YourModelName extends CI_Model {
function getDatainModal($id){
return $fullData = $this->db->get_where('table_name',array('id'=>$id))->row();
}
}
?>
Create in View datainModal.php :-
<div class="table-responsive">
<table class="table table-bordered">
<div class='row col-md-12'>
<div class='col-md-6'>
<tr>
<td width="30%"><label>Id</label></td>
<td width="70%"><?php echo $fullData->id;?></td>
</tr>
</div>
<div class='col-md-6'>
<tr>
<td width="30%"><label>Data & Time</label></td>
<td width="70%"><?php echo $fullData->date_and_time;?></td>
</tr>
</div>
</div>
</table>
</div>
I am trying to make a forum, and a have made to open bootstrap modal when someone clicks on Reply Button, but that button is in while loop and modal opens only on first button in row.
This is while loop
$sql = $conn->prepare("SELECT * FROM forum_answers WHERE topicId = :id");
$sql->bindValue(":id", $id);
$sql->execute();
while($row = $sql->fetch(PDO::FETCH_ASSOC))
{
if($row['quote'] == "")
{
?>
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-md-6">
<b><?php echo $row['uid']; ?></b>
</div>
<div class="col-md-6 text-right">
<?php echo $row['date']; ?>
</div>
</div>
</div>
<div class="card-body">
<p class="card-text"><?php echo $row['answer']; ?></p>
<a class="btn btn-primary" id="btnAddReply"><i class="fas fa-fw fa-reply"></i> Reply</a>
</div>
</div>
<?php
}
else
{
?>
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-md-6">
<b><?php echo $row['uid']; ?></b>
</div>
<div class="col-md-6 text-right">
<?php echo $row['date']; ?>
</div>
</div>
</div>
<div class="card-body">
<blockquote class="blockquote" style="background-color: #F8F8F8;"><?php echo $row['quote']; ?></blockquote>
<p class="card-text"><?php echo $row['answer']; ?></p>
<a class="btn btn-primary" id="btnAddReply"><i class="fas fa-fw fa-reply"></i> Reply</a>
</div>
</div>
<?php
}
}
This is a modal.
<div class="modal fade" id="addReply" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Add Reply</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="post" enctype="multipart/form-data">
<div class="modal-body">
<div class="form-group">
<label for="exampleInputEmail1">Quote</label>
<?php
$sql = $conn->prepare("SELECT answer FROM forum_answers WHERE id=:id");
$sql->bindValue(":id", $id);
$sql->execute();
while($row = $sql->fetch(PDO::FETCH_ASSOC))
{
?>
<textarea class="form-control rounded-0" name="quote" id="exampleFormControlTextarea1" rows="4" disabled><?php echo $row['answer']; ?></textarea>
<?php
}
?>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Answer</label>
<textarea class="form-control" id="desc1" cols="40" rows="3" name="answer" required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" name="submit3" value="Reply">
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#btnAddReply").click(function() {
$("#addReply").modal();
});
});
</script>
I don't know how to use class instead id in bootstrap, I am not so great with javascript.
if you have more than one id with the same name it by default select the first one with the name when js on click event trigger in your case.
you can use jQuery like operator to trigger on click event for all the ids with name btnAddReply
<script>
$(document).ready(function() {
$("[id^=btnAddReply]").click(function() {
$("#addReply").modal();
});
});
</script>
but a clean and better solution is to use a common class. instead of id in your HTML give the class with name btnAddReply
<script>
$(document).ready(function() {
$(".btnAddReply").click(function() {
$("#addReply").modal();
});
});
</script>
I have a jquery modal button, where I want to display information from my database.
I have a field in the database where I want everything to be identified by it is called "number"
The modal button is displayed in a table which is already being looped from a SQL query displaying all entries
while ($row = getarray($res)){
<tbody>
<tr>
<td> <? $row["state"] ?> </td>
<td><? $row["number"] ?></td>
<td>
<button type="button" class="btn btn-primary" onclick="detailsmodal(<?
$row["number"])">Description</button>
</td>
</tr>
<!-- Modal Button -->
<button type ="button" class="btn btn-primary" onclick="detailsmodal(<?= $row['number']; ?>)>Modal Button</button>
<!-- Code for modal -->
<?php
$number =$_POST["number"];
$number =(int)$number;
$modalsql = myquery($dbvariable,"SELECT * FROM myTable WHERE Number = '$number' ");
$result2 = myfunction_fetch_array($modalsql);
ob_start();
?>
<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" onclick="closeModal()" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"> <?= $result2['number']?></h4>
</div>
<div class="modal-body">
<p><strong>Field 1:</strong><?= $result2['number']?> </p>
<p><strong>Field 2:</strong><?= $result2['field_2']?> </p>
<p><strong>Field 3</strong><?= $result2['field_3']?> </p>
<p><strong>Field 4:</strong><?= $result2['field_4']?> </p>
<p><strong>Field 5:</strong><?= $result2['field_5']?></p>
<p><strong>Field 6:</strong><?= $result2['field_6']?> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="closeModal()">Close</button>
</div>
</div>
</div>
</div>
<?php
ob_get_clean();
?>
<!-- Script for the modal-->
<script>
function detailsmodal(number){
var data = {"number" : number};
jQuery.ajax({
url : "/page1/page2",
method : "post",
data : data,
success: function(){
jQuery("body").append(data);
jQuery("#myModal").modal("toggle");
},
error: function(){
alert("Something went wrong!");
}
});
}
</script>
Ideally, the information should be changed based on the different items that are being clicked. but it is staying the same.
Please try to use following code , there are so many typo mistakes you have in your code.
<?php while ($row = getarray($res)){ ?>
<tbody>
<tr>
<td> <? $row["state"] ?> </td>
<td><? $row["number"] ?></td>
<td>
<button type="button" class="btn btn-primary" onclick="detailsmodal(<?=
$row["number"]) ?>">Description</button>
</td>
</tr>
<!-- Modal Button -->
<button type ="button" class="btn btn-primary" onclick="detailsmodal(<?= $row['number']; ?>)">Modal Button</button>
<!-- Code for modal -->
<?php
$number =$_POST["number"];
$number =(int)$number;
$modalsql = myquery($dbvariable,"SELECT * FROM myTable WHERE Number = '".$number."' ");
$result2 = myfunction_fetch_array($modalsql);
ob_start();
?>
<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" onclick="closeModal()" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"> <?= $result2['number']?></h4>
</div>
<div class="modal-body">
<p><strong>Field 1:</strong><?= $result2['number']?> </p>
<p><strong>Field 2:</strong><?= $result2['field_2']?> </p>
<p><strong>Field 3</strong><?= $result2['field_3']?> </p>
<p><strong>Field 4:</strong><?= $result2['field_4']?> </p>
<p><strong>Field 5:</strong><?= $result2['field_5']?></p>
<p><strong>Field 6:</strong><?= $result2['field_6']?> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="closeModal()">Close</button>
</div>
</div>
</div>
</div>
<?php
ob_get_clean();
?>
<!-- Script for the modal-->
<script>
function detailsmodal(number){
var data = {"number" : number};
jQuery.ajax({
url : "/page1/page2",
method : "post",
data : data,
success: function(){
jQuery("body").append(data);
jQuery("#myModal").modal("toggle");
},
error: function(){
alert("Something went wrong!");
}
});
}
</script>
Here is my code of table. I want to get ID of each row in opened modal when press button "EDIT". How can I send ID of selected row to modal? In my case bellow i am getting only first row ID.
Thank you for attention.
JS for modal form
<script>
$(".btn[data-target='#myModal']").click(function() {
var columnHeadings = $("thead th").map(function() {
return $(this).text();
}).get();
columnHeadings.pop();
var columnValues = $(this).parent().siblings().map(function() {
return $(this).text();
}).get();
var modalBody = $('<div id="modalContent"></div>');
var modalForm = $('<form role="form" name="modalForm" action="putYourPHPActionHere.php" method="post"></form>');
$.each(columnHeadings, function(i, columnHeader) {
var formGroup = $('<div class="form-group"></div>');
formGroup.append('<label for="'+columnHeader+'">'+columnHeader+'</label>');
formGroup.append('<input class="form-control" name="'+columnHeader+i+'" id="'+columnHeader+i+'" value="'+columnValues[i]+'" />');
modalForm.append(formGroup);
});
modalBody.append(modalForm);
$('.modal-body').html(modalBody);
});
$('.modal-footer .btn-primary').click(function() {
$('form[name="modalForm"]').submit();
});
</script>
<table class="simple-little-table table" cellspacing='0'>
<tr>
<th><p>№</p></th>
<th><p>Name, Surname</p></th>
<th>Own number</th>
<th>Company Number</th>
</tr>
<?php
$result =mysql_query("SELECT * FROM `my_table` WHERE 1 and status=1");
while ($row = mysql_fetch_array($result, MYSQL_NUM))
{
$id=$row["0"];
echo '<tr>
<td><p>'.$row[1].' '.$row[2].'</p></td>
<td><p>'.$row[4].'</p></td>
<td><p>'.$row[5].'</p></td>';
?>
<td><?php echo '<button class="btn btn-success" data-toggle="modal" data-target="#myModal" contenteditable="false" value=".$id.">'.$id.'</button>';?></td>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true" class="">? </span><span class="sr-only">Close</span>
</button>
<!--Here I am trying to echo ID-->
<h4 class="modal-title" id="myModalLabel"><?php echo $row[0]; ?></h4>
</div>
<div class="modal-body"> sadasdas</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<?php
}
?>
Here is picture of table
I need to get ID of row in modal
This is what you can do . i am not using your data but assuming that you have enough understanding to use this according to your need.
Basically I am just using a trick.
<table>
<?php $sr=1;
while(your condition){?>
<tr>
<td id="td_<?=$sr++;?>">value you want in model</td>
<td><button id="<?=$sr;?>">Edit</button></td>
</tr>
<?php } ?>
</table>
you will get something like this
<table>
<tr>
<td id="td_1"></td> <!--see the id of this td and button--->
</td><button class="myclass" id="1"></button></td>
</tr>
<tr>
<td id="td_2"></td>
</td><button class="myclass" id="2"></button></td>
</tr>
now use this jquery
$('.myclass').click(function(){
var btn_id = $(this).attr('id'); //getting the btn's id
var row_id = "#td_"+btn_id; // by this you got the id of that td
$('#id_in_modal_where_you_need_this').text($(row_id).text());
});
function getValue(id){
$('#myModalLabel').text(id);
$('#myModal').modal('show');
}
and call this function on button click
instead of using this
<button class="btn btn-success" data-toggle="modal" data-target="#myModal" contenteditable="false" value=".$id.">
use
<button class="btn btn-success" onclick='getValue(".$id.");' contenteditable="false" value=".$id.">
You shouldn't create html for modal for each row, but instead just create one modal, which will be used when every row is clicked.
Then, using jquery in click method you can set different fields for modal, such as id or something else, like this for example:
$("btn").click(function(event) {
id = event.target.id;
$(#myModalIdField).text = id;
});
use this :
first, give a table id="name",
use your own table and data and if ur using a database or normal table;
use button modal as -
<table id="table">
<thead>
<tr>
<th>Your data </th>
</thead>
<tbody>
<tr>
<td>Your Data </td>
<td><button type="button" class="btn btn-primary" onclick='getValue(".$rindex.")' contenteditable="false" value=".$rindex.""> </td>
<div class=" modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header" id="myModalLabel">
<h4 class="modal-title">Enter Remarks:</h4>
<!-- <button type="button" class="close" data-dismiss="modal">×</button>-->
</div>
<!-- Modal body -->
<div class="modal-body">
<form action="" method="post">
<div class="form-group">
<label for="comment">Remarks:</label>
<textarea class="form-control" rows="3" name="comment" id="comment"></textarea>
</div>
<div class="form-group">
<input type="submit" name="msub" id="" class="btn btn-primary">
</div>
</form>
</div>
</div>
</div>
</div>
</button>
</td>
</tr>
</tbody>
</table>
Use this jquery :
var table = document.getElementById('table'), rindex;
for (var i = 0; i < table.rows.length; i++) {
table.rows[i].onclick = function getValue(rindex) {
rindex = this.rowIndex;
$('#myModalLabel').text(rindex);
$('#myModal').modal('show');
}
}
So I checked a lot of topics about this title but couldn't find a good answer to it.
So basically I have this table:
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered tablesorter">
<thead>
<tr>
<th>Email <i class="fa fa-sort"></i></th>
<th>Akcje <i class="fa fa-sort"></i></th>
</tr>
</thead>
<tbody>
<?php
$subs = $conn->prepare("SELECT * FROM sub_permission WHERE id_bota=:id");
$subs->bindParam(":id",$ID);
$subs->execute();
?>
<form method="post">
<?php foreach($subs as $sub){ ?>
<tr>
<td>
<?php echo $sub['adminEmail']; ?>
</td>
<td>
<input type="hidden" name="id">
<button type="button" value="<?php echo $sub["adminEmail"]; ?>" class='btn btn-danger btn-xs' data-toggle="modal" data-target="#modal_DELETE" data-id="<?php echo $sub["adminEmail"]; ?>"> <span class="fa fa-times"> </span> </button><a> </a>
<button type="button" class='btn btn-warning btn-xs' data-toggle="modal" data-target="#myModalE"><span class="fa fa-edit"></span></button>
</td>
</tr>
<?php } ?>
</form>
</tbody>
</table>
</div>
</div>
So this is basically the table with users that have sub-admins and there's 1 action "Delete".
When someone clicks button delete, this modal will show:
<div class="modal fade" id="modal_DELETE" tabindex="-1" role="dialog" aria-labelledby="modal_nameDELETE">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modal_nameDELETE">Sure?</h4>
</div>
<div class="modal-body">
Are you sure you want to remove sub-admin <label><?php echo $sub['adminEmail'];?></label> ?
<br>
</div>
<form method="post">
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal">No</button>
<button type="submit" class="btn btn-primary" name="delete">Yes</button>
</div>
</form>
</div>
</div>
</div>
The problem is when there's for example 3 people in the table and I click the delete button for user 3, the modal pops-up but the email is wrong.