I have difficulties to edit in form dynamically added rows. For example if some of the cell in the row have error - clicking on it will feed the form with selected row. Hope I'm clear.
Here is a code:
(document).ready(function(){
$("#inputtitle").append("<input type='text' name='type1' placeholder='Title'/><br>");
$("#inputremarks").append("<input type='text' name='type2' placeholder='Remarks'/><br>");
$("#inputdate").append("<input type='text' name='type3' placeholder='Date'/><br>");
$("#inputoption").append("<input type='text' name='type4' placeholder='Option'/><br>");
});
$("form").submit(function(e){
e.preventDefault();
var newName = $('form').find('input[name="type1"]').val();
var newName1 = $('form').find('input[name="type2"]').val();
var newName2 = $('form').find('input[name="type3"]').val();
var newName3 = $('form').find('input[name="type4"]').val();
$('table').append('<tr><td>' + newName + '</td><td>' + newName1 + '</td><td>' + newName2 + '</td><td>' + newName3 + '</td></tr>' );
});
Sorry for being not clear. My question was how to feed back the form when click to one of the new created row. Below is updated JSFiddle with approximate solution, but not correct, because probably need another button with name UPDATE and may be need another column with ID. DEMO.
I desided to go by different way. So I created additional button to run a script for editing cell of created table. The link to the code you can find [here] Using jQuery to edit individual table cells
Related
I'm stuck in my code.
I am working on interactive map and I need to fly on the coordinates with a problem. How do I know when is the problem active, well I have checked the status of the data and based on the status of object I have put them in different layers of Leaflet to show it on the map. Then I have put them in little table just below the map on my page where there is elements with unique class, data-longitude and data-latitude variables that summaries how many problems we have, and where they are.
Now, this is where my problem is. I am new to JS and JQuery, so i need to know how can i access a element attributes on click, so when i click on it it will do a function flyTo() and it will store a data-longitude + data-latitude attributes to that function.
Here is a little code with some ID's.
This is how I create element in JS:
var newOption = host_name;
var uniqID = brojac;
div.innerHTML += '<td class="' + uniqID + '"value="' + newOption + '" data-longitude= "' + longitude + '" data-latitude="' + latitude + '">' + newOption + '</td>';
This is how I have created a table in HTML document:
<table id="tablic" style="width:100%">
<caption>Aktivni problemi su na sljedećim DSLAM-ovima</caption>
<tr id="red" itemprop='koordinate'></tr>
</table>
Sorry I can't put more info in it because its sensitive data so yea, hope you guys understand that.
One more thing, that "host_name", I'm getting that info from an JSON Object where I am creating markers for my map.
Hope I can get some good help with it.
With JQuery:
Add a fix class to the td element:
'<td class="tdclass ' + uniqID + '"value="' ....
Then create a clicklistener on the class:
$('.tdclass').off('click').unbind('click').click(function(e){ //unbind and off is to remove the existing click events
console.log(e);
console.log($(this).html());
console.log($(e).html());
var lat = $(this).attr('data-latitude');
var lng = $(this).attr('data-longitude');
map.flyTo([lat,lng]);
});
I have a dynamically created table named "jobTable" based on some text inputs and a button and also save the data into an array at the same time. Each row of the table contains a button which is used to remove the entire row and update the array. Whenever a user tries to delete a row, the row will be correctly deleted but the array will be completely flushed and I lose all of the data. I guess it must be because of that all of the dynamically generated buttons share the same 'id' so the button's selector's function will be invoked more than one time, but it works fine on the table itself! Why is this happening?
var workExperience = [];
$("#jobTable").on('click', '#DeleteRow', function () {
$removeditem = $(this).closest('tr').parent().index();
$(this).closest('tr').remove();
delData($removeditem);
});
function delData($x) {
workExperience.splice($x - 1, 1);
console.log(workExperience); //the array will be flushed in a few steps!
}
$("#save").click( function () {
//Save the data into an array inorder to send it to the server later.
workExperience.push($("#companyName").val());
//Append data into some table in order to make the user able to see or remove each row he/she enters
$("#jobtable").append(
"<tbody>" +
"<tr>" +
"<td>" +
"<button type='button' id='DeleteRow'>"+
"</td>" +
"<td>" +
$("#companyName").val() +
"</td>" +
"</tr>" +
"</tbody>");
});
I lack the reputation to make this a comment, but could you please provide some more information on your HTML?
Alternatively if you don't mind adding a library. Knockout.js could handle this. See this tutorial.
I am not sure why you would like to store data at two places and try to maintain on delete button click.
Creating delete button with same ID is not good idea either.
I took a liberty and put together example for storing data into data- attribute for each company. I have stored just string into "data-workExp", but you can pretty much add any object like array. Here is the entire code for you:
$(function () {
$("#jobtable").on('click', '.DeleteRow', function () {
$(this).parent().remove();
});
$('#toServer').click(function () {
$('#serverData').html("");
$('.CompanyRow').each(function () {
$('#serverData').append("<div>" + $(this).data("workExp") + "</div>");
});
});
$("#save").click(function () {
$("#jobtable").append(
$('<div>').addClass('CompanyRow').data('workExp', $("#companyName").val())
.html($("#companyName").val() + "<input type='button' class='DeleteRow' value='Delete Me'>")
);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div>
<input id="companyName" type="text"><br />
<input type="button" id="save" value="Save">
<input type="button" id="toServer" value="Save to server!"/>
</div>
<div id="jobtable" >
</div>
<h1>Data goes to server</h1>
<div id="serverData"></div>
I'm trying to implement client-side input validation for a datatables-editor that I'm rewriting. The form is created dynamically and then added to a bootstrap-modal.
I have encountered a problem where adding <pattern> and/or required doesn't result in any added functionality at all. The form just accepts the input and submits, and I'm quite confused as to why that is.
EDIT:
I have added the relevant code to a plunkr
I have now added the full project. Specifically the issue is connected to the _openEditModal function and _openAddModal function, where i generate the forms dynamically and add the pattern='patternVariable'.
The pattern for this example (however it doesn't work no matter what pattern I use):
^[a-zA-Z0-9\.]+$
Creating the form:
var data = "";
data += "<form name='altEditor-form' role='form'>";
for(var j = 0; j < columnDefs.length; j++){
data += "<div class='form-group'><div class='col-sm-3 col-md-3 col-lg-3 text-right' style='padding-top:7px;'><label for='" + columnDefs[j].title + "'>" + columnDefs[j].title + ":</label></div><div class='col-sm-9 col-md-9 col-lg-9'>";
if(columnTypes[j].type.includes("text")){
data += "<input type='" + columnTypes[j].type + "' id='" + columnDefs[j].title + "' pattern='" + columnPattern[j].pattern + "' title='" + patternErrMsg[j].msg + "' required name='" + columnDefs[j].title + "' placeholder='" + columnDefs[j].title + "' style='overflow:hidden' class='form-control form-control-sm' value='" + adata.data()[0][newaData[j].name] + "'>";
}
if(...){...}
data +="</div><div style='clear:both;'></div></div>";
}
data += "</form>";
As you can see I add the tags like so:
pattern='" + columnPattern[j].pattern + "' title='" + patternErrMsg[j].msg + "' required ...
The modal:
$('#altEditor-modal').on('show.bs.modal', function() {
$('#altEditor-modal').find('.modal-title').html('Edit Record');
$('#altEditor-modal').find('.modal-body').html(data);
$('#altEditor-modal').find('.modal-footer').html("<button type='button' data-content='remove' class='btn btn-default' data-dismiss='modal'>Close</button>\
<input type='submit' data-content='remove' class='btn btn-primary' id='editRowBtn'>Save Changes</input>");
I made sure that the button has type='submit' as I've read that this is what triggers the pattern-check.
editRowBtn code:
$(document).on('click', '#editRowBtn', function(e)
{
e.preventDefault();
e.stopPropagation();
that._editRowData();
});
To make sure that my code is actually adding the attributes to the input i checked the console:
Any help or advice is greatly appreciated as I'm kinda stuck here.
It's a little hard to read your examples (a plunkr would be nice :) ), but from what I can see, you've put your submit button outside your form.
That won't work, since the button won't know what it's submitting.
Try putting the submit button inside the form.
Alternatively, try using the form attribute on the submit button, which should reference the form ID. I've never used this myself, but according to MDN, it's part of the HTML5 spec.
Form attribute description from MDN:
The form element that the input element is associated with (its form owner). The value of the attribute must be an id of a element in the same document. If this attribute is not specified, this element must be a descendant of a element. This attribute enables you to place elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.
I am perform add ,edit and delete operation using jquery.
i have create product.html file and jsproduct.js file.
My Question is i am click edit button and change selectbox value and press edit
product button
but select box value can not display table
<script async src="//jsfiddle.net/kishankakadiya/m6sn39hp/1/embed/"></script>
Check Demo
The problem is that you are using the same id for the <td>elements on your table. You are using the counter with this and the result is having more than one <td id="1"> and jQuery will not handle it correctly.
I changed your td's to use a class instead of id and added a class prefix to your td's like this:
'<td class="category-' + this.counter + ' ">' + product_category +'</td>'
'<td class="name-' + this.counter + '">' + product_name + '</td>'
And in your edit function I used the class as a selector:
$(".category-" + this.id).text(product_category);
$('.name-' + this.id).text(product_name);
Then it works correctly. You still have some trouble in setting your mode etc but hopefully you can get those fixed by yourself.
Fiddle: https://jsfiddle.net/ye6mugxe/1/
I have a table with a row at first
and users can input some info in this row and after click the add button, the row has the info will be store as a new row and show in the table
like:
here is the code I write:
var insert_html='<tr><td>'+attr.title + '</td><td>' + attr.attribute + '</td><td>' + attr.value + '</td> <td>literal_eval</td> <td class="delete_button"> <button class="delete_attr">delete</button> </td></tr>';
$(insert_html).insertBefore($(this).closest('tr'));
but if I want to add another row continually, it will fail
here is the detail:
https://jsfiddle.net/m8a0v9y8/
It is works at jsfiddle, but when I use it on my big project, everytime I click add, the page is refresh automatically.
so I go through step by step in chrome developer tools, after first everything shows normal as same as in jsfiddle, can add a new row insert before the input row
then page refresh automatically
It looks like your insert_html variable is missing opening table row tag. It should be:
var insert_html='<tr><td>'+attr.title + '</td><td>' + attr.attribute + '</td><td>' + attr.value + '</td> <td>literal_eval</td> <td class="delete_button"> <button class="delete_attr">delete</button> </td></tr>';
Your jsfiddle link is not correct.