i am new to programming. so i want to make a table that user can add new rows by clicking a button.
and in that rows, user can input one fields (ID) with some registered series of numbers and then the other fields (parts name) shows the part's name according my other table.
I managed to create a code that works on adding new rows and autofill via ajax.
but unfortunately, the autofill only works on top/first row. but when i input ID on second or third row, the parts name's field did not show up.
what am i missing? this is my add row code:
<script>
var no = 0;
function addItem() {
no++;
var html = "<tr>";
html += "<td>" + no + "</td>";
html += "<td><input type='text' name='id_sap[]' onkeyup='autofills()' id='sappart' required></td>";
html += "<td><input type='text' name='material_name[]' id='namapart' required></td>";
html += "<td><input type='number' name='outcoming_qty[]' required /></td>";
html += "<td><button type='button' onclick='deleteRow(this);'>Delete</button></td>"
html += "</tr>";
var row = document.getElementById("tbody").insertRow();
row.innerHTML = html;
}
function deleteRow(button) {
button.parentElement.parentElement.remove();
// first parentElement will be td and second will be tr.
</script>
and this is my autofill code:
<script type="text/javascript">
function autofills(){
var parts = $('input[name="id_sap[]"]').val();
var sloc = $('input[name="tarea"]').val();
$.ajax({
url: 'ajax1.php',
data: {"id_sap":parts,"storage_location":sloc},
}).success(function (data) {
var json = data,
obj = JSON.parse(json);
$('input[name="material_name[]"]').val(obj.material_name);
});
}
</script>
and this is my ajax page:
<?php
//membuat koneksi ke database
$koneksi = mysqli_connect("localhost", "shaun", "godbless19", "dboptima");
//variabel nim yang dikirimkan form.php
$nomorsap = $_GET['id_sap'];
$areas = $_GET['storage_location'];
//mengambil data
$query = mysqli_query($koneksi, "SELECT * FROM material_card where id_sap = '$nomorsap' and storage_location = '$areas'");
$spare = mysqli_fetch_array($query);
$data = array(
'material_name' => $spare['material_name']);
//tampil data
echo json_encode($data);
?>
please help me , i have been wasting too much effort and time to solve this
so far i keep looking similar issues on stack overflow, none of them seems to work.
thank you very much
best regards
Try the following:
$(document).on('keyup', "#sappart input[type='text']", function() {
var parts = $('input[name="id_sap[]"]').val();
var sloc = $('input[name="tarea"]').val();
$.ajax({
url: 'ajax1.php',
data: {
"id_sap": parts,
"storage_location": sloc
},
}).success(function(data) {
var json = data,
obj = JSON.parse(json);
$('input[name="material_name[]"]').val(obj.material_name);
});
});
Related
I have a button that adds a row to a table so that data can be inserted. One of the <td> tags populates a dropdown menu. I need to get the value from that dropdown to post in an ajax call back to a php page to insert the data in the database. Everything I've tried has returned undefined for position_ID.
I'm getting a 500 Error on the POST and I think it's due to var position_ID = $(this).parents('tr').find('.positionList').val();, in the Insert function, not being set.
HTML Code:
<html>
<head>
<script src='jquery-3.4.1.js' type='text/javascript'></script>
<script src='script.js' type='text/javascript'></script>
</head>
<body>
<button type="button" name="add" id="add">Add</button>
<table id="dataTable">
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Location Number</th>
<th>Position</th>
</tr>
</table>
</body>
</html>
PHP Code:
<?PHP>
$sql = "SELECT positionID, name FROM position";
$result = mysqli_query($db,$sql);
$position_arr = array();
while( $row = mysqli_fetch_array($result) ){
$positionID = $row['positionID'];
$name = $row['name'];
$position_arr[] = array("positionID" => $positionID, "name" => $name);
}
// encoding array to json format
$JSON_array = json_encode($position_arr);
echo $JSON_array;
?>
<?PHP>
if(isset($_POST["last_name"], $_POST["first_name"], $_POST["location_num"], $_POST["position_ID"]))
{
$lastName = mysqli_real_escape_string($db, $_POST["last_name"]);
$firstName = mysqli_real_escape_string($db, $_POST["first_name"]);
$locationNum = mysqli_real_escape_string($db, $_POST["location_num"]);
$positionID = mysqli_real_escape_string($db, $_POST["position_ID"]);
$sqlInsertEmployee = "INSERT INTO employee(lastName, firstName, positionID, locationID) SELECT ?, ?, positionID, locationID from location join position p on p.positionID = ? where number = ?";
$stmtInsertEmployee = mysqli_prepare($db,$sqlInsertEmployee);
mysqli_stmt_bind_param($stmtInsertEmployee, "ssss", $lastName,$firstName,$positionID,$locationNum,);
mysqli_stmt_execute($stmtInsertEmployee);
mysqli_stmt_close($stmtInsertEmployee);
}
?>
Script code:
$('#add').click(function(){
var html = '<tr>';
html += '<td contenteditable id="lastName"></td>';
html += '<td contenteditable id="firstName"></td>';
html += '<td contenteditable id="locationNum"></td>';
html += '<td contenteditable id="positionID"><select class="positionList"><option></option></select>';
$(document).ready(function() {
var data
$.ajax({
dataType: 'json',
url: 'get-position.php',
data: data,
success: function(data) {
// begin accessing JSON data here
console.log(data)
//data = jQuery.parseJSON(data);
var html_to_append = '';
html_to_append += '<option value="0">-- Select One --</option>'
$.each(data, function(i, item) {
html_to_append += '<option value="' + item.positionID + '">' + item.name + '</option>';
});
$(".positionList").html(html_to_append);
},
})
})
html += '</td><td><button type="button" name="insert" id="insert">Insert</button></td>';
html += '</tr>';
$('#dataTable tr:first').after(html);
});
$(document).on('click', '#insert', function(){
var last_name = $('#lastName').text();
var first_name = $('#firstName').text();
var location_num = $('#locationNum').text();
var position_ID = $(this).parents('tr').find('.positionList').val();
console.log(position_ID);
if(first_name != '' && last_name != '' && location_num != '')
{
$.ajax({
url:"insert.php",
method:"POST",
data:{last_name:last_name, first_name:first_name, location_num:location_num, position_ID:position_ID},
success:function(data)
{
$('#alert_message').html('<div class="alert alert-success">'+data+'</div>');
$('#dataTable').DataTable().destroy();
fetch_data();
}
});
setInterval(function(){
$('#alert_message').html('');
}, 5000);
}
else
{
alert("All Fields is required");
}
});
The .val() method is used to get the value of an element.
Also note that #Kaka Sarmah is correct. Even this will not work because you're creating multiple elements with the same ID. IDs must be unique. Try giving it a class instead.
html += '<td contenteditable class="positionID"><select class="positionList"><option></option></select>';
Then in your javascript you can try to locate it using that class. Something like:
var position_ID = $(this).parents('tr').find('.positionList').val();
I've got the following snippet of code:
function getData(){
$.get('http://mywebsite.net/getFile.php', function(data) {
var result = JSON.parse(data);
}
That returns the following JSON data:
Object {0: "11", 1: "MobileAppBackUp150715", 2: "rob#gmail.com", FileID: "11", FileName: "MobileAppBackUp150715", FileEmail: "rob#gmail.com"}
I've two issues:
First of all my JSON data is incorrect, there should be more than one object returned. Here is how I'm creating my JSON data:
$result = mysql_query("SELECT FileID, FileName, FileEmail FROM tblfiles WHERE FileEmail = '".$email."'");
$row = mysql_fetch_array($result);
if($row['FileEmail'] == $email) {
echo json_encode($row);
}
In the table tblfiles there are 2 rows of data I know for definite.
My second issue is I'm not sure how to go about writing my JSON results into a html table.
EDIT: UPDATE:
using the following php script I've managed to output the 2 rows that I know exist in my table:
$result = mysql_query("SELECT FileID, FileName, FileEmail FROM tblfiles WHERE FileEmail = '".$email."'");
$row = array();
if(mysql_num_rows($result) > 0) {
while($r = mysql_fetch_assoc($result)) {
$id = $r["FileID"];
$row[$id] = $r;
}
}
echo json_encode($row);
That produces the following:
{"11":{"FileID":"11","FileName":"MobileAppBackUp150715","FileEmail":"rob#gmail.com"},"14":{"FileID":"14","FileName":"MyFile","FileEmail":"rob#gmail.com"}}
Now I need to use JS to get into a table in a HTML page
Or, to do everything in a single command in your callback function, you could do
$('#target').html('<table>'+$.map(result,function(d){return '<tr><td>'+$.map(d,function(e){return e;}).join('</td><td>')+'</td></tr>'}).join('\n')+'</table>');
Where #target is the id of a div where you want the table to be and result is the object you got from your $.get() call. I have not done the headings yet but that should be easy for you to fix.
var result={"11":{"FileID":"11","FileName":"MobileAppBackUp150715","FileEmail":"rob#gmail.com"},"14":{"FileID":"14","FileName":"MyFile","FileEmail":"rob#gmail.com"}};
$('#target').html('<table>'+$.map(result,function(d){return '<tr><td>'+$.map(d,function(e){return e;}).join('</td><td>')+'</td></tr>'}).join('\n')+'</table>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target"></div>
I'm going to use jquery to answer you. You can easily add jquery to your project.
var $row = "<tr><td>" + result[0] + "</td><td>" + result[1] + "</td></tr>";
var $table = $("table"); //selects your table
$table.append(row);
That's a way to do it. It is simple but probably not the best. I can recommend looking into some plugin such as knockout.js if you need to populate a lot of html based on json
hope it helps!
On the back of the accepted answer above I'd like to share the code that is working for me.
There is no need to use JSON.parse() as using getJSON() function already returns the JSON data as on object.
<script>
$.getJSON('http://safe.net/getFile.php', function(json) {
var tr;
for(var i in json)
{
tr = $('<tr>');
tr.append("<td>" + json[i].FileName + "</td>");
tr.append("<td>" + json[i].FileID + "</td>");
tr.append("<td>" + json[i].FileEmail + "</td>");
$('table').append(tr);
console.log(json[i].FileName);
}
//console.log(json);
});
</script>
Thanks to cars10 above for the help.
I need to post these values of my td tags as this an editable table using jquery. I'm not sure if the issue here is with the script or the td tags? Currently my var_dump($_POST) is returning no values.
See below code, the td tags are about 10 lines down:
<h2><u>Edit</u></h2>
<form action="ajax/name.php" name="edit_template_form" id="edit_template_form" method="post">
<?php print "<table border=\"1\" class=\"editableTable\">
<tr>
<th>Template Name</th>
<th>Template Description</th>
</tr>";
foreach($res as $row){
$temp_description = $row['template_description'];
echo "<tr>";
echo "<td id=\"edit_name\" name=\"edit_name\">". $row['template_name']. "</td>";
echo "<td id=\"edit_template\" name=\"edit_template\">". nl2br($temp_description). "</td>";
echo "<tr/>";
}
print "</table>"; ?>
</form>
<div id="template_edit"></div>
name.php
var_dump($_POST);
if (isset($_POST['edit_template'])) {
$template_edit = $db->escape($_POST['edit_template']);
$user = $db->escape($user);
$db->update('templates', array('template_description' => $template_edit), 'AND userID="'.$user.'"');
echo $_POST['edit_template'];
}
if (isset($_POST['edit_name'])) {
$template_name = $db->escape($_POST['edit_name']);
$user = $db->escape($user);
$db->update('templates', array('template_name' => $template_name), 'AND userID="'.$user.'"');
echo $_POST['edit_name'];
}
script.js
$(function () {
$("td").dblclick(function () {
var OriginalContent = $(this).text();
$(this).addClass("cellEditing");
$(this).html("<input type='text' value='" + OriginalContent + "' />");
$(this).children().first().focus();
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
//POST values
var edit_template = $('#edit_template').val();
var edit_name = $('#edit_name').val();
$.post('ajax/name.php', {edit_name: edit_name, edit_template: edit_template}, function(data) {
$('div#template_edit').text(data);
});
var newContent = $(this).val();
$(this).parent().text(newContent);
$(this).parent().removeClass("cellEditing");
}
});
$(this).children().first().blur(function(){
$(this).parent().text(OriginalContent);
$(this).parent().removeClass("cellEditing");
});
});
});
First issue: unique ids
You cannot have multiples of the same id in your HTML - this is invalid code and will provide inconsistent and/or incorrect results in your code.
To fix this change the id on the <td> elements into a class:
echo "<td class=\"edit_name\" name=\"edit_name\">". $row['template_name']. "</td>";
echo "<td class=\"edit_template\" name=\"edit_template\">". nl2br($temp_description). "</td>";
Second issue: no value being posted
You are creating an <input> in the <td>, then grabbing the <td>'s value, then replacing the content of the <td> with the value of the <input>.
There are three issues here:
a <td> element doesn't have a value - you should be using .text() to grab its content instead of .val().
You are doing this out of order - at the time you grab the content of the <td> it contains an <input>, but no text.
Once you replace the content of the <td> the element that this refers to in your keydown event handler (the <input>) no longer has any relation to the DOM so you have to store a reference to another element (eg. the parent element) to perform DOM manipulation.
So in script.js make the following changes:
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
var newContent = $(this).val();
var $parent = $(this).parent();
$parent.text(newContent);
$parent.removeClass("cellEditing");
//POST values
var edit_template = $parent.closest("tr").find(".edit_template").text();
var edit_name = $parent.closest("tr").find(".edit_name").text();
$.post('ajax/name.php', {edit_name: edit_name, edit_template: edit_template}, function(data) {
$('#template_edit').text(data);
});
}
});
Note I also removed div from the selector in the $.post callback - #id as a selector is quicker in jQuery than element#id, and ids should be unique within the DOM.
change the order of the code...
var newContent = $(this).val();
$(this).parent().text(newContent);
$(this).parent().removeClass("cellEditing");
var edit_template = $('#edit_template').text(); //here is not val, is text...
var edit_name = $('#edit_name').text(); //here is not val, is text...
//POST values
$.post('ajax/name.php', {edit_name: edit_name, edit_template: edit_template}, function(data) {
$('div#template_edit').text(data);
});
I think your problem is here:
$.post('ajax/name.php', {edit_name: edit_name, edit_template: edit_template}
edit_name and edit_template are being used as both a local variable and data key.
I would try:
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
$.post('ajax/name.php', {edit_name: $('#edit_name').val(), edit_template: $('#edit_template').val(), function(data) {
$('div#template_edit').text(data);
});
var newContent = $(this).val();
$(this).parent().text(newContent);
$(this).parent().removeClass("cellEditing");
}
});
Note: this is a stab in the dark and is completely untested!!
You will also have problems if element IDs in your html are not unique.
I would also be looking at associating an ID from your database in here somewhere.
I want to paginate results obtained thusly:
function processResponse(response){
var myObj = JSON.parse(response);
var weighInData = myObj["WEIGH-INS"];
var weights = []; // re: weigh-in count and calculating highest/lowest
var userDisplayEl1 = document.getElementById("user-display-weigh-in-data");
var weighInCountEl = document.getElementById("weigh-in-count");
var weightLowEl = document.getElementById("weight-low");
var weightHighEl = document.getElementById("weight-high");
var weightgoalEl = document.getElementById("weight-goal");
var dataRows = document.getElementById("data-rows");
userDisplayEl1.innerHTML = "";
weighInCountEl.innerHTML = "";
weightLowEl.innerHTML = "";
weightHighEl.innerHTML = "";
weightgoalEl.innerHTML = "";
dataRows.innerHTML = "";
for (var obj in weighInData) {
if (weighInData[obj].user === selUser) {
weights.push(weighInData[obj].weight);
var row = "<tr>" +
"<td class=\"date\">" + weighInData[obj].date + " </td>" +
"<td class=\"value\">" + weighInData[obj].weight + "</td>" +
"</tr>";
dataRows.innerHTML += row;
// pagination here?
} // if ... === selUser
} // for var obj in weighInData
var weighInCount = weights.length;
var weightLowest = Math.min.apply(null, weights);
var weightHighest = Math.max.apply(null, weights);
userDisplayEl1.innerHTML = weighInData[obj].user + "'s weigh-ins:";
weightLowEl.innerHTML += weightLowest;
weightHighEl.innerHTML += weightHighest;
weighInCountEl.innerHTML = weighInCount;
} // processResponse
It seems that, because I'm executing Math on the results (after the for loop), I cannot use a limit in my db query, else the math would be inaccurate (executing only on the chunks of data, and not on the entirety of the data). So it seems I'll have to paginate on the client, but I have no idea how to proceed given how I'm currently loading/displaying the data. I have looked briefly at a couple of pagination plugins but since I wasn't clear on how to implement them given my extant code, I prefer the learning curve of achieving this w/out a plugin (or jQuery).
Any suggestions/pushes in the right direction, with the assumption that I con't substantively alter what I have now (which works, and which I understand, will be most appreciated.
Btw, my server-side code, fwiw:
$table = "`WEIGH_IN_DATA`";
if ($mysqli) {
$user = $_GET['selUser'];
$i = 0;
$jsonData = '{"WEIGH-INS": [';
$stmt = $mysqli->stmt_init();
$query = "SELECT * FROM $table WHERE USER = '$user'";
$result = $mysqli->query($query) or die("Error in the query (?)" . mysqli_error($mysqli));
while($row = mysqli_fetch_array($result)) {
$i++;
$user = $row["USER"];
$date = $row["DATE"];
$weight = $row["WEIGHT"];
$jsonData .= '{"user": "'.$user.'", "date": "'.$date.'", "weight": "'.$weight.'" },';
}
$jsonData = chop($jsonData, ","); // kill the trailing comma
$jsonData .=']}';
echo $jsonData;
}
Thank you,
svs
To save time, using a plug-in might be your best bet. I'm sure there are tutorials on building your own pagination plug-in on the internet which you can google.
I picked a random jQuery pagination plug-in (datatables), appended some data via js (similar to your code), then called the plug-in on the result table. Something like this may/may not work for you. Also, this is dependent on jQuery, and I'm not sure if you can include this library or not on your website.
Here's an example using dataset and jquery: http://codepen.io/anon/pen/IbBxf
Link to datatables: http://www.datatables.net/
$(document).ready(function(){
// append some data to an existing table in the DOM
for (var i =0 ; i < 10; i++) {
var $nr = $('<tr><td>A-' + i + '</td><td>B-' + i + '</td></tr>');
$('#myTable').append($nr);
}
// after table is populated, initiate plug-in and point to table
$('#myTable').DataTable(
{ "lengthMenu": [[5, 10, -1], [5, 10, "All"]] });
});
If you can't use jQuery:
Vanilla JS: It looks like this library can do pagination, however you'll need to read through the docs:
http://listjs.com/docs/plugins/pagination
This link also looks promising for your case (vanilla JS only):
http://www.tekgarner.com/simple-pagination-using-javascript/
HTML/CSS: If you don't need a lot of features, maybe you could also look at just adding a scrollbar to your HTML table results.
How to display scroll bar onto a html table
I have a table that gets created using php drawing straight out of a database. Each td is editable and, when the mouse is clicked elsewhere, the new data is sent to the database and updated dynamically through .ajax(). That all works flawless. It does so through the data-fields of each td. They correspond with the field name in the database so the query has the proper WHERE clause.
Now, I have an ADD button that creates a new row of data that is also editable and can be edited and saved in the same manner. Currently I can add a row. I am trying to create an array of the data-fields from the first row of td so I can then add those to the newly created td during their creation loop. I am only able to get the data-field of the first and/or second td, though, not the entire row as I am intending. How, given the code I have, can I do that? Is it even possible with the configuration that I have? Thanks.
<script type="text/javascript">
/* Add a new table row to the bottom of the table */
$(document).ready(function() {
$(".add").click(function() {
$("#table").each(function() {
//create array
/* $('.edit_tr:last').find('.edit_td').each(function() {
var fieldArray = [];
fieldArray.push($('.edit_tr:last').find('.edit_td').attr('data-field'));
}); */
var fieldArray = [];
// fieldArray.push($('.edit_tr:last').find('.edit_td').last().attr('data-field'));
var $table = $(this);
// var field = $('.edit_tr').find('td:last').attr('data-field');
var id=$('#table tr:last').attr('id');
var $tr = $("#table").children('tr');
// var $th = $(this).closest('table').find('th').eq($(this).index());
// Number of td's in the last table row
var n = $('tr:last td', this).length;
var tds = '<tr class="edit_tr" id="' + id++ + '">';
// array
currentDataField = $('.edit_tr:first').find('.edit_td').first().attr('data-field');
console.log(currentDataField);
for (var i = 0; i < n; i++) {
fieldArray.push(currentDataField);
currentDataField = $('.edit_tr:first').find('.edit_td [data-field=' + currentDataField + ']').next().attr('data-field');
// currentDataField = $('.edit_tr').find('.edit_td').nextAll().attr('data-field');
}
console.log('fieldArray ' + fieldArray);
// console.log(field);
for (var i = 0; i < n; i++) {
tds += '<td class="edit_td"><input type="text" class="editbox" id="' +
id + '" data-field="' + fieldArray[i] + '"/> </td>';
console.log('fieldArray loop ' + fieldArray[i]);
}
tds += '</tr>';
// console.log(tds);
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
}
else {
$(this).append(tds);
}
});
});
});
</script>
PHP code for table creation:
public function displayTable($table)
{
//connect to DB
$con = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
echo "<table id='table' border='1'>"; //start an HTML table
$dbtable = $table;
$fields =array();
$result = mysqli_query($con, "SHOW COLUMNS FROM ".$dbtable);
//fill fields array with fields from table in database
while ($x = mysqli_fetch_assoc($result))
{
$fields[] = $x['Field'];
}
$fieldsnum = count($fields); //number of fields in array
//create table header from dbtable fields
foreach ($fields as $f)
{
echo "<th>".$f."</th>";
}
//create table rows from dbtable rows
$result = mysqli_query($con, "SELECT * FROM ".$dbtable);
while ($row = mysqli_fetch_array($result))
{
$rowid = $row[$fields[0]];
echo "<tr class='edit_tr' id='".$rowid."'>";
foreach ($fields as $f)
{
echo "<td class='edit_td' data-field='".$f."'><span id='".$rowid."' class='text'>".$row[$f]."</span>
<input type='text' value='".$row[$f]."' class='editbox' id='".$rowid."' data-field='".$f."'/> </td>";
}
$rowid++;
echo "</tr>";
}
echo "</table>"; //close the HTML table
$recordid = $rowid;
//close connection
mysqli_close($con);
}
Okay, there's a lot of code in there (and I'm not a PHP user, so I had to give it my best shot at testing out on some sample HTML :D ), so here's what I think will get you past the issue that you are having with the data-field values, but I'll stop there:
<script type="text/javascript">
$(document).ready(function() {
/* Add a new table row to the bottom of the table */
$(".add").click(function() {
var fieldArray = [];
var $table = $("#table");
var $lastRow = $table.find("tr:last");
var $dataFields = $lastRow.find("td");
$dataFields.each(function() {
fieldArray.push($(this).attr("data-field"));
});
. . . .
That should get you your fieldArray value, populated with the data-field values from all of the td elements in the last row of the table.
A couple of side notes:
again, my PHP isn't great, but it doesn't look like you are creating your th values inside a row in the table . . . they really should be wrapped in a tr element
you could get the $dataFields value in one line of code (several ways, actually), but splitting it up into three lines, like I did, is actually faster (and a little easier to read, in my opinion :) ).
If you set data attributes via jQuery function .data(), then these attributes are hidden attributes and cannot be found from $('.item [data-...]').
if you need to set string or number to data attribute, then set it with .attr('data-NAME', value) function
You can find all elements without searching data attribute and then filter elements with function jQuery.map()