I am using a table in which each row has three buttons(save, edit, delete). On edit button i want to hide it and want to show save button, also want ot make name column editable.
On save button i want to hide it, and want to show edit button. the html code is bellow.
<table>
<tr>
<td class="editablecontent">Name</td>
<input data-edit type="button" value="Edit">
<input data-save type="button" value="Save" class="savevarients">
<input data-delete type="button" value="Delete">
</tr>
<tr>
<td class="editablecontent">Name</td>
<input data-edit type="button" value="Edit">
<input data-save type="button" value="Save" class="savevarients">
<input data-delete type="button" value="Delete">
</tr>
<tr>
<td class="editablecontent">Name</td>
<input data-edit type="button" value="Edit">
<input data-save type="button" value="Save" class="savevarients">
<input data-delete type="button" value="Delete">
</tr>
</table>
i am using this jquery code but the problem is when i am showing save button it shows i all table, and each row become editable. i want this only on one particulaar row.
My js code is bellow.
'click [data-edit]': function(event) {
event.preventDefault()
$(event.target).hide();
$(".editablecontent").attr('contenteditable', true);
$(".savevarients").show();
},
'click [data-save]': function(event) {
event.preventDefault()
$(event.target).hide();
$(".editablecontent").attr('contenteditable', false);
Replace:
$(".editablecontent").attr('contenteditable', true);
$(".savevarients").show();
with:
$(event.target).parent().find(".editablecontent").attr('contenteditable', true);
$(event.target).parent().find(".savevarients").show();
You can use jQuerys DOM traversal methods to find the nearest td to the button which was clicked and base all selectors on that using find(). Try this:
'click [data-edit]': function(event) {
event.preventDefault()
var $button = $(event.target).hide();
var $td = $button.closest(".editablecontent").attr('contenteditable', true);
$td.find(".savevarients").show();
},
'click [data-save]': function(event) {
event.preventDefault()
var $button = $(event.target).hide();
$button.closest(".editablecontent").attr('contenteditable', false);
}
Use jQuery's $.siblings() function, for example:
$(event.target).siblings(".editablecontent").attr('contenteditable', true);
$(event.target).siblings(".savevarients").show();
I would begin the function by defining the target element:
function(event) {
$target = $(event.target);
$target.hide();
$target.siblings(".editablecontent").attr('contenteditable', true);
$target.siblings(".savevarients").show();
event.preventDefault();
}
Related
I perform an ajax call that stores some data and adds a row in a table.
In this row there is a delete button at the end so you are able to instantly delete the row you created if you want.
For some reason when I click the delete button I get redirected to the deleteurl of the ajax call I use to delete the data from the database. When I reload the page and press the delete button it works fine.
Anyone knows why this is happening?
The row that is being added:
<tr>
<td>test</td>
<td>
<form class="deleteBuildingForm" method="POST" action="http://127.0.0.1:8000/buildingimage/42" accept-charset="UTF-8">
<input name="_method" type="hidden" value="DELETE">
<input name="_token" type="hidden" value="EEV90wmDNLMd8hg9ilh6zdDAjVShXW9bfOCXdvml">
<button type="submit" class="btn btn-danger">
<i class="far fa-trash-alt"></i>
</button>
</form>
</td>
</tr>
My jquery code:
$('.deleteBuildingForm').on('submit', function(e) {
e.preventDefault();
axios.delete($(this).attr('action'), []).then(response => {
$(this).closest('tr').remove();
$('.successMessages').hide();
});
});
I think the problem is that your new rows do not have the event handlers bound to them because they were dynamically created.
Event binding on dynamically created elements?
Try adding the event handler to the document, which will always exist.
$(document).on('submit','.deleteBuildingForm' ,function(e) {
e.preventDefault();
axios.delete($(this).attr('action'), []).then(response => {
$(this).closest('tr').remove();
$('.successMessages').hide();
});
});
I am trying to change the row of the table according to the button clicked. The row changes for the first time button is clicked, but after that row value doesn't change. Also, the event listner is removed after button changes.
HTML:
<% if(post.status === 1){ %>
<input type="button" class="btn btn-danger" value="Disapprove" id="disapproveBtn-<%= i %>">
<input type="button" class="btn btn-primary" value="Send to Moderation" id="moderateBtn-<%= i %>">
<% } %>
jQuery:
$("[id|='disapproveBtn']").click(function (e) {
console.log("CLICKED");
var trIndex = $(this).closest('tr').index();
var tr = $(this).closest('tr');
var postId = $(this).closest('tr').find("#postId").text().trim();
$.post('/admin/disapprove/' + postId, (data) => {
console.log(tr);
console.log(data);
tr.html(`
<td>
${data.post.firstName}
</td>
<td>
${data.post.lastName}
</td>
<td>
${data.post.userId}
</td>
<td>
<div id="postId">
${data.post.id}
</div>
</td>
<td>
Here
</td>
<td>
${data.post.status}
</td>
<td>
<input type="button" class="btn btn-success" value="Approve" id="approveBtn-${trIndex}">
<input type="button" value="Send to Moderation" class="btn btn-primary" id="moderateBtn-${trIndex}">
</td>
`)
});
});
Due to reputation I can't make this a comment it looks like you have a dynamic id
disapproveBtn-<%= i %>
Your event listener is looking at disapproveBtn not each individual one
<% if(post.status === 1){ %>
<input type="button" class="btn btn-danger disapproveButton" value="Disapprove" id="disapproveBtn-<%= i %>">
<input type="button" class="btn btn-primary" value="Send to Moderation" id="moderateBtn-<%= i %>">
and then alter your event listener to be
$(".disapproveButton").click(function (e) {
I want to be clear on what you're expecting:
The user clicks the disapprove button inside a table row
The row changes, and should now contain an approve button
The user clicks the approve button, and something happens
The reason nothing happens when they click the approve button is that all your event listeners are created when the page first loads. The approve button is created after the page loads, and so it does not have an event listener.
I would recommend that you always have an 'approve' button in each row when the page loads, but just hide it with CSS (display:none) until the disapprove button has been clicked.
Otherwise, you will need to set an event listener on each approve button when it is created.
Thnaks in advance. I am new in web developing and stuck in one problem. I am creating a form in which I want variable number of input fields. So I have tried to create dynamic input fields creation by taking help of some online sources. I have tried everything I could imagine but the code is not working.
So far I have written this code : index.html
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<header>Dynamic Add Input Fields</header>
<form name="form1" id="form1">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><input type="text" name="name[]" id="name" class="form-control name_list"/></td>
<td><input type="button" name="add" id="add" class="btn btn-success" value="ADD"></td>
</tr>
</table>
<input type="button" name="submit" id="submit" value="Submit"/>
</form>
<script type="text/javascript" >
$(document).ready(function () {
var i = 1;
$('#add').click(function () {
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><input id="name" type="text" name="name[]" class="form-control name_list"/></td><td><input type="button" name="remove" id="row'+i+'" class="btn_remove" Value="X" /></td></tr>');
});
$('.btn_remove').on('click','.btn_remove',function () {
var button_id = $(this).attr("id");
$("#row"+button_id+"").remove();
});
});
</script>
</body>
</html>
Now when I run this code then the output comes :
Dynamic Add Input Fields
[ Input Fields ] [Add Button]
[Submit Button]
So it soould work like when I click "Add" button then it should add one more input field and a "remove" button beside it.
But if I click the "Add" button, nothing happens, just URL changes.
You need add event handler for each new item
$('#dates').append(
$('<div class="'+classname+'">'+dd+'<br /><span class="month_selector">'+dm+'</span></div>')
.click(function(){
// handle click
})
);
jQuery: adding event handler to just created element
I am listing items via table then want to change individual names of items.
<td class="tdFileName">
<?php $nameArray = explode(".", $f->file_name); ?>
<input type="text" name="ra_name" class="raName" value="{{$nameArray[0]}}">
<button type="submit" class="btn-warning btnRaName">Düzenle</button>
</td>
<td>{{$userName}}</td>
$('.btnRaName').on('click', function (e) {
e.preventDefault();
alert($('.raName').val());
location.reload();
});
When I click the individual button I only get first input's value. How can I fix that?
On click you need to pick the prev HTML element as it will be the desired input field:
$('.btnRaName').on('click', function (e) {
e.preventDefault();
var txt = $(this).prev('input.raName').val();
console.log(txt);
location.reload();
});
You need to use DOM traversal to get only the .raName element thats related to the clicked button. Try this:
$('.btnRaName').on('click', function (e) {
e.preventDefault();
var raName = $(this).closest('td').find('.raName').val();
console.log(raName);
});
Select the element relative to your clicked element using sibling()
$('.btnRaName').on('click', function (e) {
e.preventDefault();
var raName = $(this).siblings('.raName').val();
console.log(raName);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td class="tdFileName">
<input type="text" name="ra_name" class="raName" value="the value">
<button type="submit" class="btn-warning btnRaName">Düzenle</button>
</td>
<td class="tdFileName">
<input type="text" name="ra_name" class="raName" value="another value">
<button type="submit" class="btn-warning btnRaName">Düzenle</button>
</td>
</table>
I'm trying to create 2 rows of 6 rectangles (considered to be one object).
I also want to add a plus button, so that when the user clicks on either end, a new set of rectangles appear above or below the original ones. (depending on which plus button they click on)
So I am trying to achieve the following:
What I have tried/found so far:
$(function () {
$(".repeat").on('click', function (e) {
e.preventDefault();
var $self = $(this);
$self.before($self.prev('table').clone());
//$self.remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<div class="repeatable">
<table border="1">
<tr>
<td>
<input type="text" name="userInput[]" />
</td>
</tr>
</table>
<button class="repeat">Add Another</button>
</div>
<input type="submit" value="Submit" />
</form>
The above example only works for forms. Does anyone know how I can go about making this work for what I want?
I modified your code to allow add to top, or add below.
I edited your event listener to check whether the button has a specific class. If so, either add above or below. It also listens to "body" click, because new DOM elements won't have event listeners attached:
$("body").on('click', ".repeat", function (e) { //other stuff here}
Also, changed your HTML so it wasn't dependent on "form", you could swap out the element types as long as the classes remain.
$(function () {
$("body").on('click', ".repeat", function (e) {
e.preventDefault();
var $self = $(this);
var $parent = $self.parent();
if($self.hasClass("add-bottom")){
$parent.after($parent.clone());
} else {
$parent.before($parent.clone());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="repeatable">
<button class="repeat add-top">Add above</button>
<table border="1">
<tr>
<td>
<input type="text" name="userInput[]" />
</td>
</tr>
</table>
<button class="repeat add-bottom">Add below</button>
</div>
</div>