I did a web app with some JavaScript and jQuery which works well on PC but on mobile those functions do not work.
Functions like creating a table row dynamically at clicking a button using :
var table = document.getElementById("table");
var row = table.insertRow(-1);
var cell1 = row.insertCell(-1);
also my ajax call is not working on mobile, below is some major part of the function (creating table row and ajax call)
$.ajax({
type: 'POST',
url: 'getProduct',
data: { product_id:product_id },
dataType : 'json',
success:function(response){
var name = response.products['name'];
var id = response.products['id'];
var bid = document.getElementById('buyer_id').value;
var sid = <?php echo $this->session->userdata('id'); ?>;
var category = document.getElementById('category').value;
var date = document.getElementById('date').value;
if(category=='agent'){
var price = response.products['agent_price'];
}else{
var price = response.products['vendor_price'];
}
var table = document.getElementById("table");
var row = table.insertRow(-1);
var cell1 = row.insertCell(-1);
var cell2 = row.insertCell(-1);
var cell3 = row.insertCell(-1);
var cell4 = row.insertCell(-1);
var cell5 = row.insertCell(-1);
cell1.innerHTML = count;
cell2.innerHTML = name;
cell3.innerHTML = '<input type="text" name="quantity[]" onblur="addamount()" />';
cell4.innerHTML = price;
cell4.id=count;
cell5.innerHTML = '<span class="glyphicon glyphicon-trash"></span> Delete';
}
});
Related
I want to add some rows in the tables but they have the same name. I've got the individual row length of the 3 tables but when i insert the row, it only inserted in the first table. Here is my code using javascript:
$('table').each(function() {
var sam = $('tbody tr', this).length;
var table = document.getElementById("tb-calendar1");
// alert(sam);
if(sam < 8){
var row = table.insertRow(7);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
cell1.innerHTML = " ";
cell2.innerHTML = " ";
cell3.innerHTML = " ";
cell4.innerHTML = " ";
cell5.innerHTML = " ";
cell6.innerHTML = " ";
cell7.innerHTML = " ";
}
});
Here's the picture
Looks like you have table elements with duplicate email IDs. IDs must be unique. Due to duplicate ids, your selector for table(document.getElementById) is selecting first table only.
You can rather use context this to target current table element in .each().
var table = this;
I am using Struts Version 1.2.9.
I have a requirement to add rows dynamically to a table using JavaScript which is working fine.
It looks like:
function addRow(tableID) {
var table = document.getElementById(tableID);
rowCount += 1;
if(rowCount <= 5){
var row = table.insertRow(3);
var col1html = "<label for='incomecategory'>Other Income:</label>";
var col2html = "<select id='incomecategory' name='income_category'><option value='' selected>Please Select</option><option value='rent'>Rent</option><option value='interestanddividends'>Interest and Dividends</option><option value='governmentbenefits'>Government Benefits</option><option value='other'>Other</option></select>";
var col3html = "$<input type='text' name='incomevalue' id='incomevalue'/>";
var col4html = "<select id='incomefrequency' name='income_frequency'><optgroup label='Per'><option value='perweek'>Per Week</option><option value='perfortnight'>Per Fortnight</option><option value='peryear'>Per Month</option><option value='peryear'>Per Year</option><option value='' selected>Per</option></select>";
var col5html = "<input type='button' value='X' onclick='removeRow(this)'/>"
var col1 = row.insertCell(0); col1.innerHTML=col1html;
var col2 = row.insertCell(1); col2.innerHTML=col2html;
var col3 = row.insertCell(2); col3.innerHTML=col3html;
var col4 = row.insertCell(3); col4.innerHTML=col4html;
var col5 = row.insertCell(4); col5.innerHTML=col5html;
}else{
alert('Reached maximum no of rows');
}
}
If you see carefully I have hardcoded all the HTML tags to build a row, but I want to instead use struts tags in creating rows.
Using the following code to add a html table to an element. I would like to add a thin, grey line border around cell2, cell3, cell4 & cell5.
I know how to do this for a normal HTML table, but am unsure how to add it in to return it as an innerHTML.
var table = document.createElement('table');
var row0 = table.insertRow(0);
var cell1 = row0.insertCell(0);
cell1.innerHTML = "My Table";
var row1 = table.insertRow(1);
var cell2 = row1.insertCell(0);
var cell3 = row1.insertCell(1);
cell2.innerHTML = "Id";
cell3.innerHTML = "1019201" + "</br>";
var row2 = table.insertRow(2);
var cell4 = row2.insertCell(0);
var cell5 = row2.insertCell(1);
cell4.innerHTML = "Name";
cell5.innerHTML = "John Doe" + "</br>";
return table.innerHTML;
You can try something like this
<script>
var table = document.createElement('table');
table.setAttribute('border', '5px solid black;');
var row0 = table.insertRow(0);
var cell1 = row0.insertCell(0);
cell1.innerHTML = "<center><b> <FONT COLOR='FF6600'> Feature Properties </FONT> </b> </center> </br>";
var row1 = table.insertRow(1);
var cell2 = row1.insertCell(0);
var cell3 = row1.insertCell(1);
cell2.innerHTML = "Id";
cell3.innerHTML = "1019201" + "</br>";
var row2 = table.insertRow(2);
var cell4 = row2.insertCell(0);
var cell5 = row2.insertCell(1);
cell4.innerHTML = "Name";
cell5.innerHTML = "John Doe" + "</br>";
var div = document.createElement('divTable');
div.appendChild(table);
document.write(div.innerHTML);
</script>
You aren't actually returning the table, you are only returning the stuff inside the table...
return table.innerHTML;
The innerHTML won't include the <table> element that wraps it.
If you returned the table, you could append it, rather than squirt the HTML into the container.
return table;
Now you have a table element that you can append to your page...
document.getElementById('myelem').appendChild(table);
This will solve the cramping issue as the rows won't be orphaned from a table.
You can use CSS to style it all - let me know if you need help on that.
this is my code to add dynamic rows on a table when click on the add button. Now i need to get the values entered into the text boxes and submit to DB.
<div id="addinput">
<p>
<button name="add" onclick="myFunction(this)" value="'.$btn_count.'"><font color="#FF0000" size="4">+</font></button>
</p>
</div>
</td>
This is my functon to add dynamic rows to table, just below the row where we click
<script>
function myFunction(y)
{
var f = y.parentNode;
var d = f.parentNode;
var g = d.parentNode;
var c =g.parentNode.rowIndex;
var table = document.getElementById("myTable");
var row = table.insertRow(c+1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
cell1.innerHTML = "<form name='frm_sub' id='frm_id' action='#'><input type=text name='txt_id' id='id_id' size=10 placeholder=Id>";
cell2.innerHTML = "<input type=text name='txt_item' id='id_item' size=10 placeholder=Item>";
cell3.innerHTML = "<input type=text name='txt_cost' id='id_cost' size=10 placeholder=0.00>";
cell4.innerHTML = "<input type=text name='txt_wp' id='id_wp' size=10 placeholder=0.00>";
cell5.innerHTML = "<input type=text name='txt_rp' id='id_rp' size=10 placeholder=0.00>";
cell6.innerHTML = "<input type='button' name='submit' id='id_submitBtn' value='Save' size=10 onclick='form_submit()' ></form>";
document.getElementById("myTable");
}
function form_submit()
{
var item_name = $("input#id_item").val();
var cost = $("input#id_cost").val();
var wp = $("input#id_wp").val();
var rp = $("input#id_rp").val();
var dataString = 'item_name='+ item_name + '&cost=' + cost + '&wp=' + wp+ '&rp=' + rp;
alert(dataString);
$.ajax({
type: "POST",
url:newAdd.php,
dataType: "json",
type: "POST",
data: {
items : $("#id_item").val(),
cost : $("#id_cost").val(),
wp : $("#id_wp").val(),
rp : $("#id_rp").val(),
},
success: function () {
alert("Success");
}
});
}
in newAdd.php i wrote
echo$itemName =$_POST["txt_item"];
$insert = mysql_query('INSERT INTO item (item) VALUES ('$itemName');
But this is not working..
if you are getting that alert then this will work
function form_submit()
{
var item_name = $("input#id_item").val();
var cost = $("input#id_cost").val();
var wp = $("input#id_wp").val();
var rp = $("input#id_rp").val();
var dataString = 'item_name='+ item_name + '&cost=' + cost + '&wp=' + wp+ '&rp=' + rp;
$.ajax({
type: "post",
url: "newAdd.php",
data:dataString,
success: function(msg){
alert('success');
}
});
}
Try this ajax request. Hope this will help you -
$.ajax({
type: "POST",
url:'newAdd.php',
dataType: "json",
data: {
items : $("#id_item").val(),
cost : $("#id_cost").val(),
wp : $("#id_wp").val(),
rp : $("#id_rp").val()
},
success: function () {
alert("Success");
}
});
I am trying to insert Form into Table, but <form> tag is not inserted (only input type).
$(function () {
var table = document.getElementById("transport");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
var cell8 = row.insertCell(7);
var cell9 = row.insertCell(8);
var cell10 = row.insertCell(9);
cell1.innerHTML = "<form action='/Transport/Grid' id='paieska' method='post'>";
cell2.innerHTML = "<br><br><input class=\"form-control\" id=\"slicplate\" name=\"slicplate\" placeholder=\"Valst. Nr.\" type=\"text\" value=\"\">";
cell10.innerHTML = "</form>";
});
As I mentioned above in the comments.
form start and end tag should be contained within a container.
But you are starting it in one cell and closing in another. That will not work.
Instead you can do this:
cell1.innerHTML = "<form action='/Transport/Grid' id='paieska' method='post'>";
cell1.innerHTML += "<br><br><input class=\"form-control\" id=\"slicplate\" name=\"slicplate\" placeholder=\"Valst. Nr.\" type=\"text\" value=\"\">";
cell1.innerHTML += "</form>";
And so that you know, there are many better ways... This is kind of old school way..(as mentioned again in comments)
var data =[];
function add(){
var fname = document.getElementById("firstname").value,
lname= document.getElementById("lastname").value,
email = document.getElementById("email").value,
age = document.getElementById("age").value,
mobile = document.getElementById("mobile").value,
gen = gender1.checked?gender1.value:gender2.value,
date = document.getElementById("date").value,
adress = document.getElementById("address").value,
city = document.getElementById("city").value,
state = document.getElementById("state").value,
zip = document.getElementById("zip").value,
pan = document.getElementById("pan").value,
tan = document.getElementById("tan").value,
aadhar = document.getElementById("aadhar").value,
obj = {name1:fname,name2:lname,mail:email,aged:age,num:mobile,gend:gen,tarrek:date,
add:adress,place:city,stat:state,zpicode:zip,panc:pan,tanc:tan,aadharc:aadhar}
data.push(obj);
var table = "<table class='table table-striped table-bordered margin' id='delet'>";
table+= "<tr><th>Firstname</th><th>Lastname</th><th>Email</th><th>Age</th><th>Mobile</th><th>Gender</th><th>Date</th><th>Address</th><th>City</th><th>State</th><th>Documents</th><th>Zip</th><th>Pan</th><th>Tan</th><th>Aadhar</th></tr>";
for(var i=0;i<data.length;i++){
table+="<tr><td>"+data[i].name1+"</td><td>"+data[i].name2+"</td><td>"+data[i].mail+
"</td><td>"+data[i].aged+"</td><td>"+data[i].num+"</td><td>"+data[i].gend+
"</td><td>"+data[i].tarrek+"</td><td>"+data[i].add+"</td><td>"+data[i].place+
"</td><td>"+data[i].stat+"</td><td>"+data[i].zpicode+"</td><td>"+data[i].panc+
"</td><td>"+data[i].tanc+"</td><td>"+data[i].aadharc+
"</td></tr>"
}
table+="</table>";
document.getElementById("table-data").innerHTML=table;
};