after spending a fair amount of time researching and debugging the issues, I am finally at my wits' end and would appreciate some help:
Problem:
Modal does not display variables insert into its INPUT fields.
Background info:
I am pulling records from a MySQL table which is displayed line by line, with an "EDIT" button placed in the last column of each row. The EDIT button is supposed to launch a modal populated with the records data in each INPUT field, allowing the user to edit the record.
What I've tried so far:
checked whether the generated variables are empty by looking at what's printed in the source. All variables are generated correctly and have indeed values printed.
I copied the #MyModal JS and <div> from the official documentation but cannot get it work either (Link)
copied the #EDIT modal from another thread on the web which worked for another user
included references from Google and MaxCDN instead of my own local copies of JS Bootstrap / jQuery / CSS
tried to run the code on my XAMPP server without success, showing the some symptoms
opened the website in IE / Chrome / Firefox / Safari (MAC), all with the same result
ran a JS Fiddle successfully handing over the variables which makes me think that there might be a server issue / configuration requirement that I am not aware of (LINK)
The code:
<html>
<head>
<!-- include jQuery 3.1.0 + jQuery CSS + min JavaScript -->
<!-- latest jQuery 3.1.0 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JavaScript for Modal, #MyModal is straight from the documentation, #edit is a solution I got off the web -->
<script>
$('#edit').on('show.bs.modal', function(e) {
var dataID = $(e.relatedTarget).data('id');
$(e.currentTarget).find('input[name="dataID"]').val(dataID);
var dataDate = $(e.relatedTarget).data('date');
$(e.currentTarget).find('input[name="dataDate"]').val(dataDate);
});
$('#myModal').on('show.bs.modal', function(e) {
var dataID = $(e.relatedTarget).data('id');
$(e.currentTarget).find('input[name="dataID"]').val(dataID);
var dataDate = $(e.relatedTarget).data('date');
$(e.currentTarget).find('input[name="dataDate"]').val(dataDate);
var dataTime = $(e.relatedTarget).data('time');
$(e.currentTarget).find('input[name="dataTime"]').val(dataTime);
var dataStaff = $(e.relatedTarget).data('staff');
$(e.currentTarget).find('input[name="dataStaff"]').val(dataStaff);
var dataDept = $(e.relatedTarget).data('dept');
$(e.currentTarget).find('input[name="dataDept"]').val(dataDept);
var dataProb = $(e.relatedTarget).data('prob');
$(e.currentTarget).find('input[name="dataProb"]').val(dataProb);
var dataGuest = $(e.relatedTarget).data('guest');
$(e.currentTarget).find('input[name="dataGuest"]').val(dataGuest);
var dataRoom = $(e.relatedTarget).data('room');
$(e.currentTarget).find('input[name="dataRoom"]').val(dataRoom);
});
</script>
<!-- End of Modal Javascript -->
</head>
<body>
<table>
<tr>
<td>
<label>Button for Modal #MYMODAL"</label>
</td>
<td>
<button type="button" class="btn btn-block btn-primary btn-xs" data-toggle="modal" data-target="#myModal" data-keyboard="true"
data-id="1234"
data-date="2001-01-31"
data-time="13:00"
data-staff="Some Name"
data-dept="Some Department"
data-prob="Problem"
data-guest="Guest Name"
data-room="1111" >Modal 1</button>
</td>
</tr>
<tr>
<td>
<label>Button for Modal #EDIT"</label>
</td>
<td>
<button type="button" class="btn btn-block btn-primary btn-xs" data-toggle="modal" data-target="#edit" data-keyboard="true"
data-id="1234"
data-date="2001-01-31">Modal 2</button>
</td>
</tr>
</table>
<!-- Modal MYMODAL -->
<div class="modal modal-primary modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel">Edit Record</h4>
</div>
<div class="modal-body">
<table class="table">
<tr>
<td>ID No.: </td>
<td>
<input type="text" id="dataID" name="dataID" value="" disabled />
</td>
</tr>
<tr>
<td>Date: </td>
<td>
<input type="date" id="dataDate" name="dataDate" value="" />
</td>
</tr>
<tr>
<td>Time: </td>
<td>
<input type="time" id="dataTime" name="dataTime" value="" />
</td>
</tr>
<tr>
<td>Staff: </td>
<td>
<input type="text" name="dataStaff" value="" />
</td>
</tr>
<tr>
<td>Department: </td>
<td>
<input type="text" name="dataDept" value="" />
</td>
</tr>
<tr>
<td>Problem: </td>
<td>
<input type="text" name="dataProb" value="" />
</td>
</tr>
<tr>
<td>Guest: </td>
<td>
<input type="text" name="dataGuest" value="" />
</td>
</tr>
<tr>
<td>Room No.: </td>
<td>
<input type="text" name="dataRoom" value="" />
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- /.Modal MYMODAL -->
<!-- Modal EDIT-->
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel">Edit Details</h4>
</div>
<div class="modal-body">
<table class="table">
<tr>
<td>ID No.: </td>
<td>
<input type="text" id="dataID" name="dataID" value="" disabled />
</td>
</tr>
<tr>
<td>Date: </td>
<td>
<input type="date" id="dataDate" name="dataDate" value="" />
</td>
</tr>
</table>
</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>
<!-- /.Modal EDIT -->
</body>
</html>
Your script needs to be at the bottom, after the html. I believe that when your script is executing, the html does not yet exist.
Related
I've got an asp.net mvc webpage set up. All of my actions, like: create, edit, etc... have their own views, except delete, because I'm trying to pop up a modal with help from Bootstrap. I pass an id to the modal, through jQuery/JavaScript, and with the asp-action as the form's attribute, it should theoretically work, but well it doesn't.
Index View:
#if (Model.Tenants.Any())
{
<h3>Tenants (#Model.Tenants.Count)</h3>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Id</th>
<th>UrlFriendlyName</th>
<th>MicrosoftGraphTenantId</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var tenant in Model.Tenants.OrderByDescending(x => x.Name))
{
<tr>
<td>
<button class="btn btn-primary" onclick="document.location.href = '#Url.Action("Index", "User", new {id = tenant.Id})'">Show Users</button>
</td>
<td>
#tenant.Name
</td>
<td>
#tenant.Id
</td>
<td>
#tenant.UrlFriendlyName
</td>
<td>
#tenant.MicrosoftGraphTenantId
</td>
<td>
<div class="btn-group-justified pull-right ">
<button class="btn btn-success" onclick="document.location.href = '#Url.Action("Edit", "Tenant", new {id = tenant.Id})'">Edit</button>
<button type="button" class="btn btn-danger" onclick="deleteTenant('#tenant.Id', '#tenant.Name')" data-toggle="modal" data-target="#deleteModal">Delete</button>
</div>
</td>
</tr>
}
</tbody>
</table>
</div>
<div class="align-items-sm-end">
<button onclick="document.location.href='#Url.Action("Create", "Tenant")'" class="btn btn-outline-success">Create new Tenant</button>
</div>
<div class="modal fade" id="deleteModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete the selected Tenant?</p>
</div>
<div class="modal-footer">
<form asp-action="Delete">
<input type="hidden" id="tenantidinput"/>
<button type="submit" class="btn btn-outline-danger">Delete Tenant</button>
</form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
}
Delete Action in Controller:
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> DeleteAsync(Guid id)
{
if (ModelState.IsValid && id != Guid.Empty)
{
var tenant = await _context.Tenants.AsQueryable().Where(x => x.Id == id).FirstOrDefaultAsync().ConfigureAwait(false);
_context.Tenants.Remove(tenant);
await _context.SaveChangesAsync().ConfigureAwait(false);
}
return RedirectToAction("Index");
}
Javascript:
function deleteTenant(tenantid, tenantname) {
$(".modal-title").text("Delete " + tenantname);
$("#tenantidinput").attr("name", ''+tenantid+'');
}
Input getting the id as the value of the name:
When debugging, it receives no id whatsoever:
The javascript-function receives the parameters just fine. I think that the problem lies in, the way, the form passes the id to the controller. It somehow doesn't pass the value of the name-attribute.
This is happening for two reasons. Firstly, the hidden input should have the name matching the argument in the action. In your case id:
<input type="hidden" name="id" id="tenantidinput" />
Secondly, your JS should set the value of the field, not its name:
function deleteTenant(tenantid, tenantname) {
$(".modal-title").text("Delete " + tenantname);
$("#tenantidinput").val(tenantid);
}
I have an HTML code like this:
<body>
<div class="container">
<div style="margin-top: 50px;">
<table class="table table-hover" style="width: 100%;">
<tbody>
<tr>
<th>0</th>
<td class="cTenSanPham">Samsung Galaxy Note 8</td>
<td class="cGiaSanPham">23.000.000 VND</td>
<td>
<button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModal" onclick="editProductModal()">Chỉnh sửa</button>
<button type="button" class="btn btn-danger delete-row-tb">Xóa</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
In modal code
<div class="modal-body">
<form>
<div class="form-group">
<label>
<h5 class="">Mã sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iMaSanPham" name="nMaSanPham" readonly>
</div>
<div class="form-group">
<label>
<h5 class="">Tên sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iTenSanPham" name="nTenSanPham">
</div>
<div class="form-group">
<label>
<h5 class="">Giá sản phẩm</h5>
</label>
<input type="number" min="500" max="999999999" class="form-control" id="iGiaSanPham"
name="nGiaSanPham">
</div>
</form>
</div>
And an Javascript code like this:
function editProductModal() {
$(document).on("click", ".edit", function () {
$(this).parents("tr").find("th").each(function () {
document.getElementById("iMaSanPham").value = $(this).text();
});
$(this).parents("tr").find(".cTenSanPham").each(function () {
document.getElementById("iTenSanPham").value = $(this).text();
});
$(this).parents("tr").find(".cGiaSanPham").each(function () {
document.getElementById("iGiaSanPham").value = parseInt($(this).text().replace(/\D/g, ''));
});
});
}
I want when I click the button 'Chỉnh sửa' on any row, a modal will open and fill data from this row into this modal (the modal of bootstrap 4). I can edit on this modal, then I press a button to pass updated data to table. How to do it in function editProductModal() in file JS. Thank you so much
var $currentEditRow;
$(document).on("click", ".edit", function() {
$currentEditRow = $(this).parents("tr");
editProductModal($(this).parents("tr"));
});
function editProductModal(row) {
document.getElementById("iMaSanPham").value = $(row).find("th").text();
document.getElementById("iTenSanPham").value = $(row).find(".cTenSanPham").text();
document.getElementById("iGiaSanPham").value = parseInt($(row).find(".cGiaSanPham").text().replace(/\D/g, ''));
}
function update() {
$currentEditRow.find("th").text(document.getElementById("iMaSanPham").value);
$currentEditRow.find(".cTenSanPham").text(document.getElementById("iTenSanPham").value);
$currentEditRow.find(".cGiaSanPham").text(document.getElementById("iGiaSanPham").value);
$('#exampleModal').modal('hide');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
<div style="margin-top: 50px;">
<table class="table table-hover" style="width: 100%;">
<tbody>
<tr>
<th>0</th>
<td class="cTenSanPham">Samsung Galaxy Note 8</td>
<td class="cGiaSanPham">23.000.000 VND</td>
<td>
<button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModal" onclick="editProductModal()">Chỉnh sửa</button>
<button type="button" class="btn btn-danger delete-row-tb">Xóa</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>
<h5 class="">Mã sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iMaSanPham" name="nMaSanPham" readonly>
</div>
<div class="form-group">
<label>
<h5 class="">Tên sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iTenSanPham" name="nTenSanPham">
</div>
<div class="form-group">
<label>
<h5 class="">Giá sản phẩm</h5>
</label>
<input type="number" min="500" max="999999999" class="form-control" id="iGiaSanPham" name="nGiaSanPham">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="update()">Save</button>
</div>
</div>
</div>
</div>
When editing the current tr row, store the dom of the current row, so you can determine which line to update to in the modal.
You can try to update the row data in my code snippet.
You are improperly mixing inline onclick and jQuery click event listeners together.
Remove the function and the onclick and just use the jQuery code inside the function by itself to manage the event
You also don't need an each loop to access the elements within the row.
Simplified version:
$(document).on("click", ".edit", function() {
var $row = $(this).closest('tr'),
thText = $row.find('th').text(),
cTenSanPham = $row.find('.cTenSanPham').text(),
cGiaSanPham = $('.cGiaSanPham').text().replace(/\D/g, '');
$('#iMaSanPham').val(thText);
$('#iTenSanPham').val(cTenSanPham);
$('#iGiaSanPham').val(cGiaSanPham);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div style="margin-top: 50px;">
<table class="table table-hover" style="width: 100%;">
<tbody>
<tr>
<th>0</th>
<td class="cTenSanPham">Samsung Galaxy Note 8</td>
<td class="cGiaSanPham">23.000.000 VND</td>
<td>
<button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModal">Chỉnh sửa</button>
<button type="button" class="btn btn-danger delete-row-tb">Xóa</button>
</td>
</tr>
<tr>
<th>66</th>
<td class="cTenSanPham">Another Item</td>
<td class="cGiaSanPham">99.000.000 VND</td>
<td>
<button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModal">Chỉnh sửa</button>
<button type="button" class="btn btn-danger delete-row-tb">Xóa</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h3>Modal</h3>
<div class="modal-body">
<form>
<div class="form-group">
<label>
<h5 class="">Mã sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iMaSanPham" name="nMaSanPham" readonly>
</div>
<div class="form-group">
<label>
<h5 class="">Tên sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iTenSanPham" name="nTenSanPham">
</div>
<div class="form-group">
<label>
<h5 class="">Giá sản phẩm</h5>
</label>
<input type="number" min="500" max="999999999" class="form-control" id="iGiaSanPham" name="nGiaSanPham">
</div>
</form>
</div>
I have to develop a CRUD function to manage a DB. The button EDIT and DELETE open modal window and interact with the DB. What I cannot get is that the script works perfectly for EDIT but seems to be ignored for DELETE...what is wrong?
Those are my routes:
Route::get('/', 'DataController#overview');
Route::get('/myproject', 'ProjectsController#getForm');
Route::post('/myproject/create', 'ProjectsController#create');
Route::post('/myproject/update', 'ProjectsController#update');
Route::post('/myproject/delete', 'ProjectsController#delete');
Route::get('/upload','DataController#showform');
Route::post('/upload', 'DataController#read_xsl');
Route::get('/jobcontents', 'DataController#showscrape');
Route::post('/jobcontents', 'DataController#scrape');
This is my controller:
public function update(Request $request)
{
#$projectID = \DB::table('projects')->select('id')->get(),
try
{
//Find the project id in Project_model
#var_dump($request->toArray());
#var_dump($request->get('id'));
#exit;
$project = Project_model::findOrFail($request->get('id'));
//Set project object attributes
$project->name = $request->get('name');
$project->description = $request->get('description');
// Save/update project.
$project->save();
#return view('form_project')->with('project', $project);
return redirect()->back()->with('project', $project);
#return back();
}
catch(ModelNotFoundException $err)
{
return redirect()->action('ProjectsController#getForm');
}
}
public function delete(Request $request)
{
try
{
var_dump($request->toArray());
exit;
$project = Project_model::findOrFail($request->get('id'));
$project->delete();
return redirect()->back()->with('project', $project);
}
catch(ModelNotFoundException $err)
{
return redirect()->action('ProjectsController#getForm');
}
}
This is my blade:
//search and retrieve data from Modal
$(document).ready(function() {
$('#editModal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget)
var name = button.data('myname')
var description = button.data('mydesc')
var project_id = button.data('projectid')
var modal = $(this)
//put the values in modal <input>
modal.find('.modal-body #name').val(name);
modal.find('.modal-body #description').val(description);
modal.find('.modal-body #project_id').val(project_id);
})
$('#deleteModal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget)
var projctid = button.data('projid')
var modal = $(this)
modal.find('.modal-body #projid').val(projctid);
})
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="container">
<h3 class="jumbotron">Create here your project</h3>
<form method="post" id="projectform" class="w3-container w3-light-grey" action={{action( 'ProjectsController#create')}} enctype="multipart/form-data">
{{csrf_field()}}
<p>
<label>Project Name</label>
<input class="w3-input w3-border w3-round" name="name" type="text"></p>
<p>
<label>Project Description</label>
<input class="w3-input w3-border w3-round" name="description" type="text"></p>
<button type="submit" class="btn btn-primary" style="margin-top:10px">Create Project</button>
</form>
</div>
<div class="container-fluid">
<h3 class="jumbotron">Your Projects</h3>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>description</th>
<th>created_at </th>
<th>updated_at </th>
</tr>
</thead>
<tbody>
#if(isset($project_data)) #foreach($project_data as $project)
<tr>
<td> {{$project->id}} </td>
<td> {{$project->name}} </td>
<td> {{$project->description}} </td>
<td> {{$project->created_at}} </td>
<td> {{$project->updated_at}} </td>
<td>
<button type="button" class="btn btn-warning btn-detail open-modal" data-projectid="{{$project->id}}" data-myname="{{$project->name}}" data-mydesc="{{$project->description}}" data-toggle="modal" data-target="#editModal">Edit</button>
<button type="button" class="btn btn-danger btn-delete open-modal" data-projid="{{$project->id}}" data-toggle="modal" data-target="#deleteModal">Delete</button>
<button class="btn btn-info">See Jobs</button>
</td>
</tr>
#endforeach #endif
</tbody>
</table>
</div>
</div>
<!-- Modal (Pop up when edit button clicked) -->
<div class="modal" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="editModalTitle">Edit your project</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form method="post" action={{action( 'ProjectsController#update')}} id="frmSave" name="frmSave" class="form-horizontal" role="form">
{{csrf_field()}}
<input type="hidden" name="id" id="project_id">
<div class="form-group">
<label for="name" class="col-sm-3 control-label">Project Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" name="name" placeholder="" value="">
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-3 control-label">Description</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="description" name="description" placeholder="" value="">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" form="frmSave" class="btn btn-primary" id="btn-save" value="add">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal (Pop up when delete button clicked) -->
<div class="modal" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="deleteModalTitle">Delete your project</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form method="post" action={{action( 'ProjectsController#delete')}} id="frmDel" name="frmDel" class="form-horizontal" role="form">
{{csrf_field()}}
<input type="hidden" name="id" id="projid">
<p class="text-center">
Are you sure you want to delete this?
</p>
</form>
</div>
<div class="modal-footer">
<button type="submit" form="frmDel" class="btn btn-primary" id="btn-delete" value="">Yes, delete!</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">No, don't!</button>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
---EDIT---
These are the results when I run console.log(button) and console.log(projctid)
Hope this can help newbie like me in the future!
The problem was just related to Chrome CACHE REFRESH!!!
So be sure to clear cache (Shift+F5) and not only refresh the page when something does not work!
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:700px;">
<br />
<div class="table-responsive">
<div align="right">
</div>
<br />
<div id="employee_table">
<table class="table table-bordered">
<tr>
<th width="70%"> Name</th>
<th width="15%">Edit</th>
<th width="15%">View</th>
<th width="15%">Delete</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
$id=$row['id'];
?>
<tr>
<td><?php echo $row["employee_name"]; ?></td>
<td><input type="button" name="edit" value="Edit" id="<?php echo $id; ?>" class="btn btn-info btn-xs edit_data" /></td>
<td><input type="button" name="view" value="view" id="<?php echo $id; ?>" class="btn btn-info btn-xs view_data" /></td>
<td><button type="button" name="add" id="deleteBtn" data-toggle="modal" data-target="#delete_data_Modal" class="btn btn-info btn-xs ">delete</button></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</div>
</body>
</html>
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Employee Details</h4>
</div>
<div class="modal-body" id="employee_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="add_data_Modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<form method="post" id="insert_form">
<label>Enter Employee Name</label>
<input type="text" name="name" id="name" class="form-control" />
<br />
<label>Enter Employee Address</label>
<textarea name="address" id="address" class="form-control"></textarea>
<br />
<label>Enter Age</label>
<input type="text" name="age" id="age" class="form-control" />
<br />
<input type="hidden" name="employee_id" id="employee_id" />
<input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="delete_data_Modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<form method="post" >
<p>Are You Sure Want to Delete this data?????</p>
</form>
</div>
<div class="modal-footer">
Delete
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<!---delete.php--->
<?php
require_once('db.php');
$get_id=$_GET['id'];
// sql to delete a record
$sql = mysqli_query($conn,"Delete from employee where id = '$get_id' ");
// use exec() because no results are returned
if($sql)
{
header('location:index.php');
}
else
{
echo "not";
}
?>
This code is to edit, view and display the datas from the table using ajax through bootstrap modal box and which will display the error message after submiting the corresponding buttons. Now editing, updating and viewing datas are going successfully and also displaying error nessage successfully. But, during the time of deletion of data, when click on first delete button last datas are being deleting. Table structure and code for deletion are given above.
I am working on a piece of code and since I dont have too much experience with jquery or javascript I need your help. I want to take the data from the row when button EditBtn is clicked and set those values to modal. I tried the code below but It was not working.
Below is my code
Table :
<table id="example" class="table table-bordered table-hover">
<thead>
<tr>
<th>Ödeme Türü</th>
<th>Ödeme Başlığı</th>
<th>İçerik</th>
<th>Son Ödeme Tarihi</th>
<th>Tutarı</th>
<th>Ödeme Durumu</th>
<th>Düzenle</th>
</tr>
</thead>
<tbody>
#foreach (OdemeList item in Model)
{
<tr id="#item.Odeme.OdemeID">
<td>#item.Odeme.OdemeType</td>
<td>#item.Odeme.OdemeTitle</td>
<td>#item.Odeme.OdemeContent</td>
<td>#item.Odeme.SonOdemeTarih</td>
<td>#item.Odeme.OdemeTutar</td>
#if (#item.KullaniciOdeme.isPay == true)
{
<td>Odendi</td>
}
else
{
<td>Odenmedi</td>
<td>
<form>
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
data-amount="#item.Odeme.OdemeTutar"
data-name="#item.Odeme.OdemeTitle"
data-image="/Content/LoginCssJs/pay.png"
data-locale="auto">
</script>
</form>
</td>
#*<td>
<a data-toggle="modal" data-target=".bootstrapmodal3"><button class="btn btn-success">Öde</button></a>
</td>*#
}
<td>
<a data-toggle="modal" id="EditBtn" class="btn edit" data-target=".bootstrapmodal"><img src="#Url.Content("~/Content/Icons/edit.png")" alt="Düzenle" /></a>
</td>
<td>
<a data-toggle="modal" data-target=".bootstrapmodal2"><img src="#Url.Content("~/Content/Icons/Delete.png")" alt="Sil" /></a>
</td>
</tr>
}
</tbody>
</table>
My modal:
<div class="modal fade bootstrapmodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button data-dismiss="modal" class="close"><span>×</span></button>
<div class="modal-title">
<h3>Ödeme Düzenle</h3>
</div>
</div>
<div class="modal-body">
<form>
<label>Ödeme Türü</label>
<select class="form-control" id="OdemeTuru">
<option>Aidat</option>
<option>Isınma</option>
<option>Bina Gideri</option>
</select><br />
<div class="form-group">
<label for="odemebasligi">Ödeme Başlığı</label>
<input type="text" class="form-control" id="odemebasligi" placeholder="OdemeTitle">
</div>
<div class="form-group">
<label for="comment">Ödeme içeriği</label>
<textarea class="form-control" rows="5" id="comment" placeholder="-OdemeContent"></textarea>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Tutar</label>
<div class="input-group">
<div class="input-group-addon">TL</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="OdemeTutar">
<div class="input-group-addon">.00</div>
</div>
</div>
<div class="form-group">
<label for="odemetarihi">Son Ödeme Tarihi</label>
<input type="text" class="form-control" id="odemetarihi" placeholder="SonOdemeTarih">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Kaydet</button>
<button class="btn btn-danger" data-dismiss="modal"> Vazgeç</button>
</div>
</div>
</div>
</div>
Script:
<script>
$('a.edit').on('click', function() {
var myModal = $('.bootstrapmodal');
//// now get the values from the table
//var OdemeTuru = $(this).closest('tr').find('td.OdemeType').html();
var OdemeBaslik = $(this).closest('tr').find('td.OdemeTitle').html();
var OdemeIcerik = $(this).closest('tr').find('td.OdemeContent').html();
var OdemeTutar = $(this).closest('tr').find('td.SonOdemeTarih').html();
var SonOdemeTarihi = $(this).closest('tr').find('td.OdemeTutar').html();
//// and set them in the modal:
//$('#', myModal).val(OdemeTuru);
$('#odemebasligi', myModal).val(OdemeBaslik);
$('#comment', myModal).val(OdemeIcerik);
$('#exampleInputAmount', myModal).val(OdemeTutar);
$('#odemetarihi', myModal).val(SonOdemeTarihi);
// and finally show the modal
myModal.modal({ show: true });
return false;
});
</script>
In script you are targeting <td> class .find('td.OdemeTitle') and in table there are no class defined <td>#item.Odeme.OdemeTitle</td> what you only need is define class which you are targeting e.g
For
var OdemeBaslik = $(this).closest('tr').find('td.OdemeTitle').html();
HTML
<td class="OdemeTitle">#item.Odeme.OdemeTitle</td>
follow above example and set all <td> classes and you will be all set.
minimal fiddle example