A few days ago, I asked a question regarding folding div ([link text][fold-unfold div]). The answers I got allowed me to make good progress in my coding effort. However, my requirements have changed.
Being a newbie with all this web stuff, I though that wrapping the divs with a table and table headers would be easy. Boy, was I wrong.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Animate my Div</title>
<style type="text/css" media="screen">
a {text-decoration: none; color: black; }
#expand {background-color: #fff;}
.description {display: none; }
.entry {margin: 0; padding: 0px;}
</style>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".entry a").click(function() {
$(this).parents('.entry').find('.description').slideToggle(1000);
});
});
</script>
</head>
<body>
<?php
$con = mysql_connect("korg", "joe", "bob");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("wfr11", $con);
$result = mysql_query("
select title,description from webcases");
?>
<table border="1">
<thead>
<tr>
<th>title</th>
</tr>
</thead>
<?php
while ($row = mysql_fetch_array($result)) {
?><div class="entry"><tr>
<td>
<?php echo htmlentities($row['title']); ?>
<div class="description"><?php echo htmlentities($row['description']); ?></div>
</td>
</tr></div>
<?php
}
mysql_close($con);
?>
</table>
</body>
</html>
Now, a click on a ticket title does not work. I remove all the code for the table, it works fine: click on a title and the description unfolds
I should be able to fold my div (expand & description) into my table, right? What am I missing?
Chris, have a look here: http://jsfiddle.net/neopreneur/kdFHP/
Your HTML needs to look like this:
<table border="1">
<thead>
<tr>
<th>title</th>
</tr>
</thead>
<tbody>
<tr>
<td class="entry">
Title Text (click here)
<div class="description">Description Text</div>
</td>
</tr>
</tbody>
</table>
Related
I have the following code, and the tutorial I followed says that the table should show up, but it doesn't. All that shows up is the text inside the <h1> and <h4> tags, and the external CSS file is also not taking effect. The code I have is as follows:
<?php
include_once('connection.php');
$query="select * from myanimelist";
$result=mysql_query($query);
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles-2.css">
</head>
<body>
<h1> Callum Stewart's Amazing Website. </h1>
<h4> The Home of Entertainment. </h4>
<table align="center" border="1px" style="width: 300px" color="black">
<tr>
<th>Anime Database</th>
</tr>
<tr>
<th>Title</th>
<th>MediaType</th>
<th>Rating</th>
<th>NumOfEpisodes</th>
<th>NumOfVolumes</th>
</tr>
</table>
</body>
</html>
This is my code. When I print this page the heading and name are OK on the first sheet, but on the second sheet the heading is not displayed properly.
Is there any other technique to do this?
<html>
<head>
<style>
.my-header {
background: #e3dcf9;
height: 40px;
top: 0;
left: 0;
position: fixed;
right: 0;
}
thead { display:table-header-group }
</style>
</head>
<body>
<div class="my-header">This is header</div>
<div style="margin-top:100px;position: relative;">
<table border="1" >
<thead>
<tr>
<th>Number</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<?php
for($i=1;$i<=150;$i++)
{
?>
<tr>
<td><?php echo $i;?></td>
<td>Content</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</body>
</html>
mail and print template doesn't support internal css and external css.use inline css for proper result.Don't use internal or external css.
I am using datatable to display data. I have large database nearly 15k rows and it takes times to load data so I am displaying only 200 rows in datatable. But search filter in the datatable are most important thing needed here. Therefore I need to search data directly from database by php through ajax call on keyup event. So how can i do that ?
This is what I have done till here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Trail 2</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="datatable/css/jquery.dataTables.min.css" rel="stylesheet">
<!--<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet">-->
<style>
tfoot input {
width: 100%;
padding: 3px;
box-sizing: border-box;
}
</style>
</head>
<body>
<br><br>
<div class="container">
<div class="row">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>City</th>
<th>Mobile No</th>
</tr>
</thead>
<tfoot>
<tr>
<th><input type="text" name="name" id="name" placeholder="Search by NAME"></th>
<th>Surname</th>
<th>City</th>
<th>Mobile No</th>
</tr>
</tfoot>
<tbody>
<?php
require('connectivity2.php');
$query1 = "SELECT * FROM member LIMIT 200;";
$result1 = mysqli_query($con, $query1);
while($row = mysqli_fetch_assoc($result1)){
$name = $row['m_name'];
$surname = $row['m_sec_surname'];
$city = $row['m_city'];
$no = $row['m_mobile'];
?>
<tr>
<td><?php echo $name; ?></td>
<td><?php echo $surname; ?></td>
<td><?php echo $city; ?></td>
<td><?php echo $no; ?></td>
</tr>
<?php } //End of while loop
?>
</tbody>
</table>
</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script src="datatable/js/jquery.dataTables.min.js"></script>
<!--<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script> -->
<script type="text/javascript">
$(document).ready(function() {
// DataTable
var table = $('#example').DataTable();
// Search
$("#name").keyup(function(){
var m_name = $("input[name='name']").val();
//window.alert(m_name);
$.ajax({
type: 'POST',
url: 'trial2php.php',
data: {member name:m_name},
cache: true,
datatype: 'html',
success: function(){
$('#example').DataTable();
}
});
});
} );
</script>
</body>
</html>
Here I have taken just one input text in footer of the table for testing search.
Something is wrong in ajax function. Please help me out here.
Select only needed columns:
SELECT ItemCode, ItemName, RackNo, ItemSrNo
Create indexes for columns:
ItemCode, ItemName, RackNo, ItemSrNo
See:
https://dev.mysql.com/doc/refman/5.7/en/create-index.html
You should use Server Side processing with Pipeline feature of DataTables. This way fetching, rendering and filtering data in DataTables will be smooth.
Follow the link below to know more about the process with example -
DataTables Server Side Processing with Pipeline
I am trying to fetch results from Mysql database to several textboxes.
Here is my code that prints the results.
This page is called api2.php
How can I direct and print each row result into spesific texbox. in my index.php
<?php
include 'db.php';
$return_arr = array();
$fetch = mysql_query("SELECT * FROM user");
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
$row_array['1'] = $row['name'];
$row_array['2'] = $row['name2'];
$row_array['3'] = $row['name3'];
$row_array['4'] = $row['name4'];
$row_array['5'] = $row['name5'];
array_push($return_arr,$row_array);
}
echo json_encode($return_arr);
?>
index.php needs to get the results on load from database (api.php) and disable textbox. The post part to database is ok
<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="tir, 03 mar 2015 17:47:17 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="refresh" content="" >
<title>Vin lotteri</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="main">
<form id="myForm" action="userInfo.php" method="post">
<form method="get" id="form">
<center>
<h2>Vin lotteri</h2>
<br>
Velg nummer<br>
Skriv inn navnet ditt på di nummerene du ønsker<br>
Husk, kun 5 lodd pr. pers.<br><br>
<!-- javascript/jQuery -->
<script src="script/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="script/my_script.js" type="text/javascript"></script>
<div id="holder"></div>
</head>
<body>
<script>
$.getJSON( "api.php", function( data ) {
$.each( data, function( key, val ) {
$('#holder').append( "<input value='" + val + "' name='" + val + "'/>");
});
});
</script>
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
</style>
<table class="tg">
<tr>
<th class="tg-031e">1</th>
<th class="tg-031e"><input type="text" name="l1" id="l1" /></th>
<th class="tg-031e">2</th>
<th class="tg-031e"><input type="text" name="l2" id="l2" /></th>
<th class="tg-031e">3</th>
<th class="tg-031e"><input type="text" name="l3" id="l3" /></th>
<th class="tg-031e">4</th>
<th class="tg-031e"><input type="text" name="l4" id="l4" /></th>
<th class="tg-031e">5</th>
<th class="tg-031e"><input type="text" name="l5" id="l5" /></th>
</tr>
</table>
<br>
<input type="submit" name="submit" id="submit" value="Neste" >
</form>
<span id="result"></span>
</div>
</div>
</body>
</html>
I have tried for days to get dta into my textbox with no luck.
As what I can see now I need a little help with one question:
I fetch from my database with this called api2.php:
<?php
//--------------------------------------------------------------------------
// 1) Connect to mysql database
//--------------------------------------------------------------------------
include 'db.php';
$return_arr = array();
$fetch = mysql_query("SELECT * FROM user");
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
$row_array['1'] = $row['name'];
$row_array['2'] = $row['name2'];
array_push($return_arr,$row_array);
}
echo json_encode($return_arr);
?>
Then I use getJSON to get in my index.php:
<script>
$.getJSON("api2.php", function (data) {
$.each(data, function (key, value) {
$('#l1').val();
$('#l2').val();
});
});
And then I want it to appear into textbox in index.php:
<input type="text" name="l1" id="l1" />
<input type="text" name="l2" id="l2" />
I see that I have to find the right value, but I dont know how.
$('#l1').val(???);
I tought it was something like: $('#l1').val(echo "'$name'")
Try this. I tested it and it works>
HTML (this html accommodates your needs)
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="tir, 03 mar 2015 17:47:17 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="refresh" content="">
<title>Vin lotteri</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="main">
<form id="myForm" action="userInfo.php" method="post">
<form method="get" id="form">
<center>
<h2>Vin lotteri</h2>
<br>
Velg nummer<br>
Skriv inn navnet ditt på di nummerene du ønsker<br>
Husk, kun 5 lodd pr. pers.<br><br>
<!-- javascript/jQuery -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="script/my_script.js" type="text/javascript"></script>
<div id="holder"></div>
</head>
<body>
<style type="text/css">
.tg {
border-collapse: collapse;
border-spacing: 0;
}
.tg td {
font-family: Arial, sans-serif;
font-size: 14px;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
}
.tg th {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
}
</style>
<table class="tg">
<tr>
<th class="tg-031e">1</th>
<th class="tg-031e"><input type="text" name="l1" id="l1"/></th>
<th class="tg-031e">2</th>
<th class="tg-031e"><input type="text" name="l2" id="l2"/></th>
<th class="tg-031e">3</th>
<th class="tg-031e"><input type="text" name="l3" id="l3"/></th>
<th class="tg-031e">4</th>
<th class="tg-031e"><input type="text" name="l4" id="l4"/></th>
<th class="tg-031e">5</th>
<th class="tg-031e"><input type="text" name="l5" id="l5"/></th>
</tr>
</table>
<br>
<input type="submit" name="submit" id="submit" value="Neste">
</center>
</form>
<span id="result"></span>
</div>
</div>
<script>
$.getJSON("api.php", function (data) {
$.each(data, function (key, value) {
$('#l'+(key+1)).val(value);
});
});
</script>
</body>
</html>
Note: Please DO NOT use <center></center> is deprecated. Ypou can remove them yourself, if you want to.
JSON (This is just an dummy example) This code is for prove that it works.
<?php
header('Content-Type: application/json');
echo json_encode(array('jose','leandro','pedro'));
I have this code:
<?php require_once("config.inc.php"); ?>
<?
ob_start();
session_start();
if(isset($_SESSION['myusername'])) {
// do nothing here
} else { ?>
<!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>Live chat</title>
</head>
<body bgcolor="#000000">
<font color="white" size="+3"><b>You are not logged in! <br />
Log in and start chatting!</b></font>
</body>
</html>
<?php exit(); }
ob_flush();
?>
<!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" />
<meta name="description" content="<?php echo $meta_description ?>" />
<meta name="keywords" content="<?php echo $meta_keywords ?>" />
<title><?php echo $site_name; ?> | Live chat</title>
<link rel="icon" type="image/gif" href="favicon.png" >
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
body { margin:0;padding:0; background-image:url(images/background.jpg); }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#lolmesazhet").load("mesazhetnechat.php");
var refreshId = setInterval(function() {
$("#lolmesazhet").load("mesazhetnechat.php");
}, 1000);
$.ajaxSetup({ cache: false });
});
</script>
</head>
<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="500px" bgcolor="#000000" >
<?php include 'headerchat.inc.php'; ?>
</td>
</tr>
<tr>
<td width="500px" align="left" valign="top" style="padding:20px 5px 20px;">
<?php
if($_POST['submit654']) {
$result128 = mysqli_query($con,"SELECT id FROM users WHERE email = '$_SESSION[myusername]'");
$row128 = mysqli_fetch_array($result128);
date_default_timezone_set("Europe/Tirane");
$todaydate3 = date("Y-m-d H:i:s");
mysqli_query($con,"INSERT INTO chat (id, derguesi, dhoma, mesazhi, ora) VALUES (NULL, '$row128[id]', 'Main room', '$_POST[mesazhi]', '$todaydate3')");
}
?>
<table width="470px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="50px" valign="middle" colspan="2" style="border-bottom:1px solid #FFFFFF;"> </td>
</tr>
<tr>
<td width="320" height="339px" valign="top" style="padding:3px;">
<div style="width:320px; height:339px; overflow-y:auto;">
<?php
$result73 = mysqli_query($con,"SELECT * FROM chat WHERE dhoma = 'Main room' ORDER BY id DESC");
while($row73 = mysqli_fetch_array($result73))
{
$result127 = mysqli_query($con,"SELECT username FROM users WHERE id = '$row73[derguesi]'");
$row127 = mysqli_fetch_array($result127);
?>
<table width="320px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" align="left"><font color="white" size="4"><b><?php echo $row127['username']; ?></b></font></td>
<td width="170" align="right"><?php echo $row73['ora']; ?></td>
</tr>
<tr>
<td colspan="2">
<font color="white"><?php echo $row73['mesazhi']; ?></font>
</td>
</tr>
</table>
<?php } ?>
</div>
</td>
<td width="150" height="450px" rowspan="2" valign="top" style=" padding:3px; border-left:1px solid #FFFFFF;">
<div style="width:150px; height:450px; overflow-y:auto;">
<font color="#FFFFFF" size="+2"><b>Online users:</b></font><br /><br />
<?php
$result = mysqli_query($con,"SELECT username FROM users WHERE verifikuar='po' AND online = 'po'");
while($row = mysqli_fetch_array($result))
{ ?>
<font color="#FFFFFF"><b><?php echo $row['username']; ?></b></font> <br />
<?php }
?>
</div>
</td>
</tr>
<tr>
<td height="50px" valign="middle" style="border-top:1px solid #FFFFFF; padding:3px; border-right:1px solid #FFFFFF;">
<form action="" method="post" name="comesazh">
<textarea name="mesazhi" cols="35" rows="4" required="required"></textarea>
<br /><input type="submit" name="submit654" id="submit654" value="Send" style="border-radius:0px; border-size:1px; border-style:solid; border-color:#ffffff; border-width:thin; background-color:#000000; color:#ffffff; height:26px; width:60px; font-size:16px;" />
</form>
</td></tr>
</table>
</body>
</html>
I would like to know if it is possible to reload that page using ajax in order to create a live chat and if yes, how to do it.
I tried many ways like reloading just a part of it using $.load function but it does not work. Then I tried to $.load all the page, but still did not work. After a lot of silly efforts, I gave up.
Here is what you can do to have the chat box update without reloading the page.
Chat page that you have:
<script>
window.setInterval(function(){
{
var xmlhttp;
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("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","response.php",true);
xmlhttp.send();
}, 5000);
</script>
<div id="myDiv"><h2>This should be your chat box</h2></div>
Response.php
<?php
//do the while loop for the amount of chat you want to see
//example
for ($i = 1; $i <= 10; $i++) {
echo $i.'<br/>'; // Print out $i
}
?>
This will update the chat box every 5 seconds with the most recent chats. Give it a shot
If no element is matched by the selector — in this case, if the document does not contain an element with id="result" — the Ajax request will not be sent.
From jQuery.load manual. I can't see element with ID "lolmesazhet" in your code. Or I'm missing something.