I am trying to make an minimum length in my plugin live search in jquery. I am done doing the live search that connected to my table when I searched. But i would like to put some validation through my live search, like the user must input minimum of 3 characters before the search will begin.. I tried to put the minlength through my js but its not working.. Any suggestion why?
View
#extends('layout.default')
#section('content')
<br><br>
<br><br>
<div class="container">
<h4>Live Search using Laravel</h4>
<div class="col-md-6 col-lg-6 pull-right" >
<p class="pull-right">Click on the zip logo to download the file:<p>
<a href="/live_search_laravel.zip" download="live-search(laravel).zip">
<br><br>
<img border="0" src="/images/ziplogo.png" class="pull-right" alt="AngularJS" width="50" height="42">
</a>
</div>
</div>
<br>
<div class="col-md-12 col-sm-6 col-xs-12">
<div class="x_panel">
<div class="x_content">
<table class="search-table table table-hover">
<thead>
<tr>
<th>
Original File Name
</th>
<th>
Change File Name
</th>
<th>
File Extension
</th>
<th>
Image
</th>
<th>
Category
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
#foreach($data as $file)
<tr>
<td>{{ $file->original_filename}}</td>
<tD>{{ $file->rs_filename}}</td>
<td>{{ $file->file_extension}}</td>
<td><img src = "files/images/{{ $file->rs_filename}}"></td>
<td>#if($file->category=="1"){{ "Laravel" }}#endif</td>
<td>
#if($file->status=="0")
<form action="/activateImage/{{ $file->id}}" method="post">
<input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
<button type="submit" class="btn btn-primary">Activate</button>
</form>
#else
<form action="{{ url('deactivateImage', ['id' => $file->id]) }}" method="post">
<input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
<button type="submit" class="btn btn-primary">Deactivate</button>
</form>
#endif
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
<h4>All Activated Images using Foreach</h4>
#foreach($data as $file)
#if($file->status=="1")
<div class ="row">
<div class ="form-group">
<img src="/files/images/{{ $file->rs_filename }} " width ="50px" height ="50px">
</div>
</div>
#endif
#endforeach
<h4>All Images using the index</h4>
<div class ="row">
<div class ="form-group">
<img src="/files/images/{{ $data[0]['rs_filename']}} " width ="50px" height ="50px">
</div>
</div>
<div class="col-md-6 col-lg-4 pull-right">
<img src="/files/images/{{ $data[1]['rs_filename']}} " width ="50px" height ="50px">
</div>
#stop
#section('select2_js')
<script type="text/javascript" src="/js/live_search_laravel/select2.js"></script>
#stop
The plugin js
/**
**options to have following keys:
**searchText: this should hold the value of search text
**searchPlaceHolder: this should hold the value of search input box placeholder
**/
(function($){
$.fn.tableSearch = function(options){
if(!$(this).is('table')){
return;
}
var tableObj = $(this),
searchText = (options.searchText)?options.searchText:'Search: ',
searchPlaceHolder = (options.searchPlaceHolder)?options.searchPlaceHolder:'',
divObj = $('<div style="font-size:20px;">'+searchText+'</div><br /><br />'),
inputObj = $('<input style="min-width:25%;max-width:50%;margin-left:1%" type="text" placeholder="'+searchPlaceHolder+'" />'),
caseSensitive = (options.caseSensitive===true)?true:false,
searchFieldVal = '',
pattern = '';
inputObj.off('keyup').on('keyup', function(){
searchFieldVal = $(this).val();
if(searchFieldVal.length >= 3)
{
pattern = (caseSensitive)?RegExp(searchFieldVal):RegExp(searchFieldVal, 'i');
tableObj.find('tbody tr').hide().each(function(){
var currentRow = $(this);
currentRow.find('td').each(function(){
if(pattern.test($(this).html())){
currentRow.show();
return false;
}
});
});
}
});
tableObj.before(divObj.append(inputObj));
return tableObj;
}
}(jQuery));
My JS
$(document).ready(function(){
$('table.search-table').tableSearch({
searchText:'Search:'
});
});
Related
I write down a function which is bulk deletion on table. There is a table with checkbox on every rows, if some one select checkboxs then click on delete button its shows a confirmation modal, if it is close them modal then no action occurs.
In my case when I checked the boxes modal shows correct selected data, and if I then unchecked their is no problem, problem occurs when third time checked it populate previous unchecked data in modal. means checked -> unchecked -> checked.
let newTableData = "";
$('.btn-delete-employees-table-danger').hide();
let modalValue = null;
let selectedID = null;
let selectedRow = ""
let counter = 0;
console.log($('.btndelete'));
$(document).on('click', '.btndelete', function(e) {
$('.btn-delete-employees-table-danger').show();
if ($(this).prop("checked") == true || this.checked) {
counter = counter + 1;
var id = $(this).closest('tr').data('id');
selectedRow = $(`.roww[data-id=${id}]`);
selectedID = $(this).closest('tr').attr('id');
$(this).closest('tr').addClass('deleteselectedrow')
if($(this).closest('tr').addClass('deleteselectedrow')) {
$('.counter-of-selected-emp-modal').html(`${counter} employees will be deleted`)
newTableData += `
<div class="card mt-3" id="emp-${selectedID}">
<div class="d-flex justify-content-between modal-row">
<div>
<h4>${selectedRow[0].cells[1].innerText}</h4>
<p class="light-small-grey-text">ID</p>
</div>
<div>
<h4>${selectedRow[0].cells[2].innerText}</h4>
<p class="light-small-grey-text">Emp Name</p>
</div>
<div>
<h4>${selectedRow[0].cells[3].innerText}</h4>
<p class="light-small-grey-text">Emp DOB</p>
</div>
<div>
<h4>${selectedRow[0].cells[4].innerText}</h4>
<p class="light-small-grey-text">Emp CNIC</p>
</div>
</div>
</div>
`
console.log(newTableData);
}
$('.data-in-modal').html(newTableData);
} else {
counter = counter - 1;
$('.counter-of-selected-emp-modal').html(`${counter} employees will be deleted`)
selectedID = $(this).closest('tr').attr('id');
console.log($(selectedRow[0].cells[0].childNodes[1].checked))
console.log($("#emp-"+selectedID));
$(this).prop('checked', false);
$("#emp-"+selectedID).remove();
$("#emp-"+selectedID).empty();
$(this).prop("checked") == false;
$("#emp-"+selectedID).addClass('d-none')
console.log($('.data-in-modal'));
console.log(newTableData);
}
if(counter == 0 ) {
$('.btn-delete-employees-table-danger').hide();
$('.data-in-modal').html("");
newTableData = '';
}
});
function getandsetdate() {
var date = new Date().toISOString('yyyy-mm-dd').split('T')[0];
var element = document.getElementById('date')
element.value = date
return date
}
// show confirmation modal
$('.shown-modal').on('click', function (e) {
var policy_date_elem = $('input[name="emp_policy_end"]')
policy_date_elem.val(getandsetdate())
policy_date_elem.css('border', '1px #ced4da solid')
$('#showsDependentModal').modal('show');
})
$('#btnDelteYes').click(function () {
$('.deleteselectedrow').remove();
console.log($('.deleteselectedrow'))
console.log($('.deleteselectedrow').prevObject[0]);
$('.btn-delete-employees-table-danger').hide();
newTableData = ""
$('#showsDependentModal').modal('hide');
});
$('.no-btn').click(function () {
$('tr').removeClass('deleteselectedrow')
$('#showsDependentModal').modal('hide');
})
<table class="table table-bordered sortable empy-table" id="table">
<thead class="">
<tr>
<th>
Select
</th>
<!-- <th>check</th> -->
<th>Emp ID</th>
<th>Employee Name</th>
<th>DOB</th>
<th>CNIC</th>
<th class="noExport">Details</th>
</tr>
</thead>
<tbody id="search-table" class="employees_body">
<!-- {% for employee in employees %}
<tr id="{{ employee.id }}" data-id="{{ forloop.counter }}" class="roww">
<td>
<input class="btndelete" type="checkbox" name="employee_id" value="{{ employee.id }}" />
</td>
<td>
{{employee.id}}
</td>
<td>
{{employee.first_name}} {{employee.last_name}}
</td>
<td>
{{employee.date_of_birth}}
</td>
<td>
{{employee.cnic}}
</td>
<td class="noExport">
<a class="text-dark" href="{% url 'smartbenefits:employee_profile' employee.id %}">
<button class="button-detail"><span class="fa fa-info-circle"></span></button>
</a>
</td>
</tr>
{% endfor %} -->
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal hide fade" id="showsDependentModal" tabindex="-1" aria-labelledby="showssDependentModal" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content modal-secondary">
<div class="px-4 pt-5 w-100">
<div class="d-flex justify-content-between w-100">
<div class="">
<h4>Please confirm if you want to delete the below employees?</h4>
<p class="counter-of-selected-emp-modal"></p>
</div>
<i class="fa fa-window-close dependent-close-icons-modal no-btn" id="modal-dismiss" data-bs-dismiss="modal" aria-label="Close"></i>
</div>
</div>
<div class="modal-body">
<div class="data-in-modal ">
</div>
<div class="policy-end w-25 mt-3">
<!-- <input type="text" name="emp_policy_end" readonly vaule="" /> -->
<label class="date-detail" for="emp_policy_end">Policy End Date. <span
class="fa fa-info-circle"></span></label>
<span class="hover-message">Policy End date will be same as the current date. For further queries,
contact our ops team</span>
<input id="date" type="date" name="emp_policy_end" readonly />
</div>
</div>
<div class="modal-footer">
<button class="button-secondary active" id="btnDelteYes">Confirm</button>
</div>
</div>
</div>
</div>
I have my data returning to table by ajax and in that data I also have edit form.
In my edit form I have select options which the data is dynamic and returning perfectly but I am not able to add selected attribute to saved option in database (it always shows first one)
Screenshot
As you can see in this screenshot my edit form cannot get correct option in selects.
NOTE:
If my data was returning by blade loop #foreach() I would select my correct option with something like this:
{{ $location->province_id == $province->id ? 'selected' : '' }}
<option value="{{$province->id}}" {{ $location->province_id == $province->id ? 'selected' : '' }}>{{$province->name}}</option>
but since my loop is in ajax code I cannot use that method.
Code
HTML
<table id="dataTableLocations" class="table table-striped table-bordered">
<thead>
<tr>
<th width="30">Seq No.</th>
<th>Name</th>
<th>Customer</th>
<th>Province</th>
<th>City</th>
<th>Address</th>
<th>Postal Code</th>
<th width="120">Options</th>
</tr>
</thead>
<tbody id="table_dataLocations"></tbody>
</table>
Script
I have commented my select options in code so you can find them faster
//ajax call (rest of the code
success:function(data){
// return existed data to locations
$('#table_dataLocations').html('');
$(data.locations).each(function(_, i){
var url = '{{ route("customer-locations.destroy", ":id") }}';
url = url.replace(':id', i.id);
var row = `<tr data-id="${i.id}">'+
'<td>${i.seqNo}</td>'+
'<td>${i.name}</td>'+
'<td>${i.customer.name}</td>'+
'<td>${i.province.name}</td>'+
'<td>${i.city.name}</td>'+
'<td>${i.address}</td>'+
'<td>${i.postalCode}</td>'+
'<td width="120">
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" data-target="#editModal-${i.id}">
Edit
</button>
<!-- edit -->
<div class="modal fade effect-flip-horizontal editModalLocation" id="editModal-${i.id}" tabindex="-1" role="dialog" aria-labelledby="editModal-${i.id}Label">
<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="editModal-${i.id}Label">Edit ${i.name}</h4>
</div>
<form id="updateLocation" method="post" enctype="multipart/form-data">
#csrf
#method('PUT')
<div class="modal-body">
<div class="row" style="margin-bottom:7px;">
<div class="col-md-6">
<div class="form-group" style="width:100%">
<div class="sm-form-design">
<textarea style="width:100%" name="addressLocationUpdate" id="addressLocationUpdate" cols="30" rows="10" class="form-control" placeholder="Please enter your customer address." >${i.address}</textarea>
<label class="control-label">Address</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12 sm-form-design" style="margin-bottom:7px;">
// Provinces select
<select style="width:100%" class="form-control" name="province_idLocationUpdate" id="province_idLocationUpdate">
#foreach($provinces as $province)
<option value="{{$province->id}}">{{$province->name}}</option>
#endforeach
</select>
<label class="control-label">Province</label>
</div>
<div class="col-md-12 sm-form-design" style="margin-bottom:7px;">
// Cities select
<select style="width:100%" class="form-control" name="city_idLocationUpdate" id="city_idLocationUpdate">
#foreach($cities as $city)
<option value="{{$city->id}}">{{$city->name}}</option>
#endforeach
</select>
<label class="control-label">City</label>
</div>
<div class="col-md-12 sm-form-design" style="margin-bottom:7px;">
<div class="form-group" style="width:100%">
<div class="sm-form-design">
<input style="width:100%" type="text" value="${i.postalCode}" name="postalCodeUpdate" id="postalCodeUpdate" class="form-control" placeholder="Please enter your customer postalC code." required>
<label class="control-label">Postal Code</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-bottom:7px;">
<div class="col-md-3">
<div class="form-group" style="width:100%">
<div class="sm-form-design">
<input type="text" style="width:100%" name="seqNoUpdate" id="seqNoUpdate" value="${i.seqNo}" class="form-control" placeholder="Please enter your location seqNo." required>
<label class="control-label">seqNo</label>
</div>
</div>
</div>
<div class="col-md-9">
<div class="form-group" style="width:100%">
<div class="sm-form-design">
<input type="text" style="width:100%" value="${i.name}" name="nameLocUpdate" id="nameLocUpdate" class="form-control" placeholder="Please enter your location name." required>
<label class="control-label">Name</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" data-id="${i.id}" class="btn locationUpdate btn-success">Update</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- ./Edit -->
<Form id="deleteForm" method="post" action="${url}"> #csrf #method("DELETE")<button type="submit" data-id="${i.id}" class="btn btn-sm customerDelete btn-danger">Delete</button></form>
</td>'
'</tr>`;
$('#table_dataLocations').append(row);
});
// rest of the code
Question
How can I select correct option in my edit form selects?
Update
I added loop to my code like:
$.each(data.cities, function(key, value) {
//value.id == city id
//i.city_id == locations city_id
if(value.id == i.city_id)
{
$('select[name="city_idLocationUpdate"]').append('<option value="'+ value.id +'" selected>'+ value.name +'</option>');
}
else
{
$('select[name="city_idLocationUpdate"]').append('<option value="'+ value.id +'">'+ value.name +'</option>');
}
});
This works but the issue with this is for all my locations it gets city of latest row in table and latest row itself is empty.
Example:
locations table::
row 1 = city abc
row 2 = city def
row 3 = city xyz
it shows city xyz for row 1 and 2 but row 3 is empty!
PS: here i shared screen record in case my explanation wasn't
clear enough.
You can do is to separate your table as blade and return it from ajax.
Using blade you can now target selected value.
Route::get('/ajaxTableDelete', 'Controller#myAjax');
public function myAjax() {
$province = $provinceData;
$cities= $cities;
return view('view.deleteTable', ['province'=>$province,'cities'=>$cities]->render();
}
deleteTable.blade.php
// put your table here
Through ajax
success:function(data){
$('#table_dataLocations').append(data);
}
$.each(data.cities, function(key, value) {
$('select[name="city_idLocationUpdate"]')
.append(`<option value="${value.id}" ${value.id == i.city_id ? 'selected' : ''}>${value.name}</option>`)
});
Solved
I gave up on ajax handler and brought back my #foreach to html (same as my first code above)
And then I've changed it like:
#foreach($cities as $city)
<option value="{{$city->id}}" ${`{{$city->id}}` == i.city_id ? 'selected' : ''}>{{$city->name}}</option>
#endforeach
Basically i used my php method in returned html.
${`{{$city->id}}` == i.city_id ? 'selected' : ''}
Hope it helps others.
I found this section of the code online, I am just trying to complete and use it for my project.
In the script below, I tried to add an ID to identify a row, but it only reference the first row. Once that row (the first row) is deleted, the following rows cannot be deleted.
I have done some extensive research online but I could not find anything that could help me. Do you have any suggestions?
Below is the code for the table, then the script to delete the row(s) containing the file name a user would like to delete. Below is the script where I actually delete the row. I added id='link' to identify the row.
var markup = "<tr id ='link'><td>" + result + "</td><td><a href='#' onclick='DeleteFile(\"" + result + "\")' ><span class='fa fa-trash fa-fw'></span></a></td></tr>"; // Binding the file name
$("#ListofFiles tbody").append(markup);
$('#Files').val('');
$('#FileBrowse').find("*").prop("disabled", false);
}
<div class="container">
<h4>
Attachments:
</h4>
<div id="FileBrowse">
<!--Start of HTML input control button-->
<div class="row">
<div class="col-sm-4">
<input type="file" id="Files" />
</div>
<div class="col-sm-2">
<input type="button" id="UploadBtn" class="btn btn-danger" value="Upload" />
</div>
</div>
</div>
<!--End of HTML input control button-->
<div class="row">
<div class="col-sm-4">
<div id="progressbar-5">
<div class="progress-label">
</div>
</div>
</div>
</div>
<br />
<div class="row">
<!-- Start of HTML table to show the files list-->
<div class="col-sm-6">
<table class="table" id="ListofFiles">
<tr>
<th>
Files
</th>
<th>
Action
</th>
</tr>
</table>
</div>
</div>
<!-- End of HTML table showing the files list-->
<br />
<br />
<br />
<br />
</div>
You can create a function to do this. We iterate over each cell, determine if it includes the filename, and if it does we delete the row by finding the cell in the DOM using its index, moving to its parent element (tr) and removing it.
function deleteFile(filename) {
$("#ListofFiles tr td").each((index, cell) => {
cell.textContent.includes(filename) &&
$("#ListofFiles tr td").eq(index).parent().remove();
});
}
deleteFile("file.ext");
let result = "file.ext";
var markup = "<tr id ='link'><td>" + result + "</td><td><a href='#' onclick='DeleteFile(\"" + result + "\")' ><span class='fa fa-trash fa-fw'></span></a></td></tr>"; // Binding the file name
$("#ListofFiles tbody").append(markup);
$('#Files').val('');
$('#FileBrowse').find("*").prop("disabled", false);
function deleteFile(filename) {
$("#ListofFiles tr td").each((index, cell) => {
cell.textContent.includes(filename) && $("#ListofFiles tr td").eq(index).parent().remove();
});
}
deleteFile("file.ext");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h4>
Attachments:
</h4>
<div id="FileBrowse">
<!--Start of HTML input control button-->
<div class="row">
<div class="col-sm-4">
<input type="file" id="Files" />
</div>
<div class="col-sm-2">
<input type="button" id="UploadBtn" class="btn btn-danger" value="Upload" />
</div>
</div>
</div>
<!--End of HTML input control button-->
<div class="row">
<div class="col-sm-4">
<div id="progressbar-5">
<div class="progress-label">
</div>
</div>
</div>
</div>
<br />
<div class="row">
<!-- Start of HTML table to show the files list-->
<div class="col-sm-6">
<table class="table" id="ListofFiles">
<tr>
<th>
Files
</th>
<th>
Action
</th>
</tr>
</table>
</div>
</div>
<!-- End of HTML table showing the files list-->
<br />
<br />
<br />
<br />
</div>
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
I am a newbie to jquery. I have a page where I have two buttons. One of them is edit button, and the other one is delete button. When I click edit button it removes these two button and at the same place( the place where delete and edit button were before) I add three elements one of them is "save" button. This save button has a class - "save-btn". I select this button by jquery class selector. And onclick it should do something. But when I click nothing happens. Can anyone suggest whats wrong and give a solution. Thanks in advance.
<div class="container-fluid">
<div class="row">
<div class="col-md-2 "></div>
<div class="col-md-4 ">
<div class="form-tile">
<form action="" method="post">{% csrf_token %}
{% crispy form %}
</form>
</div>
</div>
<div class="col-md-4 tile">
<div class="row">
<div class="col-md-12">
<h2 style="margin-top: 0px;padding-top: 0px;text-align: center">Today's Purchase</h2>
</div>
</div>
<div class="row">
<table class="table table-hover">
<thead>
<tr>
<th>Item</th>
<th>Price</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for item in items %}
<tr>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td><button class="btn btn-primary edit-btn"><i class="fa fa-pencil-square-o"></i></button>
<button class="btn btn-danger delete-btn"><i class="fa fa-trash"></i></button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<div class="col-md-2 "></div>
</div>
And here is my javascript
<script>
$(function(){
$(".edit-btn").click(function(){
var custom_form = '<td><input type="text" size="10"></td><td><input type="text" size="10"></td> <td><button class="btn btn-primary save-btn">Save</i></button> </td>'
var parent = $(this).parent().parent().html(custom_form);
});
$(".save-btn").click(function(){
alert("asnlas");
});
});
</script>
when you create an element you must assign the event at the same time
Try this....
$(function(){
$(".edit-btn").click(function(){
var custom_form = '<td><input type="text" size="10"></td><td><input type="text" size="10"></td> <td><button class="btn btn-primary save-btn">Save</i></button> </td>'
var parent = $(this).parent().parent().html(custom_form);
$(".save-btn").click(function(){
alert("asnlas");
});
});
});