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>
Related
The Idea
User will select examination date from dropdown list which is populated with data from the database.
After selecting the date, the system will display the list of examiners based on the selected date.
The user can now encode grades per student.
After encoding the grade, the user will click the 'save' button which the system will save to the database. (Multiple update)
This is the code where the user selects the exam date.
<?php
include '../configuration.php';
$queryselect = mysql_query("SELECT examdateno, examdate from tbl_examdate ORDER BY examdate DESC");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SPORT Qualifying Exam System</title>
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="stylesheet" type="text/css" href="../css/component.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "encodeinterviewajax.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<header>
<img src="../images/qes_logob.png" alt="logo">
<button class="hamburger">☰</button>
<button class="cross">˟</button>
</header>
<div class="menu">
<ul>
<a href="encodeinterview.php">
<li>Encode Grades</li>
</a>
<a href="viewinterview.php">
<li>View Grades</li>
</a>
<a href="../index.php">
<li>Logout</li>
</a>
</ul>
</div>
<script>
$(".cross").hide();
$(".menu").hide();
$(".hamburger").click(function () {
$(".menu").slideToggle("slow", function () {
$(".hamburger").hide();
$(".cross").show();
});
});
$(".cross").click(function () {
$(".menu").slideToggle("slow", function () {
$(".cross").hide();
$(".hamburger").show();
});
});
</script>
<div id="content">
<form>
<h1>Exam Dates</>
<select name="examdate" id="examDate" onchange="showUser(this.value)">
<option>Select Exam Date</option>
<?php
while ($row = mysql_fetch_array($queryselect)) {
echo "<option value={$row['examdateno']}>{$row['examdate']}</option>\n";
}
?>
</select>
</form>
</div>
<div id="txtHint">Examinees will be listed here</div>
</body>
</html>
This is where the displaying and the update should happen.
<?php
include '../configuration.php';
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/component.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="stylesheet" type="text/css" href="../css/grid.css">
</head>
<body>
<?php
$q = intval($_GET['q']);
$sql = mysql_query("select s.sno, s.fname, s.lname, s.examdate, s.interviewgrade, s.gwa from student s inner join tbl_examdate e on s.examdate=e.examdate where e.examdateno=$q");
?>
<div class="as_wrapper">
<div class="as_grid_container">
<div class="as_gridder" id="as_gridder"></div> <!-- GRID LOADER -->
<form method="post" action="">
<table class="as_gridder_table">
<tr class="grid_header">
<td><div class="grid_heading">Student No.</div></td>
<td><div class="grid_heading">First Name</div></td>
<td><div class="grid_heading">Last Name</div></td>
<td><div class="grid_heading">Exam Date</div></td>
<td><div class="grid_heading">Interview Grade</div></td>
<td><div class="grid_heading">GWA</div></td>
</tr>
<?php
while ($row = mysql_fetch_array($sql)) {
?>
<tr class="<?php
$i+=1;
if ($i % 2 == 0) {
echo 'even';
} else {
echo 'odd';
}
?>">
<td><?php $sno[]=$row['sno'];echo $row['sno']; ?></td>
<td><?php $fname[]=$row['fname']; echo $row['fname']; ?></td>
<td><?php $lname[]=$row['lname'];echo $row['lname']; ?></td>
<td><?php echo $row['examdate']; ?></td>
<td><input type="text" size="3" maxlength="3" name="interview[]"></td>
<td><input type="text" size="3" maxlength="3" name="gwa[]"></td>
</tr>
<?php
}
?>
<tr>
<td colspan="6"><button id="btnUpdate">Save</button>
</tr>
</table>
</form>
<?php
if (isset($_POST['btnUpdate'])){
for($i=0;$i<sizeof($sno);$i++){
$interview = $_POST['interview'][$i];
$gwa = $_POST['gwa'][$i];
$sql1= mysql_query("UPDATE student SET gwa='$gwa', interviewgrade='$interview' where fname='$fname[$i]' AND lname='$lname[$i]' ");
header('Location: encodeinterview.php');
}
}
?>
</div>
</div>
</body>
As I mentioned in my comment I'm not sure what exactly is not working for you but I can help you with a couple of things in what I'm guessing to be your homework project.
First, always wrap all jQuery actions that affect DOM elements or add EventListeners to DOM elements in a document.ready function. This function is triggered when all the HTML of the page has been loaded to the DOM. Adding an event listener or trying to ".hide()" and element before it is loaded to the DOM will fail. There is the long way of calling the document.ready function:
$(document).ready(function(){
.... Code to manipulate the DOM goes here ...
});
and the shorthand function call that does exactly the same thing:
$(function(){
.... Code to manipulate the DOM goes here ...
});
If you need to wait until all the additional resources (e.g. images) are loaded you can use:
$(window).load(function(){
.... Your code goes here ....
});
This function is triggered when all resources are loaded. So if you're looking to get the position of an element or size of an element that contains images it's best to wait until the images are loaded. otherwise the position or size may well change once the images are loaded.
So your jQuery block needs to wrapped like this:
<script>
$(function(){
$(".cross").hide();
$(".menu").hide();
$(".hamburger").click(function () {
$(".menu").slideToggle("slow", function () {
$(".hamburger").hide();
$(".cross").show();
});
});
$(".cross").click(function () {
$(".menu").slideToggle("slow", function () {
$(".cross").hide();
$(".hamburger").show();
});
});
});
</script>
And for goodness sake if your using jQuery NEVER type 'document.getElementById'. The jQuery equivalent is $('#id'). Note the '#' means ID where the '.' means CLASS. It's much shorter and it creates the element as a jQuery object which allows you to use all of jQuery's wonderful functions on it.
If you're using jQuery anyway. You should use it for AJAX. It's much easier. Here's your same showUser function done with jQuery including error handling for the ajax call:
function showUser(str) {
if (str == "") {
$("#txtHint").html("");
return;
} else {
$.ajax({
url: "encodeinterviewajax.php?q=" + str,
type: 'GET',
success: function(data){
$('#txtHint').html(data);
},
error: function(jqXHR, textStatus, errorThrown){
console.log("Status = " + textStatus);
console.log("Error = " + errorThrown);
}
});
}
I have put my table data in an array. I want to split the array and apply pagination. Eg: Getting 2 rows in 1 page.
Is it possible? Please help!
/*Fetching data from database*/
$sql2=mysql_query("SELECT date,name FROM main WHERE ((ward='$ward') AND(date BETWEEN '$startdate' AND '$enddate'))");
$array = array();
while($row = mysql_fetch_assoc($sql2))
{
// add each row returned into an array
$array[] = $row;
}
// show all array data
print_r($array);?></br><?php
$pages = array_chunk($array, 2);
print_r($pages);
for($i=0; $i< count($pages)+1; $i++):
echo $i;
endfor;
I want the pagination result to be displayed in a table, please help.
Below is the simplified code according to your need, you just need to loop through your array and make those TR dynamic
You can download the js and css from here
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, maximum-scale=1"/>
<title>Pagination Example</title>
<link href="css/simplePagination.css" type="text/css" rel="stylesheet"/>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.simplePagination.js"></script>
<script>
jQuery(function($) {
var items = $("#content tbody tr");
var numItems = items.length;
var perPage = 2;
// only show the first 2 (or "first per_page") items initially
items.slice(perPage).hide();
// now setup pagination
$("#pagination").pagination({
items: numItems,
itemsOnPage: perPage,
cssStyle: "light-theme",
onPageClick: function(pageNumber) { // this is where the magic happens
// someone changed page, lets hide/show trs appropriately
var showFrom = perPage * (pageNumber - 1);
var showTo = showFrom + perPage;
items.hide() // first hide everything, then show for the new page
.slice(showFrom, showTo).show();
}
});
});
</script>
</head>
<body>
<h1>Pagination Example</h1>
<div id="pagination"></div>
<table id="content">
<tbody>
<tr>
<td>Window</td>
<td>John</td>
</tr>
<tr>
<td>Door</td>
<td>Chris</td>
</tr>
<tr>
<td>Floor</td>
<td>Michael</td>
</tr>
<tr>
<td>Car</td>
<td>James</td>
</tr>
<tr>
<td>Bike</td>
<td>Steven</td>
</tr>
</tbody>
</table>
</body>
</html>
<head>
<link type='text/css' href='css/osx.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/osx.js'></script>
</head>
<?php
$myuser = 3;
$a = mysql_query('SELECT cmc.coursemoduleid, cma.sourcecmid, cmc.userid
FROM course_modules_completion, course_modules_availability cma
WHERE cmc.userid = '.$myuser.'');
echo '<table>
<tr><th>Course Module ID</th><
<th>Course Module ID</th>
</tr>';
foreach($a as $aa)
{
$mid = $aa->coursemoduleid;
$sid = $aa->sourcecmid;
$user = $aa->userid;
<tr><td>'.$user.'</td>
<td>'.$mid.'</td>
<td>'.$sid.'</td>
<td>
<div id="container">
<div id="content"><div id="osx-modal">View More
</div></div>
<div id="osx-modal-content">
<div class="close">X</div>
<div id="osx-modal-data">';
echo $user.'Welcome Here';
</div></div>
</td>
</tr>';
}
echo '</table>';
?>
I want to get $user value in popup (If suppose If the $myuser is 6 in a table then even i should get 6 inside the popup when I click viewmore). My popup was working exactly no errors in jquery just I need to pass $user value inside popup.
Right now, it displays only the first userid 9 in all popups.
Could anyone suggest me?
You need to give the user id to the popup.
<script type='text/javascript'>
function showUser(userID)
{
var userWindow = window.open(url, "User", "width=600,height=400");
}
</script>
<a href="#" class="osx" onclick="showUser(<?= $user ?>)">
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']; }