jQuery load function and tables - javascript

On my site, it displays a table of data.
I've got a link that will load another table of data from a URL.
$("#another").click(function() {
var newGeneration = $('<p />').load('another.php?cycle=' + i);
$('tbody').append(newGeneration);
i++;
});
Is there a way to get it so that it doesn't add a p tag and just directly load the file into the tbody? I tried changing it to tr, but that just made trs inside of trs.
The code that displays another result
echo "<tr>";
echo "<td>" . $keys[$k] . "</td>";
echo "<td>" . $jobs[$k] . "</td>";
echo "</tr>";
What I don't want to happen (like it is now)

I think its better to send a get request instead of complicating the use of load.
$("#another").click(function() {
$.get('another.php', { 'cycle' : i }, function(data) {
$('tbody').append(data);
});
});

Try to get the html() from the element :
$("#another").click(function() {
var newGeneration = $('<p />').load('another.php?cycle=' + i);
$('tbody').append(newGeneration.html());
i++;
});

Related

How to get the value of td using jquery

I am trying to get the value or text which is inside td tag i have tried with custom attribute but failed . I am working for past two hours but I am getting undefined error.
here is the php code
$id=$row["id"];
$name=$row["name"];
echo "<tr class='inner'>";
echo "<td class='tdtext'check='$id' contenteditable='true'>".$row["name"]."</td>";
echo "<td><Button class='btn btn-primary buttonclass' tayyab='$id'>edit</Button>
echo "</tr>";
this is the j Query code
$(".buttonclass").click(function(){
var edit=$(this).attr("tayyab");
var abc = $(this).siblings(".tdtext").html();
alert(abc);
});
You want to find the closest parent TD, then the previous TD
$(".buttonclass").click(function(){
var edit = $(this).attr("tayyab");
var abc = $(this).closest('td').prev(".tdtext").html();
alert(abc);
});
Note that tayyab is an invalid attribute, and it should be data-tayyab

Write JSON data to HTML5 table

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.

Dynamically creating buttons in html with mysql row value

I am drawing all my information from my sql database and displaying it in a table in html. I want to be able to click on a button at the end of each row, or somewhere on the row, and display another set of things relating to the uniqueID in that row. However at the moment, the value does not change for each dynamically created button.
$sql = "SELECT * FROM Hybrid";
$result = mysqli_query($link, $sql);
if ($result->num_rows > 0) {
echo "<table><tr><th>ID</th><th>Timestamp</th><th>Rate</th><th>Fiat</th><th>BTC</th><th>BTCadd</th><th>Contact</th><th>PaymentMethod</th><th>Bank</th><th>localprofile</th><th>BTname</th><th>uniqID</th><th>Confirm2</th><th>Paymentmade</th><th>Paymenttime</th></tr>";
// output data of each row
while ($row = $result-> fetch_assoc()) {
echo "<tr><td>".$row["ID"].
"</td><td>".date('d-m H:i', strtotime($row["Timestamp"])).
"</td><td>".$row["Rate"].
"</td><td>".$row["Fiat"].
"</td><td>".$row["BTC"].
"</td><td>".$row["BTCadd"].
"</td><td>".$row["Contact"].
"</td><td>".$row["PaymentMethod"].
"</td><td>".$row["Bank"].
"</td><td>".$row["localprofile"].
"</td><td>".$row["BTname"].
"</td><td>".$row["uniqID"].
"</td><td>".$row["Confirm2"].
"</td><td>".$row["Paymentmade"].
"</td><td>".date('d-m H:i', $row["Paymenttime"]).
"</td><td>".
"<button id='view' type='button' value='$row[uniqID]' onclick='dropdown();' >View</button>".
"</td></tr>";
}
echo "</table>";
}
This bit is the button:
<td>" . "<button id='view' type='button' value='$row[uniqID]' onclick='dropdown();' >View</button>" . "</td>
and $row['uniqID'] displays all the different uniqIDs on my table in html, however, when I try this in javascript:
<script>
var id = document.getElementById("view").value;
function dropdown() {
alert(id);
};
</script>
It only alerts the first $row['uniqID'] regardless of which button I press, instead of the one corresponding to the row.
I need the value of the button to correspond to the uniqueID for that row, so I can use it in the button function, maybe there is another way?
I am stuck as to how to do this, I thought it might be something to do with the 'infamous javascript loop issue' but I am not sure if it applies, or if it does quite how to fix it?
id is to be unique, but you have n number of id='view'. So since there should only be 1 id='view' javascript will find the first one only. You could add this.value to the function call -
"<td>" .
"<button id='view' type='button' value='$row[uniqID]' onclick='dropdown(this.value);' >View</button>" .
"</td>"
and then use that in your function
<script>
function dropdown(id){
alert(id);
}
</script>

How to use setInterval() when there's a param?

I'm trying to get a single div on a php page to refresh every 5 seconds.
In HTML I have: EDIT: NEW SCRIPT FUNCTION
<script>
$(document).ready(function(){
var callAjax = function(){
$.ajax({
method:'get',
url:'game.php',
success:function(data){
$("#read_chat").html(data);
}
});
}
setInterval(callAjax, 5000);
});
</script>
And the function (in a php block) I'm trying to refresh is:
echo" <div class='read_chat' >";
function get_messages($db){
//get messages
$get_m = "select user_name, message, time, character_name from Chat NATURAL JOIN User LEFT OUTER NATURAL JOIN Character where Chat.game_id =".$_SESSION[game_id]." ORDER BY Chat.chat_id;";
$messages = $db->query($get_m);
//display messages
foreach ($messages as $row) {
//display each message in row
if ( $row['character_name'] == NULL){
echo "<div class='left'>" . $row['user_name'] . ": </div>";
}
else {
echo "<div class='left'>" . $row['character_name'] . ": </div>";
}
echo "<div class='center'>" . $row['message'] . "</div>";
echo "<div class='right'>" . $row['time'] . "</div>";
}
}
echo "</div>";
The display of this is only the CSSed block without any content. If I just call get_messages($db) all the chat from the database loads. How do I make this div refresh automatically? Thanks!
EDIT:
The name of the file is "game.php" and the php function is "get_messages()".
For the record I looked at:
http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/
and
Pass parameters in setInterval function
Javascript
setTimeout(function(){
$.ajax({url: "get_message.php", success: function(result){
var num_records = result.length,
i,
content;
for(i=0;i<num_records;i++){
if (result[i]['character_name'] !== null){
content += "<div class='left'>" + result[i]['character_name'] +": </div>";
}
else{
content += "<div class='left'>" + result[i]['user_name'] +": </div>";
}
content += "<div class='center'>" + result[i]['message'] + "</div><div class='right'>" + result[i]['time'] + "</div>";
}
$('.read_chat').html(content);
}});
}, 5000);
get_message.php
$get_m = "select user_name, message, time, character_name from Chat NATURAL JOIN User LEFT OUTER NATURAL JOIN Character where Chat.game_id =".$_SESSION[game_id]." ORDER BY Chat.chat_id;";
$messages = $db->query($get_m);
$response = array();
foreach ($messages as $row) {
$response[] = $row;
}
echo json_encode($response);
I'd suggest using jQuery $.load, see the example below:
setTimeout(function(){
$('.read_chat').load('get_message.php');
}, 5000);
You'll need to return nice html from the PHP script instead, but it's cleaner.

javascript does not work with pagination

am doing pagination of table in php with phtml.The problem is I have a javascript to change the color of the row.It works only for my first page,doesnt work with other pages.
foreach($this->paginator as $record)
{echo "<td width='61'> <a href='#' class='test' data-id='" . $record['id']. "'>". $record['id'] . "</td>";
echo "<td width='61' >". $record['firstname'] . "</td>";
echo "<td width='61'>" . $record['emailid'] . "</a></td>";
echo "<td width='38'>" . $record['customdata'] . "</td>";
}
Javascript is
function approve(id) {
var id =id;
$.ajax({
url: 'http://localhost/feedback/public/index/approve/',
type: 'POST',
data:"id="+id,
success:function(data) {
alert('Approved successfully');
var index =parseFloat(id)+1;
$('table tr:eq('+index+')').css("background-color", "54FF9F");//this works only for first page
}
})
}
I'm calling javascript in onclick of a button in popup window.Can anyone help me y it doesnot work for other pages
Your success function is what is coloring the rows; by adding inline styles to the tr tags themselves. Because this function (in all likelihood) does not run again when you go to the next page of your table, the newly rendered rows do not get colored.
I would recommend adding a class to the rows instead, and adding the CSS rule to a stylesheet.
$('table tr:eq('+index+')').addClass('alt-row');
CSS:
.alt-row td { background-color: #54FF9F; }
Also, to play it safe, I apply background colors to cells, not rows, as some older browsers do not support backgrounds on table rows.

Categories