firebase realtime database on("child_added") function not working - javascript

i am trying to print all firebase realtime database inputs out in my div tag using this code:
function courserep(name, course, matno, current_level){
firebase.database().ref("students/"+course+"/"+matno+"/result/"+current_level).on("child_added", function(snapshots){
var html = "";
html+="<div id='level'>";
html += "<p id='redmi'>"+snapshots.val().name+"</p>";
html += "<input type='number' id='grade'>";
html += "<button id='rebtn' onclick='hlevelii()'>ADD RESULT</button>";
html += "</div>";
document.getElementById("enteroo").innerHTML+=html;
})
}
i tried this code block, and like i said i am expecting it to get all the particular pushed files from the database

Related

Insert the input into mysql

I am a newbie in programming. Excuse my ignorance.
My english is not too good. Hope you understand what I mean in my question.
How can I get the value of id NILAI below and insert into mysql.
html += '<tr>';
html += '<td class="indi" align="center">';
html += row.nis;
html += '</td>';
html += '<td class="indi">';
html += row.nama_siswa;
html += '</td>';
html += '<td>';
html += '<input id="nilai" type="text" placeholder="nilai"/>';
html += '</td>';
html += '</tr>';
I want the input value insert into mysql where col nis in mysql table same with row. nis
I've been trying this, but It's wrong. It just read the value of the first row in input nilai and make a new nis=0.
var data1 = document.getElementById("nilai") ;
var i;
for (i=0;i<data1.length;i++) {
var sql='INSERT INTO nilaitugas(no_tugas, nilai) VALUES ("'+dataid+'","'data1.elements[i]. value+'")';
}
Note: dataid is a variabel from url that I need to input.
you should use this code in javascript to get the value
var data1 = document.getElementById("nilai").value;
USE:
var data1 = document.getElementById("nilai").value; //to get the value in the input tag
var sql='INSERT INTO nilaitugas(no_tugas, nilai) VALUES ("'+dataid+'","'data1+'")';

Cannot pass array parameter (building out html with string) - Unexpected identifier

I have modified my previous code to allow for a data array to be passed to a different function. Everything is working until I add this data array.
Currently what works (old version) is only passing the this operator and an ID.
Below in my code you will see that I build out the HTML along with a table and pass the html to be appended at a later time.
You can see that I am building a table with a delete button. It all works well, except now that I am passing the data array it is telling me "Unexpected identifier"
I have tested it with passing getDeleteItems(this,ID,ID) and it works fine
but getDeleteItems(this,ID,data) does not.
Below is my code, and you can see I am passing an array (that works throughout my code and other functions (including this one already!))
I am just stuck now and can't seem to see past this, maybe some fresh eyes can help!
Thanks!
function mouseOverTable(ID,parent,data)
{
// ID is in the first column (0)
// Type is in the second column (1)
// Title is in the third column (2)
// popup_ItemClicked()
var family = findFamily(ID,parent,data)
var sHTML = "";
sHTML += "<table class="+"table table-hover id='relationshipTable'"+">";
sHTML += "<thead>";
sHTML += "<tr>";
sHTML += "<th>"+"Select Item"+"</th>";
sHTML += "<th>"+"ID"+"</th>";
sHTML += "<th>"+"Content Name"+"</th>";
sHTML += "<th>"+"Type"+"</th>";
sHTML += "<th>"+"Status"+"</th>";
sHTML += "<th>"+"Date"+"</th>";
sHTML += "</tr>";
sHTML += "</thead>";
sHTML += "<tbody>";
//displays if it's a article.. blog ... etc..
for(var i = 0; i<family.length;i++)
{
sHTML += "<tr id='relationshipRow"+family[i].ID+"'>";
sHTML += "<td><input type = 'checkbox' value = '"+family[i].ID+"'></input></td>";
sHTML += "<td>"+family[i].ID+"</td>";
sHTML += "<td>"+family[i].Title+"</td>";
//shows the date that the contentitem was created
sHTML += "<td>" + family[i].Type +"</td>";
sHTML += "<td>" + family[i].Status +"</td>";
sHTML += "<td>" + (family[i].Date) +"</td>";
sHTML += "</tr>";
}
sHTML += "</tbody>";
sHTML += "</table>";
//console.log(data)
sHTML += "<input type = 'Button' id ='DeleteItems' value = 'Delete Selected' onclick='javascript: getDeleteItems(this,";
sHTML += ID;
sHTML += ",";
sHTML += data;
sHTML += ");'></input>";
return sHTML;
}
I just looked at console and the element tabs in chrome: it looks like for some reason it is parsing the object as such
onclick="javascript: getDeleteItems(this,791,[object Object],[object Object],[object Object],.... and this goes on...
Your error in the onclick="javascript: getDeleteItems
the third parameter expected to be an array you missed {} for the array objects.
So you must call getDeleteItems function like this
onclick="javascript: getDeleteItems(this,791,{[object Object],[object Object],[object Object]})"
As #Fatehi mentioned, the following lines are giving the error
sHTML += "<input type = 'Button' id ='DeleteItems' value = 'Delete Selected' onclick='javascript: getDeleteItems(this,";
sHTML += ID;
sHTML += ",";
sHTML += data;
sHTML += ");'></input>";
I believe that adding the curly braces wont fix your issue since that data variable is a parameter of the function and his value it's not global and the scope when you send it to the DOM is for global variables. You should better use data attributes for each value and then you could access them like this:
<input data-test="test" onclick="console.log(this.attributes['data-test'].value)">
So I figured out this puzzle. I had the following functions 1) that called mouseover, the mouseover function, then the delete function. Before I was creating a delete button in mouseover(and I still am). However I made mouseover return 2 items now, one that returns the html for the table and the other that returns a tableid. I also removed the findfamily function in mouseover and moved it up to where it was being called from, then passed that as the data.
functionThatCalledMouseOver(ID,parent,data){
// below have variables defining row family =findparent etc...
row.child(mouseOverTable(ID,parent,findParent)[0]).show();
//now create onclick even passing fullData
$('#'+DeleteItems).on('click',function(){
getDeleteItems(this,ID,data);
});
}
My ultimate goal was the following: I had some sharepoint list items I was deleting from a table. Usually when I create charts tables etc, I will do a call and store all data locally in an array. The array is what created the table I was making. So in theory after the table data is deleted from sharepoint, it is still in my local array.
The problem with this was that when I removed the elements (visually showing they were deleted), it I hid the children of the parent in the main table I created, then clicked to show it again, it would show the deleted items since it was not server information and just a local array.
For future people reading this, I tried my original method with turning the object into a JSON string, then using the escape function. So... escape(JSON.stringify(data)).. this got passed to the delete function. This does work for appearances only. Once decoded on the getDeleteItems function it is separate data from the original data I was trying to delete. So in my case this wouldn't work.
however, moving everything to the function that originally called the mouseover was the way to go. It allowed me to get to the object I needed to remove items from.

Click on href and store data into input box

So I have a table with rows and columns that I loop through and an array which I split by spaces. What I am trying to do is if someone clicks parts[x] that information gets put into an input box.
var parts = data[j][i].split(' ');
tableData += '<td>';
for(x=0; x<parts.length; x++)
{
tableData += '' +parts[x] + ' ' + '';
}
tableData += '</td>';
For instance from below you can see the table that gets outputted now if someone was to press on Software I want Software to go to the top input box on the left which as you can tell already has Software in it for this example the input boxes name=a
Add a click listener to each tag like this:
var parts = data[j][i].split(' ');
tableData += '<td>';
for(x=0; x<parts.length; x++)
{
tableData += '' +parts[x] + ' ' + '';
}
tableData += '</td>';
Then define a handler outside of your tableData generation code like this:
function clickedPart(part){
document.getElementById("input_box").value = part.innerHTML
}
Please note I assumed your input box has the id "input_box". You can change that to whatever you want, but I recommend giving it an ID instead of a name.

putting javascript functions in count loop

So here's what I'm trying to do. I need to create new javascript functions to go with the table contents so I can edit the table contents individually when they are created. However, my problem is I am getting an Uncaught Error: Object is not a function. Whenever I call the function.
Anyone have any idea why?
while($inventorynumber>$q){
echo '<script>function edititem'.$q.'(){document.getElementById("edititem'.$q.'").innerHTML = ""; document.getElementById("edititem'.$q.'").innerHTML = "<input class=\"number\" type=\"number\" placeholder=\"'.$item[$q].'\" name=\"item'.$q.'\"></input>";}
function editdesc'.$q.'(){document.getElementById("editdesc'.$q.'").innerHTML = ""; document.getElementById("editdesc'.$q.'").innerHTML = "<input class=\"number\" type=\"number\" placeholder=\"'.$desc[$q].'\" name=\"desc'.$q.'"></input>\";}
function editprice'.$q.'(){document.getElementById("editprice'.$q.'").innerHTML = ""; document.getElementById("editprice'.$q.'").innerHTML = "<input class=\"number\" type=\"number\" placeholder=\"'.$price[$q].'\" name=\"price'.$q.'\"></input>";}
function editquantity'.$q.'(){document.getElementById("editquantity'.$q.'").innerHTML = ""; document.getElementById("editquantity'.$q.'").innerHTML = "<input class=\"number\" type=\"number\" placeholder=\"'.$quantity[$q].'\" name=\"quantity'.$q.'\"></input>";}
</script>';
if ($invtotal[$q]==$number) {
$invdate=$date[$q];
$item_total = (($quantity[$q])*($price[$q]));
$quantities = $quantity[$q];
echo '<tr><td id="edititem'.$q.'"><a onClick="edititem'.$q.'()">'.$item[$q].'</a></td><td id="editdesc'.$q.'"><a onClick="editdesc'.$q.'()">'.$desc[$q].'</a></td><td id="editprice'.$q.'">$<a onClick="editprice'.$q.'()">'.$price[$q].'</a></td><td id="editquantity'.$q.'"><a onClick="editquantity'.$q.'()">'.$quantity[$q].'</a></td><td>$'.$item_total.'</td></tr>';
$sum_total += $item_total;
$quantity_total += $quantities;
$q++;
}
else {
$q++;
}
}
It seems that above code outputs script tag between table and tr rows, which is invalid place ( only tr tags can be nested inside of table )
You need to change the code to output the script section before or after table tag.

javascript : built an html form from json, but can't update the form

I have a javascript code that takes objects from json.
from this, i built an html string:
var htmlstr = "<table border=0>";
for (var i=0;i<jsonData.people.length;i++) {
htmlstr=htmlstr+"<tr><td>" + jsonData.people[i].name + "</td>";
htmlstr=htmlstr+"<td>"+ jsonData.people[i].cash + "</td>";
htmlstr=htmlstr+"<td><button onclick='changeCash(i)'>Update</button></td></tr>";
}
htmlstr=htmlstr+"</table>";
layer.addFeatures(features);
layer.events.on({ "featureselected": function(e) { updateMak('mak', htmlstr) } });
function changeCash(k) {
jsonData.people[k].cash=jsonData.people[k].cash+100;
}
The HTML page is as follows:
<script type="text/javascript">
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
alert("Mobile device detected."); }
function updateMak(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
} </script>
<div id="mak"> List of People </div>
Lets say this displays 10 people with their money.
If I click on one of their Update buttons, I think the json data is updated as intended. But I don't know how to verify it. The values in the form doesn't update the new value from the changeCash function.
How do I update the htmlstr and also update what's already displayed on screen?
Please advise.
When you generate htmlstr for the people cash
htmlstr=htmlstr+"<td>"+ jsonData.people[i].cash + "</td>";
You should also generate id for this td so that you can update the content from the function changeCash(k).
Something like
htmlstr=htmlstr+"<td id='peoplecash"+i+"'>" + jsonData.people[i].cash + "</td>";
And then in your changeCash function
function changeCash(k) {
jsonData.people[k].cash=jsonData.people[k].cash+100;
var peoplecash= document.getElementById("peoplecash"+k);
peoplecash.innerHTML = jsonData.people[k].cash;}

Categories