I'm trying to retrieve information from my database, and output it to my page. I'm able to hardcore it, so to show exactly what I want to be able to do is located here:
I'm not having any console errors in the javascript, but I am unable to append data to the list once it is clicked.
HTML & JS:
<!doctype html><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="../img/sd.ico" />
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="body">
<div id="header"><h1>Bookmarks</h1></div><!-- header -->
<iframe id="iFrame" name="iFrame"></iframe>
<div id="links"><ul id="accordion">
<li><div class="bookmarkTitle"><p><h4>CareerResources</h4></p></div></li><ul id="CareerResources">
</ul><li><div class="bookmarkTitle"><p><h4>CSS</h4></p></div></li><ul id="CSS">
</ul><li><div class="bookmarkTitle"><p><h4>JS</h4></p></div></li><ul id="JS">
</ul><li><div class="bookmarkTitle"><p><h4>JS: Jquery</h4></p></div></li><ul id="JS: jQuery">
</ul></div><!-- links end -->
</div><!-- body end -->
<script type="text/javascript">
$(document).ready(function(){
$("#accordion > li").click(function(e){
var catName=$(e.target).text();
$.getJSON("get.php?catName=" + catName, function(data){
if (data.data){
$.each(data.data,function(index,value){
var url = value.URL;
var title = value.title;
var desc = value.desc;
alert(catName);
$("#"+catName).append('<div class="bookmark"><p><h3>'+title+'</h3><br />'+desc+'</p></div>');
});
}
});
});
});
</script>
</body>
</html>
PHP:
// retval: 0 - login ok, 1 - login failed, 2 - internal error
$json = array("retval" => 2, "data" => NULL, "debug" => "");
$catName=mysql_real_escape_string($_REQUEST['catName']);
$sql="SELECT * FROM linktb WHERE catName='$catName'";
$json['debug'] .= "SQL query was: ".$sql."\n";
$result=mysql_query($sql);
if (!$result) {
$json['debug'] .= "SQL query failed\n";
$json['debug'] .= "Other output: ". ob_get_contents();
ob_end_clean();
die(json_encode($json));
}
$count=mysql_num_rows($result);
if($count > 0){
$json['retval'] = 0;
$json['data'] = array();
while ($row = mysql_fetch_assoc($result)){
$json['data'][] = $row;
}
} else {
$json['retval'] = 1;
}
$json['debug'] .= "Other output: ". ob_get_contents();
ob_end_clean();
echo json_encode($json);
var catID=e.target.text(); Should be var catID=$(e.target).text(); as .text() is a jQuery method.
If you want to iterate through the returned data you'll have to do it in the success function. Also from your php script you only output one row from your database.
if($count > 0){
$json['retval'] = 0;
$json['data'] = array();
while ($row = mysql_fetch_assoc($result)){
$json['data'][] = $row;
}
}
else {
$json['retval'] = 1;
}
$.getJSON("get.php?catID=" + catID, function(data){
if (data.data){
$.each(data.data,function(index,value){
var url = value.URL;
var title = value.title;
var desc = value.desc;
$("#"+catID).appendText('<div class="bookmark"><p><h3>'+title+'</h3><br />'+desc+'</p></div>');
});
}
});
Related
i'm working on a project and below is the following code i am using to make a bar chart.
the db table named bar contains, id, factor, score, goal_1, goal_2, goal_3 attributes.
i am not getting an error, but the chart is not showing and blank page is displayed to me.
<?php
$connect = mysqli_connect("localhost","root","","chart");
$query = "SELECT * FROM bar";
$result = mysqli_query($connect, $query);
$chart_data = '';
while ($row = mysqli_fetch_array($result)) {
$chart_data .="{ factor:'".$row["factor"]."', goal_1:'".$row["goal_1"]."', goal_2:'".$row["goal_2"]."', goal_3:'".$row["goal_3"]."'},";
}
$chart_data = substr($chart_data, 0, -2);
?>
<html>
<head>
<title>bar chart project</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
</head>
<body>
<div class="container" style="width:900px;">
<div id="chart"></div>
</div>
</body>
</html>
<script type="text/javascript">
Morris.bar({
element: 'chart',
data: [<?php echo $chart_data; ?>],
xkey: 'factor',
ykeys: ['goal_1','goal_2','goal_3'],
labels: ['goal_1','goal_2','goal_3'],
hideHover: 'auto',
});
</script>
Try specifying the columns within the query
$query = "SELECT factor, goal_1, goal_2, goal_3 FROM bar";
and add a this to your code
<div id="chart" class="chart" style=<your preferred dimensions></div>
I'm making a pagination with jQuery Ajax,php and mysql, 1 by 1.
I want to show cards with name and description.
Here I leave my code.
Index.php
<?php
require_once './conexiones.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Language" content="kr">
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<link rel="stylesheet" type="text/css" href="cards.css">
<meta http-equiv="Content-Language" content="ko">
<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
<title></title>
<script type="text/javascript" src="jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="card.js"></script>
</head>
<body>
<?php
// ----- CONSULTA PALABRAS POR CATEGORIA
if((isset($_GET['idcat']))||(isset($_GET['limite']))){
$consulta = "
SELECT nompalabra, trapalabra, rompalabra, imgpalabra, ejpal, ejrompal, ejtrapal
FROM palabra
WHERE idcat = '". $_GET['idcat'] ."'
LIMIT ". $_GET['limit'].",1
";
echo $consulta;
$resultado = mysql_query($consulta,$conexion);
}
//----- FIN
//CONSULTA TODAS LAS CATEGORIAS
$consultaCategorias = "
SELECT nomcat
FROM categorias";
$resultadoCategorias = mysql_query($consultaCategorias,$conexion);
//
require_once './carta.php';
?>
</body>
cards.js
var limit = 0;
$(document).on("click",".cat",function(){
var cat = $(this).attr('name');
limit = 0;
var id;
switch (cat){
case 'casa': id = 1;
break;
case 'colores': id = 2;
break;
case 'cuerpo': id = 3;
break;
}
$.get("index.php",{"idcat":id,"limit":limit},function(data) {$("#contenedor").html(data);});
});
$(document).on("click",".next",function(){
var id = $(this).attr('name');
limit++;
$.get("index.php",{"idcat":id,"limit":limit},function(data){$("#contenedor").html(data);});
});
$(document).on("click",".back",function(){
var id = $(this).attr('name');
limit--;
$.get("index.php",{"idcat":id,"limit":limit},function(data){$("#contenedor").html(data);});
});
cartas.php
<?php
require_once './consultas.php';
?><div id="contenedor"><?php
while($categoria = mysql_fetch_array($resultadoCategorias)){
?><div class="cat" name="<?php echo $categoria['nomcat'];?>"><?php echo $categoria['nomcat'];?></div> <?php
}
if(isset($_GET['idcat'])){
?>
<div id="container_card">
<div id="container_card_top">
<div class="centrar"> <?php
while ($fila = mysql_fetch_array($resultado)) {
echo $fila['nompalabra']."(".$fila['rompalabra'].") ".$fila['trapalabra'];
?>
</div>
</div><!-- FIN CONTAINER_CARD_TOP -->
<div id="container_card_content">
<div id="imagenPalabra"><?php echo $fila['imgpalabra'];?></div>
<div class="frase"><?php echo $fila['ejpal'];?></div>
<?php } ?>
<div class="next" name="<?php echo $_GET['idcat'];?>">-></div>
<?php if($_GET['limit']>0){ ?><div class="back" name="<?php echo $_GET['idcat'];?>"><-</div><?php } ?>
</div><!-- FIN CONTAINER_CARD_CONTENT -->
</div><!-- FIN CONTAINER_CARD -->
<?php } ?>
each time I click on .next, the counter should be 0, 1, 2, 3 ... but when I do the first time, the jQuery function execute 2 times, and next time I click on it, it executes more times, so I cannot show 1 by 1 and I don't know how to fix it. I already tried many things.
Maybe with every click the script creates the same handlers again ...
Try to change cards.js to something like that:
var limit = 0;
$(document).ready(function() {
$('.cat').click(function() {
var cat = $(this).attr('name');
limit = 0;
var id;
switch (cat){
case 'casa':
id = 1;
break;
case 'colores':
id = 2;
break;
case 'cuerpo':
id = 3;
break;
}
$.get("index.php",{
"idcat":id,
"limit":limit
},function(data) {
$("#contenedor").html(data);
});
});
$('.next').click(function() {
var id = $(this).attr('name');
limit++;
$.get("index.php",{
"idcat":id,
"limit":limit
},function(data){
$("#contenedor").html(data);
});
});
$('.back').click(function() {
var id = $(this).attr('name');
limit--;
$.get("index.php",{
"idcat":id,
"limit":limit
},function(data){
$("#contenedor").html(data);
});
});
});
Hi i am able to get json data as a list in html page but i like to get as a list of link. Because when i click on the link it will show details.
What i have done in tenantlistmob.php
<?php
include('connection.php');
$result = mysql_query("SELECT * FROM tenanttemp");
while ($row = mysql_fetch_assoc($result))
{
$array[] = array($row['TenantFirstName']);
}
echo json_encode($array);
?>
Then my html page is
<!DOCTYPE HTML>
<html>
<link rel="stylesheet" href="../jasmine-device_2/styles/main.css" />
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
jQuery.getJSON("tenantlistmob.php", function (jsonData) {
jsonData= eval(jsonData);//get json array
for (i = 0; i < jsonData.length; i++)//iterate over all options
{
for ( key in jsonData[i] )//get key => value
{
$("#getname").append($("<li></li>").html(jsonData[i][key]), document.all ? i : null);
}
}
});
});
</script>
</head>
<body>
<form name="index">
<div id="getname"></div>
</form>
</body>
</html>
The output is
Humayun
Sahjahan
Bayezid
Bayezid
Asaduzzaman
Mouri
I am getting the TenantFirstName as a list.But i like to get it as a list of link.Because when i click on a name it will show details of that name. How can i do both work(as a list of link and when click on a link it will show details in a html page query from mysql database)?
Please help.
use table like below
<!DOCTYPE HTML>
<html>
<link rel="stylesheet" href="../jasmine-device_2/styles/main.css" />
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
jQuery.getJSON("tenantlistmob.php", function (jsonData) {
$("#user_spec").html("");//clear old options
jsonData= eval(jsonData);//get json array
for (i = 0; i < jsonData.length; i++)//iterate over all options
{
for ( key in jsonData[i] )//get key => value
{
//$("#user_spec").get(0).add(new Option(jsonData[i][key],[key]), document.all ? i : null);
//$("#getname tbody").append($("<li></li>").html(jsonData[i][key]), document.all ? i : null);
var tblRow = "<tr>" + "<td>" + "<a href='#'>" + jsonData[i][key] + "</a>" + "</td>" + "</tr>"
$(tblRow).appendTo("#getname tbody");
}
}
});
});
</script></head>
<body>
<form name="index">
<div>
<table id="getname" border="1">
<thead>
<th>Name</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
</body>
</html>
I was trying to create a notifications system for a website with the following code :
setInterval(function() {
$.post('notifications.php', {
email: 123
}, function(data) {
});
}, 30000);
And the notifications.php :
$userid = $_SESSION[username];
$notifications = array();
$sql = "SELECT appreciation FROM ms_notifications WHERE email = '$userid' AND new = '1'";
$res = mysql_query($sql) or die(mysql_error());
if (mysql_num_rows($res)) {
while ($r = mysql_fetch_object($res)) {
$notifications[] = $r->appreciation;
}
$nb_result = mysql_num_rows($res);
}
$sql = "UPDATE ms_notifications SET new = '0' WHERE email = '$userid'";
mysql_query($sql) or die(mysql_error());
echo $nb_result;
Problem is that, as I'm new to jquery/Js, I don't know how to put the result inside of a div. For now it stays on the top of the page, above everything.
I tried that, inside the data function but not working... :
$('#test_app').html(data);
I guess it's a very stupid question but help would be really appreciated ! Thank you very much.
UPDATE : Here the HTML Code
<?php
session_start();
include ('connection/database.php');
include ('login_script.php');
include ('notifications.php');
if($logged_in){
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Home</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ms.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/font_i/specimen_files/easytabs.js" type="text/javascript" charset="utf-8"></script>
<!-- FONT SCRIPT-->
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#container').easyTabs({defaultContent:1});
});
</script>
<script type="text/javascript" charset="utf-8">
var scrollSpeed = 70; // Speed in milliseconds
var step = 1; // How many pixels to move per step
var current = 0; // The current pixel row
var imageHeight = 505; // Background image height
var headerHeight = 59; // How tall the header is.
//The pixel row where to start a new loop
var restartPosition = -(imageHeight - headerHeight);
function scrollBg(){
//Go to next pixel row.
current -= step;
//If at the end of the image, then go to the top.
if (current == restartPosition){
current = 0;
}
//Set the CSS of the header.
$('#main_logo').css("background-position","0 "+current+"px");
}
//Calls the scrolling function repeatedly
var init = setInterval("scrollBg()", scrollSpeed)
</script>
<!-- NOTIFICATIONS_SCRIPT !!!!!! -->
<script type="text/javascript" charset="utf-8">
setInterval(function() {
$.post('notifications.php', {
email: 123
}, function(data) {
});
}, 30000);
</script>
<style>
body{
font-family:SommetRoundedLight;
}
</style>
</head>
<body>
<div id="container">
<div id="header_contain">
<div id="test_app">
</div>
</div>
</div>
</body>
</html>
<?php }
else{
echo '<script language="javascript" type="text/javascript">
<!--
window.location.replace("connexion.php");
-->
</script>';
} ?>
Thanks again
Use .append() instead of .html()
Instead of
$('#test_app').html(data);
just use:
$('#test_app').html('<div>' + data + '</div>');
Seems to simple to be it. Am I missing something?
<code>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery.pager.js Test</title>
<link href="Pager.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="jquery.pager.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#pager").pager({ pagenumber: 1, pagecount: 15, buttonClickCallback: PageClick });
});
PageClick = function(pageclickednumber) {
$("#pager").pager({ pagenumber: pageclickednumber, pagecount: 15, buttonClickCallback: PageClick });
$("#result").html("Clicked Page " + pageclickednumber);
}
</script>
</head>
<body>
$query = "select name from student";
$result = mysql_query(Query);
while($row=mysql_fetch_array($result)){
$student_name = $row['name'];
?>
<h1 id="result"><?php echo $student_name; ?></h1>
<? }
?>
<div id="pager" />
</body>
</html>
</code>
For my above code am not geting the student name , if i remove the pager script , the student name will appear, may i know , why, where i made mistake..
i thing i have to pass somthing to html() , but i am not sure..
while($row=mysql_fetch_array($result)){ $student_name = $row['name']; }
should be
$student_name = NULL;
while($row=mysql_fetch_array($result)){ $student_name .= $row['name']; }