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.
Related
I am using html select2 jQuery select box..on selecting any value my table gets relevant information about the value i selected
If there are values like one , two ,three on select box...
When i select one , i gets the information about option one in html table below
When i select two also.. now i am getting values from one plus one again and two.which is quite obvious ..
I am appending to the table using jQuery each function..
I know also clearing the table first will solve my problem but the thing is in table i have a check box control as well which i select.... If i clear the table i loose the checked check box
New values gets appended to the table after clearing the table first ..
Now the problem is i want no dublicate values for like one. And when i select two . I will get
Results of 1 and 1 and 2 appended...
Second i want the checkbox to retain the checked state which i made previous..
Hope i made my question understandable... Please help me
I am stuck...
Thanks in advance ..
Have a good day...
You just need to check if a row already exists by:-
Add dynamic id to each row like id='row_"+obj.Item_Id+"' i have added.
Check if the row exists by checking the length $("#tblItemsBody tr#row_"+obj.Item_Id).length ==0
Code:-
$.ajax({
...options,
success: function(data) {
$.each(data, function (i, obj)
{
if($("#tblItemsBody tr#row_"+obj.Item_Id).length ==0 ){
$('#tblItemsBody').append("<tr id='row_"+obj.Item_Id+"'> <td> <input type='checkbox' class='chk' id=" + obj.Item_Id + "> "+
<label for=" + obj.Item_Id + " class='p-0'></label> </td> <td> " + obj.SalesOrderId + " </td> <td> " + obj.Item_Code + "</td> <td> "
+ obj.AEGG_Description + " </td> <td> " + obj.Manufacturer + "</td> <td>" + obj.OEM_Reference + " </td> </tr>"))
}
});
})
I'm using Fire-base to update a website table. It works great in adding data from database to the table in real time. The only setback is that after data is deleted from the database it is still reflecting in the website tables unless or until reloading the page, which i was trying to avoid.
At the moment i have tried using child_removed to see if it responds to any command but i'm not having much luck with it.
// web app's Firebase configuration
var firebaseConfig = {
...
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var database = firebase.database().ref().child('basketball');
//if a child is added add to webiste table
database.on('value', function(snapshot){
if(snapshot.exists()){
var content = '';
snapshot.forEach(function(data){
var val = data.val();
content +='<tr>';
content +='<td class=" align-middle text-center">';
content +='<span class="user-initials bg-success-light25 text-success">FB</span>';
content +='</td>';
content +='<td class="align-middle">';
content +='<small class="text-muted weight-300">' + val.sport + '</small>';
content +='<div><a id="calccall" href="#" class="weight-400">' + val.home_team + ' vs ' + val.away_team + '</a></div>';
content +='</td>';
content +='<td class="align-middle">';
content +='<div class="weight-400">' + val.market + '</div>';
content +='</td>';
content +='<td class="align-middle"><span class="material-icons align-middle md-18 text-success">expand_less</span>' + val.arbitrage + '%</td>';
content +='<td class="align-middle text-right">' + val.game_time + '</td>';
content += '</tr>';
});
$('#test_table').append(content)
}
});
The expected result is removing of rows from the website table once they are removed in the fire-base database
Whenever the data under basketball changes, your callback gets called again by Firebase with a new snapshot of all data under basketball. In this method you're rebuilding the entire HTML contents, and then append it to the table with:
$('#test_table').append(content)
So if you're starting out with 3 child nodes in your table, you're building HTML for that and add it to the table, so that it becomes:
row1
row2
row3
Now if you remove the last row, your callback fires again and adds the remaining data to the end of the table, so you end up with:
row1
row2
row3
row1
row2
To only show the latest state, you need to replace the existing HTML. The easiest change is to call:
$('#test_table').html(content)
With this code the output will look like this after the second time your callback fires:
row1
row2
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 the following Javascript to generate a silent call to another sheet to update a database value without refreshing the page
function UpdateDB(table,column,type){
var value = $("#Assigned").val();
$.post("UpdateValuation.php?Table=" + table + "&Value=" + value + "&Column=" + column + "&Type=" + type, {}).done();
};
This works perfectly but only for the "Assigned" table row since it is statically assigned.
I use the following php to generate the table entry with button
print "<tr><td>" . $stuff['Status'] . "</td><td ><input type=\"text\" id=\"" . $stuff['Status'] . "\" name=\"" . $stuff['Status'] . "\" value=". $stuff['Value'] ." size = \"4\" style = \"text-align: center\"/><button onclick=\"UpdateDB('NOCstatus','Status','". $stuff['Status'] ."');\">Update</button></td></tr>";
Which after variables are assigned looks like this for my "Pending" row
<input id="Pending" type="text" style="text-align: center" size="4" value="120" name="Pending"> </input>
<button onclick="UpdateDB('NOCstatus','Status','Pending');">
Update
</button>
My problem is that passing "this.value" or trying to use a variable in the javascript portion I always come up with a blank value, the only time I can get a value to be correct is by statically assigning the "#Assigned" or "#Pending" in the value field. I have hundreds of entries so I don't want to write the function over for each of these. I know there is probably something extremely simple I am missing but I cannot get the pieces to fit.
I need to pass the typed in value in the input field to the function to update the database. Please help.
function UpdateDB(table,column,type){
var value = $('#'+type).val();
$.post("UpdateValuation.php?Table=" + table + "&Value=" + value + "&Column=" + column + "&Type=" + type, {}).done();
};
?
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