Ajax function is as below
<script type="text/javascript">
function getStudentDetails() {
var userName = document.getElementById("getName").value;
$.ajax({
type : "POST",
cache : false,
data : {name:userName},
url : "get_project_details.php",
success : function(student_details) {
var resArr = JSON.parse(student_details);
document.getElementById("pname").value = resArr[0];
}
});
}
</script>
And I am using Datatable with below function
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount < 10) {
// limit the user from creating fields more than your limits
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
// tooltip code for each row
// re-instantiate tooltip after the new ones are added since there is no eventhandler attached to them. (calling tooltip function here)
//$onChange=getStudentDetails();
$('[data-toggle="tooltip"]').tooltip();
}
}
else
{
alert("Allowed maximum items per indent is 10. Please raise one more indent if required");
}
}
When I Select Project Number, project name is appearing in next field, but after adding another row Ajax function getStudentDetails() is not working
Related
I am creating a javascript based "favourite assignment" list for my photo app which I have created using phonegap.
I'm basing it on a "to-do list" tutorial code and have tried to adapt it to my purposes.
There are two variables: the title (text) and the link (text2)
It works great in a browser, and on first launch in the app.
But on refresh or relaunch, I dont think it's saving the link variable to the dictionary.
would appreciate any guidance with the code:
<script type="text/javascript" language="JavaScript">
//Create a new To-Do
function createNewToDo()
{
var todoDictionary = {};
//Prompt the user to enter To-Do
var todo="FAST SHUTTER SPEEDS";
var todolink="#fastshutter";
if (todo!=null)
{
if (todo == "")
{
alert("To-Do can't be empty!");
}
else
{
//Append the new To-Do with the table
todoDictionary = { check : 0 , text : todo , text2 : todolink};
addTableRow(todoDictionary,false);
}
}
}
//Add a row to the table
var rowID = 0;
function addTableRow(todoDictionary, appIsLoading)
{
rowID +=1;
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
//Set up the CheckBox
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "deleteButton";
element1.value = "X";
element1.setAttribute("onclick","deleteSelectedRow(this)");
element1.className = "deleteButton";
cell1.appendChild(element1);
//Set up the View Button
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "viewButton";
element2.value = todoDictionary["text"];
var link = todoDictionary["text2"];
element2.id = rowID;
element2.onclick=function(){ window.location.hash = link; };
element2.className = "viewButton";
cell2.appendChild(element2);
//Save & Update UI
saveToDoList();
if (!appIsLoading)
alert("Assignment Added To Favourite List!");
}
//Deletes current row
function deleteSelectedRow(deleteButton)
{
var p=deleteButton.parentNode.parentNode;
p.parentNode.removeChild(p);
saveToDoList();
}
function saveToDoList()
{
//Create a todoArray
var todoArray = {};
var checkBoxState = 0;
var textValue = "";
var text2Value = "";
//Get current table
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
if (rowCount != 0)
{
//Loop through all rows
for(var i=0; i<rowCount; i++)
{
var row = table.rows[i];
//Add checkbox state
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked)
{
checkBoxState = 1;
}
else
{
checkBoxState= 0;
}
//Add text data
var textbox = row.cells[1].childNodes[0];
textValue = textbox.value;
//Fill the array with check & text data
todoArray["row"+i] =
{
check : checkBoxState,
text : textValue
};
}
}
else
{
todoArray = null;
}
//Use local storage to persist data
//We use JSON to preserve objects
window.localStorage.setItem("todoList", JSON.stringify(todoArray));
}
function loadToDoList()
{
//Get the saved To-Do list array by JSON parsing localStorage
var theList = JSON.parse(window.localStorage.getItem("todoList"));
if (null == theList || theList=="null")
{
deleteAllRows();
}
else
{
var count = 0;
for (var obj in theList)
{
count++;
}
//Clear table
deleteAllRows();
//Loop through all rows
for(var i=0; i<count; i++)
{
//Add row
addTableRow(theList["row"+i],true);
}
}
}
It appears that in the saveToDoList function you aren't adding your text2 value to the array of objects that's saved to localStorage:
todoArray["row"+i] =
{
check : checkBoxState,
text : textValue
};
Should be:
todoArray["row"+i] =
{
check : checkBoxState,
text : textValue,
link : // get the value of your link
};
Since you haven't posted the associated HTML I cannot tell you how to get the value of the link
So this is a bit complex
I have created an app using phonegap. I am trying to implement a "to-do" list.
I have found a great example javascript method, which I have put into the main index.html document.
So when the app first launches, it works fine and looks the way it's supposed to:
it lets me add new to dos, check a bunch to remove, or hit a button to delete them, etc.
but when I close the app and re-load it, it loses all the styling and the delete buttons no longer functions:
but, it I click ADD ITEM, the new items show in the style they are supposed to...
So, here is the code in the index.html head for the scripts:
<script type="text/javascript" language="JavaScript">
//Create a new To-Do
function createNewToDo()
{
var todoDictionary = {};
//Prompt the user to enter To-Do
var todo="ASSIGNMENT NAME";
var todolink="index.html#fastshutter";
if (todo!=null)
{
if (todo == "")
{
alert("To-Do can't be empty!");
}
else
{
//Append the new To-Do with the table
todoDictionary = { check : 0 , text : todo , text2 : todolink};
addTableRow(todoDictionary,false);
}
}
}
//Add a row to the table
var rowID = 0;
function addTableRow(todoDictionary, appIsLoading)
{
rowID +=1;
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
//Set up the CheckBox
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
element1.checked = todoDictionary["check"];
element1.setAttribute("onclick","checkboxClicked()");
element1.className = "checkbox";
cell1.appendChild(element1);
//Set up the TextBox
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
element2.size = 16;
element2.id = "text"+rowID;
element2.value = todoDictionary["text"];
element2.setAttribute("onchange","saveToDoList()");
element2.className = "textbox";
cell2.appendChild(element2);
//Set up the View Button
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "button";
element3.id = rowID;
element2.value = todoDictionary["text"];
element3.setAttribute("onclick","window.open('index.html#fastshutter','_self')");
element3.className = "viewButton";
cell3.appendChild(element3);
//Set up the Delete Button
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "button";
element4.setAttribute("onclick","deleteSelectedRow(this)");
element4.className = "deleteButton";
cell4.appendChild(element4);
//Save & Update UI
checkboxClicked();
saveToDoList();
if (!appIsLoading)
alert("Task Added Successfully.");
}
//Add storke to completed tasks text
function checkboxClicked()
{
//Get current table
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
//Loop through all rows
for(var i=0; i<rowCount; i++)
{
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
var textbox = row.cells[1].childNodes[0];
//checkbox is checked
if(null != chkbox && true == chkbox.checked)
{
if(null != textbox)
{
textbox.style.setProperty("text-decoration", "line-through");
}
}
//checkbox is not checked
else
{
textbox.style.setProperty("text-decoration", "none");
}
}
//Save
saveToDoList();
}
//Views textField's content of the selected row
function viewSelectedRow(todoTextField)
{
alert(todoTextField.value);
}
//Deletes current row
function deleteSelectedRow(deleteButton)
{
var p=deleteButton.parentNode.parentNode;
p.parentNode.removeChild(p);
saveToDoList();
}
function removeCompletedTasks()
{
//Get current table
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
//Loop through all rows
for(var i=0; i<rowCount; i++)
{
//Delete row if checkbox is checked
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked)
{
table.deleteRow(i);
rowCount--;
i--;
}
}
//Save
saveToDoList();
alert("Completed Tasks Were Removed Successfully.");
}
function saveToDoList()
{
//Create a todoArray
var todoArray = {};
var checkBoxState = 0;
var textValue = "";
//Get current table
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
if (rowCount != 0)
{
//Loop through all rows
for(var i=0; i<rowCount; i++)
{
var row = table.rows[i];
//Add checkbox state
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked)
{
checkBoxState = 1;
}
else
{
checkBoxState= 0;
}
//Add text data
var textbox = row.cells[1].childNodes[0];
textValue = textbox.value;
//Fill the array with check & text data
todoArray["row"+i] =
{
check : checkBoxState,
text : textValue
};
}
}
else
{
todoArray = null;
}
//Use local storage to persist data
//We use JSON to preserve objects
window.localStorage.setItem("todoList", JSON.stringify(todoArray));
}
function loadToDoList()
{
//Get the saved To-Do list array by JSON parsing localStorage
var theList = JSON.parse(window.localStorage.getItem("todoList"));
if (null == theList || theList=="null")
{
deleteAllRows();
}
else
{
var count = 0;
for (var obj in theList)
{
count++;
}
//Clear table
deleteAllRows();
//Loop through all rows
for(var i=0; i<count; i++)
{
//Add row
addTableRow(theList["row"+i],true);
}
}
}
function deleteAllRows()
{
//Get current table
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
//Loop through all rows
for(var i=0; i<rowCount; i++)
{
//delete row
table.deleteRow(i);
rowCount--;
i--;
}
//Save
saveToDoList();
}
</script>
and the style (also in the head)
<style type="text/css">
/* BeginOAWidget_Instance_2127022: #gallery */
.viewButton {
background-color:Transparent;
width:50px
height:32px;
}
.deleteButton {
background-color:Transparent;
width:30px;
height:30px;
}
Here is the html code to implement the page:
<body bgcolor="#e0e0e0" onload="loadToDoList()" >
<div data-role="page" id="favlist">
<div data-role="header">
<h1>BACK Favourites </h1>
</div>
<div data-role="content">
<button type="button" class="addToDo" onclick="createNewToDo()">ADD</button>
<button type="button" class="removeTasks" onclick="removeCompletedTasks()">REMOVE</button>
<br/><br/><br/>
<table id="dataTable" width="100%" border="0">
</table>
CLOSE
</div>
</div>
So I'm not sure if the jquerymobile css file is interfering with this maybe?
Thanks for any advice
EDIT: I was able to figure it out. I needed to override the jquery mobile CSS completely for the button elements by adding a new button class to the jquery css. On first run and adding new items it used the inline styles I had put in the HTML, but on reload it was pulling the standard styles
I was able to figure it out. I needed to override the jquery mobile CSS completely for the button elements by adding a new button class to the jquery css. On first run and adding new items it used the inline styles I had put in the HTML, but on reload it was pulling the standard styles
When a row is added dynamically in a table, I don't get the datepicker,time spinner or the validations working for the second row.
my code for adding a row...
function addRow(tableID){
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i = 0;i<colCount;i++){
var newccell = row.insertCell(i);
newcell.innerHTML = table.rows[i].cells[i].innerHTML;
}
}
and my code for the button is
<input type = "button" onclick = "addRow(tableID)" name="+" value="+" id="add">
You need to initialize the plugins/widgets for dynamic elements once the elements are rendered to the dom
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newccell = row.insertCell(i);
newcell.innerHTML = table.rows[i].cells[i].innerHTML;
}
var $row = $(row);
$row.find('input.spinner').spinner(){};//initialize spinner
$row.find('input.datepicker').datepicker({});//iniitailze datepicker etc
}
use clone
function addRow(tableID) {
var $table = $('#' + tableID),
$first = $table.find('tr').first();
var $row = $first.clone().appendTo($table)
$row.find('input.spinner').spinner() {};
$row.find('input.datepicker').datepicker({});
}
You need .on()
As elements are added dynamically you can not bind events directly to them .So you have to use Event Delegation.
Syntax
$( elements ).on( events, selector, data, handler );
Add validation code using Event Delegation.
Update
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newccell = row.insertCell(i);
newcell.innerHTML = table.rows[i].cells[i].innerHTML;
}
var $row = $(row);
$row.find('input.sp').spinner(); //find element which you want to add spinner
$row.find('input.dp').datepicker();//find element which you want to add datepicker
}
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
if (i==2) {
newcell.innerHTML="<div id='txtHint"+xx+"'></div>";
}
else if(i==0){
newcell.innerHTML = "<INPUT type='checkbox' name='chk[]'/>";
}
else if (i==1) {
newcell.innerHTML = table.rows[1].cells[1].innerHTML;
switch(newcell.childNodes[0].type) {
case "select-one":
newcell.childNodes[0].setAttribute("onchange","showUser(this.value,"+xx+");showrole(this.value,"+xx+")");
}
}
else if (i==3) {
newcell.innerHTML="<div id='txtHintrole"+xx+"'></div>";
}
this is my function show select option depend on username i choose
after did some modification finally it work
and now i want to show role depend on username
so i have 2 show
1.for password
2.for username
onchange="showpassword(this.value)
this is my onchange inside select box
and now i want to showrole too
so when i choose the select
it will showed me password and role ad diferent cell
newcell.childNodes[0].setAttribute("onchange","showUser(this.value,"+xx+");showrole(this.value,"+xx+")");
and i foudn that i have tu put semi colon to devide the function
and i still show an error that the show only show role and it happen to 2 of them
it should showpassword and showrole when i select the value
You can use the innerHTML property of the cell.
Do something like
newcell.innerHTML = '<div id="txthint' + i + '">content</div>';
Hope this help
I have a jsfiddle here of the script I'm using to dynamically add rows to a field but have a problem.
On my form I have the 1st row that I want to duplicate with the script. The row consists of 6 inputs named job_date1, tech_name1, cost_code1, pay_rate1, total_hours1, and sub_total1.
When the second row is created via the script I now need the new rows input names to be set by the script if possible to job_date2, tech_name2, cost_code2 and so on and with each new row created I need the end digit to move up one.
Here is the code:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null !== chkbox && true === chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
catch(e) {
alert(e);
}
}
Here's a simple solution:
newcell.children[0].name = newcell.children[0].name + rowCount;
As you count each newly added row, add that variable to each of the input elements.
Here's the jsFiddle (be sure to check your console when you run the function to see the console log).
For the first log, it returns:
chk1
txt1
tech_name1
cost_code1
txt1
For the second element that's created
chk2
txt2
tech_name2
cost_code2
txt2
etc.
I have a simpler suggestion. Instead of having job_date1, job_date2, etc., name your fields job_date[] (all of the job date fields).
E.g. PHP automatically recognizes this and $_POST["job_date"] would be an array with all the values for job date in the order they appear on the html page. So instead of $_POST["job_date" . $i] you would use $_POST["job_date"][$i].
I don't know what technology you use for the backend, but I'm sure you can achieve the same effect.
It will be more robust and elegant and you don't have to care about re-numbering when you add nor remove rows.
Edit: More details about this technique in PHP can be found in PHP FAQ and Example #3 here.