Call javascript function from modal popup button

Call javascript function from modal popup button - javascript

I´m can´t make this work. Can anyone help me?
First I have a page that opens a modal popup like this:
<label class="h5"> <button id="btnPopup" name="btnPopup" type="button" class="btn-u-green" data-toggle="modal" data-target="#responsive">Clique aqui</button> <span id="txtEscolherEstabelecimento">para escolher o estabelecimento</span> </label>
<div class="modal fade bs-example-modal-lg" id="responsive" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel4">Escolha o Estabelecimento</h4> <input type="hidden" name="nuEstabelecimentoEscolhido" /> </div>
<div class="modal-body"> <div class="row">
<label class="label"> Qual o Estado?</label>
<div class="col-md-6">
<label class="select">
<select id="cmbUf" name="cmbUf" class="form-control">
<option value="0">::: Selecione :::</option>
<?php
$ufs = $objUfs->getUfs($objConexao);
while($ufs = $objConexao->converterResultado()){
?>
<option value="<?php echo $ufs['CoUf']?>"><?php echo $ufs['NoUf']?></option>
<?php }?>
</select>
<i></i>
</label>
</div> </div>
<div class="row">
<label class="label"> Digite o nome para pesquisa</label>
<div class="col-md-12">
<label class="input">
<i class="icon-append fa fa-search"></i>
<input type="text" id="NoEstabelecimentoPesquisa" name="NoEstabelecimentoPesquisa" placeholder="Digite o nome principal do Estabelecimento">
</label>
</div> </div>
<div class="modal-footer">
<button type="button" class="btn-u btn-u-default" id="btnPesquisarEstabelecimento" name="btnPesquisarEstabelecimento"><i class="fa fa-search"></i> Pesquisar</button> </div>
<table id="grdEstabelecimentosEncontrados" class="table" data-height="300" data-id-field="id" >
<thead style="font-size: 12px;" >
<tr>
<th data-field="Id" data-visible="false">Id</th>
<th data-field="NoEstabelecimento" data-visible="true">Nome</th>
<th data-field="NoTipoEstabelecimento" data-visible="true" >Tipo do Estabelecimento</th>
<th data-field="Endereco" data-visible="true">Endereço</th>
<th data-field="CidadeUf">Cidade/Uf</th>
<th data-field="Acao">Ação</th>
</tr>
</thead>
<tbody style="font-size: 12px"></tbody> </table>
</div>
<div class="modal-footer"> <button type="button" class="btn-u btn-u-default" data-dismiss="modal"><i class="fa fa-close"></i>Fechar</button> </div>
</div> </div>
After modal is opened I have a button on each line from table that I want to call a Javascript from the main page, each line look like this:
<tbody style="font-size: 12px">
<tr>
<td>1</td>
<td>Smaff Hyundai</td>
<td>Particular</td>
<td>Trecho SIA Trecho 1 - até 628 - lado par</td>
<td>Brasília</td>
<td><button id="button1" class="btn btn-success" type="button"><i class="fa fa-check-circle-o" onclick="SelectItem(1);"></i> Selecionar</button></td>
</tr>
</tbody>
Then I have thejavascript function I want to call:
function SelectItem(nuEstabelecimento) {
alert('Here' + nuEstabelecimento);
}
The row is added to table from another script that appends a row, like this:
$.each(dataJSON, function(idx, elem){
newTR = ('<tr>');
newTR += ('<td>'+elem.NuEstabelecimento+'</td>');
newTR += ('<td>'+elem.NoEstabelecimento+'</td>');
newTR += ('<td>'+elem.NoTipoEstabelecimento+'</td>');
newTR += ('<td>'+elem.Endereco+'</td>');
newTR += ('<td>'+elem.CidadeUf+'</td>');
newTR += ('<td><button id="button'+elem.NuEstabelecimento+'" class="btn btn-success" type="button"><i class="fa fa-check-circle-o" onclick="SelectItem(1);"></i> Selecionar</button></td>');
newTR += ('</tr>');
$('#grdEstabelecimentosEncontrados tbody').append(newTR);
});
Everything is work fine but the onclick button added don´t do anything and no error occurs on console.
Any Helps on that? Thanks!!!

Use event delegation instead of adding a click handler to every row:
$('#grdEstabelecimentosEncontrados').on('click', '.btn-success', function(e){
//this code will run for all current
//and future elements with the class of .btn-success
});

Related

how to post data from a php consult to a modal and generate a UPDATE

I am trying to pass data from an external query to a modal to be able to generate an update, but I notice that the variable of said query is not being passed to me, could you help me in what I am wrong, I am starting, my modal
<div id="content">
<button type="button" class="btn btn-danger" id= "hide" onclick="hide()">Close</button>
<form action="addcredits.php" method="POST" id="form1">
<input class="form-control" placeholder="Ingresa el total de efectivo" name="username" id="username">
<input type="button" name="btn" value="Ingresar" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-default" />
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Confirmar
</div>
<div class="modal-body">
¿La cantidad ingresada es correcta?
<table class="table">
<tr>
<th>Efectivo</th>
<td id="uname"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input class="form-control" type="text" name="business_name" value="<?php echo $consult["id_students"]; ?>" placeholder="<?php echo $consul['id_students']; ?>">
<p><?php echo $consult["id_students"]; ?></p>
<p><?php echo $consult["id_students"]?></p>
Submit
</div>
</div>
</div>
</div>
</form>
and this is my extern consult
<?php
include("conection.php");
echo
'
<div class="container-fluid ">
<div class="row">
<div class="col-lg-12">
<table class="table table-hover">
<tr >
<th scope="col">Grupo</th>
<th scope="col">Nombre</th>
<th scope="col">Créditos</th>
</tr>
';
$accion = mysqli_real_escape_string($con,$_POST['accion']);
if($accion == 4)
{
$mi_busqueda = mysqli_real_escape_string($con,$_POST['mi_busqueda']);
$resultados = mysqli_query($con,"SELECT * FROM students WHERE
student_qr LIKE '%$mi_busqueda%'");
while($consult = mysqli_fetch_array($resultados))
{
echo
'
<tr >
<td>'.$consult["student_group"].'</td>
<td>'.$consult["student_name"]." " .$consult["student_secondname"]. " ". $consult["student_lastname"]. " ".'</td>
<td>'.$consult["student_credits"].'</td>
<td><button type="button" class="btn btn-warning" id= "show" onclick="show()" >Añadir Creditos</button></td>
</tr>
</div>
</div>
</div>
';
}
}
?>
I tried doing an echo but I don't see results, I suppose that the data remains from the external query, I don't know how I could generate said query on the same page by calling the modal instead of sending the data with javascript through JSON

How can I keep a checkbox always selected?

There is this modal in which I have a group of checkboxes being generated by the directive x-for from AlpineJS (v2.8.2), and the .sapId checkbox is the one that needs to be always selected no matter what. I partially got what I wanted here using jQuery: $('.sapId').prop('checked', 'checked').attr('disabled', 'disabled');.
This made the checkbox checked and unclickable, and that is exactly what I want. Problem: Whenever I click another checkbox from the .selectColumns list, the .sapId loses the selected status and I can't select it anymore. Till now I've done some searches and tried to do this using jQuery, but would be nice if there was a way of doing via Alpine or Livewire itself.
Here is the modal:
<div x-data="{
data:columns,
selectedColumns: [],
}"
wire:ignore class="modal fade" id="selectColumnsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Selecionar Colunas</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i aria-hidden="true" class="ki ki-close"></i>
</button>
</div>
<p class="mx-10 mt-4">Selecione até 9 colunas para exibir...</p>
<div class="text-center mx-10">
<div class="input-icon">
<input type="text" class="form-control" placeholder="Nome da coluna..." id="searchColumns">
<span>
<i class="flaticon2-search-1 text-muted"></i>
</span>
</div>
</div>
<div class="modal-body">
<div class="mt-6 text-center">
<table id="selectColumnsTable" class="table table-hover gy-5">
<thead>
<th class="text-left">
Coluna
</th>
<th class="text-left">
<i class="la la-eye"></i>
</th>
<thead>
<tbody>
<tr>
<td class="text-left ml-4">
<span x-html="columns[1].title"></span>
</td>
<td class="text-left">
<input x-model="selectedColumns" class="sapId" id="sapId" type="checkbox" :value=columns[1].field>
</td>
</tr>
<template x-for="(column, index) in data" :key="index">
<tr x-show="column.field != 'id' && column.field != 'sap_id' &&column.title != '' && column.title != 'CÓDIGO'">
<td class="text-left ml-4">
<span x-html="column.title"></span>
</td>
<td class="text-left">
<input x-model="selectedColumns" id="selectColumns" class="selectColumns" type="checkbox" :value=column.field>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
<div class="modal-footer d-flex justify-content-around">
<button #click="displaySelected(selectedColumns)" type="button" class="btn btn-primary col-5" data-target="click">Exibir selecionadas</button>
<button type="button" class="btn btn-danger col-5" data-dismiss="modal">Cancelar</button>
</div>
</div>
</div>
</div>
And just in case, this is the jQuery I'm using to control the limit of boxes that can be selected:
$(".selectColumns").change(function () {
var displayLimit = 8;
var selected = $('.selectColumns:checked').length;
if (selected > displayLimit) {
$('.selectColumns').not(':checked').attr('disabled', 'disabled');
} else {
$('.selectColumns').not(':checked').removeAttr('disabled');
}
});
All suggestions are welcome, thanks in advance!

<td class="text-left">
<input x-model="selectedColumns" class="sapId" id="sapId" type="checkbox" disabled="disabled" :value=columns[1].field checked>
</td>
<label for="checkbox">checkbox</label>
you can simply include "checked" and "disabled" in the input tag.

Finally I got solution for your problem, you can do something like this to limit the number of checkbox checked using apline:
<input x-model="selectedColumns" type="checkbox" :disabled="selectedColumns.lenght > 8 && !$el.checked">
SelectedColumns.length returns the length off the array and $el is a magic property that can be used to retrieve the current DOM node.
And for the .sapId you can do something like this:
<input x-model="selectedColumns" type="checkbox" checked disabled>
But you have to hardcode the value of .sapId in order to keep it checked that how x-model works. x-model allows you to bind the value of an input element to Alpine data.

How to update values for each columns of row from modal?

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>

How to create a simple edit button on crud?

i'm trying to make a simple Crud for my homework . most of my code works properly for the most part, except the edit button. it only edits the first row. below, i provide my TS code along with my HTML. for the HTML i'm using Modal windows. so everytime i click on the edit buttons. a modal will appears
function create() {
let user: string = String($("#username").val());
let data: JQuery = $("<tr id='crudData'><td>" + user + "</td><td><button class='btn btn-info' data-toggle='modal' data-target='#crudModal'>Bearbeiten</button></td></tr>");
$("#crud").append(data);
}
function edit() {
let user2: string = String($("#username2").val());
let data2: JQuery = $("<tr id='crudData'><td>" + user2 + "</td><td><button class='btn btn-info' data-toggle='modal' data-target='#crudModal'>Bearbeiten</button></td></tr>");
$("#crudData").replaceWith(data2);
}
$("#userbstg").on("click", create);
$("#saveEdit").on("click", edit);
<section>
<div class="container">
<div class="row">
<div class="col-md-8">
<h3 class="section-heading">Aufgabe - Usermanager</h3>
<label for="username">Username:</label>
<input id="username" class="form-control col-md-3" type="text">
<button id="userbstg" class="btn btn-info">Add</button>
<table id="crud" class="col-md-4 table">
<tr>
<th class="col-2" id="user">User</th>
<th class="col-2" id="edit"></th>
</tr>
</table>
</div>
</div>
</div>
<div class="modal fade" id="crudModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<label for="username2">Username:</label>
<input id="username2" class="form-control col-md-12" type="text">
<button type="button" id="saveEdit" class="btn btn-default" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
</section>

Not able to take data from table and set to bootstrap modal

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

Develop Reference

JavaScript is the programming language of the Web.

Call javascript function from modal popup button - javascript

Use event delegation instead of adding a click handler to every row: $('#grdEstabelecimentosEncontrados').on('click', '.btn-success', function(e){ //this code will run for all current //and future elements with the class of .btn-success });

Related

how to post data from a php consult to a modal and generate a UPDATE

How can I keep a checkbox always selected?

How to update values for each columns of row from modal?

How to create a simple edit button on crud?

Not able to take data from table and set to bootstrap modal

Categories

Resources