I'm dynamically creating and appending into a table, a <tr> and a <td> with the following code:
$("#table1").append(
'<tr>'+
'<td style="cursor:pointer" onclick="pass.data.carregar(this.parentNode.rowIndex-2);">'+$("#DRVR_NAME").val()+'</td>'+
'</tr>');
It's Ok so far: I can load the Td data into another fields that I want and there's no problem on creating it.
But beyond creating it I must allow the user to remove the <td> dynamically, but as you can see, there's no ID to look for. What's the better way to allow the user to remove the <td> ?
Im trying the following code:
$("#table1>tbody>td>tr."+teste+"").remove();
But no success! The test variable is a number that I automatically define for the register.
Any help?
If test is the 0-based index of the row you want to remove...
$("#table1>tbody>tr:eq("+test+")").remove();
Set a unique id attribute when you dynamically create each cell.
<tr id="uniqueID"><td>Cell Content</td></tr>
Then use simple jquery to remove the row by id.
$('#uniqueID').remove();
Your remove code assumes there is a class on the TD. You'll have to target it with :eq() by referencing the value in your hidden field. If the value in the hidden field is a number (the index of the td the user selected = your counter), you could try something like this:
var hiddenFieldValue = $('input.hiddenFieldClassName').val();
$("#table1>tbody>tr>td:eq("+hiddenFieldValue+")").remove();
You could add a little x next to each driver name that will delete that td by changing your code a bit:
$("#table1").append('<tr>'+'<td style="cursor:pointer" onclick="pass.data.carregar(this.parentNode.rowIndex-2);">'+$("#DRVR_NAME").val()+'<span onclick="$(this.parentNode).remove()">x</span></td>'+'</tr>');
Or you could add another function to the click handler that you are binding to each <td> that will display a message in a predefined <div> asking the user if s/he wants to delete that element:
$("#table1").append('<tr>'+'<td style="cursor:pointer" onclick="pass.data.carregar(this.parentNode.rowIndex-2);askDelete(this);">'+$("#DRVR_NAME").val()+'</td>'+'</tr>');
and then define a message area (id = 'messageArea') somewhere in your HTML and the following function in your code:
askDelete(el){
var MA=$('#messageArea');
MA.empty();
MA.html('Do you want to delete ' + el.innerHTML + '?<br>').append('<span id="confirmDelete">delete</span> <span id="cancelDelete">cancel</span>')
MA.find('#confirmDelete').click(function(){$(el).remove();});
MA.find('#cancelDelete').click(function(){MA.empty();})
}
then style your delete and cancel buttons as you wish.
Related
I need to check if a text value is displayed into a dynamic field after expand the row.
I paste part of the code where the info is displayed. For the following code I have 10 rows in the screen with different IDs.
Post a screenshot with code, to not loose the code formatting.
Step by step of the text.
file name cypress.png
expand first row and check if the file name is displayed at attribute value for the dynamic field
If name not find in first row, expand next and check until find it.
New question:
How can I get the value attribute to compare it with the name of the file uploaded? I try to use invoke(attr, value) but it does not work.
<div class="bx--text-input__field-outer-wrapper">
<div class="bx--text-input__field-wrapper">
<input id="scenario-name-63add9a59b4cb45bc67d7bab"
type="text"
class="bx--text-input bx--form-item"
readonly=""
value="cypress1.png">
</div>
</div>
The issue is the id of the field that is dynamic.
I am able to list all the ids using the cypress code below.
//Expand all rows -** I know about multiple click but the idea is to use this block to do the loop**
cy.get('.bx--table-expand__svg')
.each(function($expand){
cy.wrap($expand).click()
})
**//Here I can list the id for each row, but I cant get the text for attribue value.**
cy.get('input[id*=scenario-]')
.each(function($scn,index,$scenarios){
cy.log($scn,index)
})
**//I try to use INVOKE, but it gets char by char e not the entire value.
//Here I can list the id for each row, but I cant get the text for attribue value.
There's a jQuery function that will do this
cy.get('input[id*=scenario-]')
.each(function($scn) {
const id = $scn.attr('id')
console.log('Exact id is: ', id)
})
The backend is Python with Django Models. Below is what I have in the User Inteface.
When the user clicks the "edit" pen I want a textbox input to show up right beneath the previous value, also a "submit changes" button pops up at the top of the page. The user needs to be able to edit as many properties as desired and then submit all changes at once. My object has over 75 properties so the javascript will get really long and cumbersome if I create a unique function for each property. So far I have this:
html:
<button id="edit_submit" type="submit" form="job_text_edit">Commit Changes</button>
<form id="job_text_edit" action="pass to backend"></form>
<table class="z-depth-3">
<tr>
<td style="width: 200px">Job Name:</td>
<td>
{{job.job_name}}<i class="tiny material-icons" onclick="jobEdit()">edit</i>
<input id="job_name_i" name="job_name_i" type="text" form="job_text_edit">
</td>
</tr>
<tr>
<td>Work Schedule:</td>
<td>
{{job.work_schedule}}<a><i class="tiny material-icons" onclick="jobEdit()">edit</i></a>
<input id="work_schedule_i" name="work_schedule_i" type="text" form="job_text_edit">
</td>
</tr>
</table>
javascript:
<script>
$(document).ready(function(){
$('#edit_submit').hide();
$('#job_name_i').hide();
$('#work_schedule_i').hide();
})
function jobEdit(){
$('#edit_submit').show();
$('#job_name_i').show();
$('#work_schedule_i').show();
}
</script>
The problem is that when you click any "edit" pens, all the edit boxes will pop up. Is there a way to let the function know which one was clicked so I can implement conditional statements in the function to show only the necessary boxes? I tried passing in a string with the input id but the function throws errors when given string arguments. Any help is greatly appreciated!
when you pull data from the back end, you need to pull through an id or some unique value also.
This value would be unique to each indiviudal row you show in your screenshot above, or an element in that row.
Then when you render your html, append the id (unique value) to the end of the current id (html id on the element)
So for example, where you have input id="job_name_i", you can add (append) the unique value (id) to the end of it upon rendering.
You can then, instead of passing through your function call in the onclick (and defining the onClick in the html), you can set up an event listener in the init part of your javascript like so:
$("[id^=job_name_i]").on('click', event => {
const clickedElement = $(event.target);
});
The above will listen for a click on any element that begins with
job_name_i (remember your unique value will be appended to the end of it.
So the above would go inside the below block.
$(document).ready(function(){
});
You now have access to the specific clicked element on the page, to do as you need, adding stuff below or above it. So you can access the ID with by using event.target.id and you can pass that in to your function.
Something like the following.
function jobEdit(id){
$(id).show();
// OR
$(someelement + id).show();
}
I have an HTML table that is filled dynamically and only shows a certain button in the first column if specific conditions are met, otherwise this button does not appear.
The button looks as follows (it always has the name = voidBtn):
<input type="button" name="voidBtn" value="Void" />
How can I check whether the current row contains this button or not ?
I was thinking of something like the following but didn't know how to write this the right way:
if($(this).closest('tr').find('input[name=void]') ...
OR
if($(this).closest('tr').find("td:eq(1):contains('voidBtn')") ...
I just need to know if the current row has such a button as then I want to click on it and do some other stuff.
Your way of checking should be fine, you just need to ask if it found it with length:
if($(this).closest('tr').find('input[name=void]').length > 0){
// there is a button
}
Considering $(this) as current row then you can find button like this...
$(this).find('input[name=voidBtn]')
$( '#'+tableId + "> tbody > tr> td").find('td','searched-string')
Here is the Example where we can find an element inside a row containing searched-string.Here yoy may use other option as my string was coming for input text field.
Let say you want to find all the rows of the table that contains a particular String "STRING" then you may write like this
**$('#tableid > tbody').find('tr','STRING')**
You may also count the number of row by
**$('#tableid > tbody').find('tr','STRING').length**
In Above answer i already declared tableid as Var in my Jquery Code.
Been looking around and I cant seem to find an answer to this so maybe im wording it wrong but here it goes.
So I have a table displaying data from a database. In jQuery I have made it so a row can be added with empty inputs and then submitted to the database, this works fine.
I am now attempting to be able to edit it. So each row will have a button to edit that row, the button will put the row values into inputs so you can change the value and update the database. How can I do this? I was looking into using this here but Im not sure how I can get the value of the input boxes without them having some sort of ID.
jQuery I was trying to use:
$('#tbl').on('click','.xx',function() {
$(this).siblings().each(
function(){
if ($(this).find('input').length){
$(this).text($(this).find('input').val());
}
else {
var t = $(this).text();
$(this).text('').append($('<input />',{'value' : t}).val(t));
}
});
});
Am I over thinking this? Should I just be grabbing the values and then putting them in pre-made input boxes?
Update:
HTML:
sb.AppendLine("<table style='width: 80%;'>")
sb.AppendLine("<tr class='inputRowbelow'>")
sb.AppendLine("<td style='width: 20%;' class='ui-widget-header ui-corner-all'>Area</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Details</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Options</td>")
sb.AppendLine("</tr>")
For Each w In workItems
sb.AppendLine("<tr>")
sb.AppendLine("<td>" & w.area & "</td>")
sb.AppendLine("<td>" & w.details & "</td>")
sb.AppendLine("<td><a href='#' class='fg-button ui-state-default ui-corner-all edit'><img src='/images/spacer.gif' class='ui-icon ui-icon-pencil' /></a></td>")
sb.AppendLine("</tr>")
Next
sb.AppendLine("</table>")
There are a couple of ways to do this, including changing your VB code to add extra data to the html, but I will answer this from a pure javascript/JQuery solution.
First of all you need to handle the click event for each edit button, after that you find the matching row, and then you can get the first to td elements of that row...
$(".edit").click(function(e){
e.preventDefault();//prevent the link from navigating the page
var button = $(this);//get the button element
var row = button.closest("tr");//get the row that the button belongs to
var cellArea = row.find("td:eq(0)");//get the first cell (area)
var cellDetails = row.find("td:eq(1)");//get the second cell (details)
//now you can change these to your inputs and process who you want
//something like this...
ConvertToInput(cellArea, "area");
ConvertToInput(cellDetails, "details");
});
function ConvertToInput(element, newId){
var input = $("<input/>");//create a new input element
input.attr("id", newId);//set an id so we can find it
var val = element.html();//get the current value of the cell
input.val(val);//set the input value to match the existing cell
element.html(input);//change the cell content to the new input element
}
Here is a working example
From that you can then do the saving that you say you have already implemented, using the ID values of each field to get the values to save.
Instead of using a For Each ... in ... Next loop, use a a For loop with a counter. give each button and each row an ID with the current counter value at the end. You can then use Jquery to make each row editable separately, because each row has a row number now.
I'm creating a validation script for a multi-step form, each group is inside a table and I want to check that the containing table has a required field inside it.
I've tried to implement this as below:
(where a = table id
.required = class, but the classes are like class = "something required")
function validForm(a) {
var myVar = $('a').find('.required').val();
alert(myVar);
}
the problem is that this code returns undefined. This is my first time using a .find function and I am having a hard time understanding how to use it.
HTML:
<table id = "default">
<tr><td>Default</td></tr>
<tr><td>Field name</td><td><input type="text" name="first_name" maxlength="35" class="txtfield-cu1 required" title="First Name"></td></tr> <- repeat a couple of times
if a is the table id, you will need to select by $('#a') instead of $('a').
In jQuery selection (and CSS) '#a' selects the tag with id = 'a', whereas a selects the <a> tag.
Edit: if a here stands for a variable that represents the id of the table, then you can use
$(a) to select it.
Edit 2: jsfiddle link
Try $("#a") to select by ID and not by tag name.