How to setup thead & tbody for generated table? - tablesorter

<html>
<head>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.tablesorter.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#csv_table").tablesorter();
}
);
</script>
</head>
<body>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data" name="import">
<label for="input_import_file">Umístění CSV souboru:</label>
<input name="import_csvfile" id="import_csvfile" type="file">
<input name="csvsubmit" id="csvsubmit" type="submit">
</form>
<?php
if($_FILES['import_csvfile']['tmp_name']){
echo '<table id="csv_table" width="100%" border="1" cellspacing="5" cellpadding="0">';
$handle = fopen($_FILES['import_csvfile']['tmp_name'], "r");
while (($data = fgetcsv($handle, 1000, ",")) !==FALSE) {
$num = count($data);
echo "<tr>";
for ($c=0; $c < $num; $c++) {
echo "<td> ".$data[$c]."</td>"."\n";
}
echo "</tr>";
}
fclose($handle);
echo "</table>";
}
?>
</body>
</html>
How can I setup and for this table generated from CSV file?
Table is generates using loop (for and while function) and I don't know how to setup first line as or if I should setup table static.
Please help me I am beginner.
Thanks in advance

If your headers are known, you can do as follows:
echo '<table id="csv_table" width="100%" border="1" cellspacing="5" cellpadding="0">';
echo '<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th>...</tr>'
$handle = fopen($_FILES['import_csvfile']['tmp_name'], "r");
Otherwise if your headers come in the CSV file you can determine if you're in the first row using a counter variable:
$counter = 0;
while (($data = fgetcsv($handle, 1000, ",")) !==FALSE) {
$num = count($data);
echo "<tr>";
for ($c=0; $c < $num; $c++) {
if($counter == 0)
{
echo "<th> ".$data[$c]."</th>"."\n";
}else{
echo "<td> ".$data[$c]."</td>"."\n";
}
}
echo "</tr>";
counter++;
}
Note that replacing the while loop with a for loop will have the same benefit.

Related

how to display post variables in email body by PHPmailer

Can any one help me to integrate a form with PHPMailer. I have following form.
<form method="POST">
<p>Name:<input type="text" name="name" size="30"></p>
<p>Email Address:<input type="text" name="email" size="30"></p>
<input type="submit" name="submit" value="Submit">
</form>
I just need to display POST variables in my receiving email's body. I have search and refer alot and spend hours in it, everyone clarifies it with high level explanation. As i am not a programmer can anyone explain me how can i do this with simple explanation. I just done a method as follows but it did'nt work.
$name = $_POST['name'];
$email = $_POST['email'];
$mail->Body = "
<html>
<h2><b>".$name." ".$email."</b></h2>
</html>";
When i tried the above method i am getting error in this line '$name = $_POST['name'];'. The error message is: Notice: Undefined index:' I think i am wrong with my placing order of codes.
Thanks in advance!
<?php
if(array_key_exists("name",$_POST) && $_POST["name"] != "" && array_key_exists("email",$_POST) && $_POST["email"] != ""){
require 'mailer/PHPMailerAutoload.php';
$mail = new PHPMailer;
//$mail->SMTPDebug = 3; // Enable verbose debug output
$mail->isSMTP(); // Set mailer to use SMTP
$mail->Host = 'smtp.gmail.com'; // Specify main and backup SMTP servers
$mail->SMTPAuth = true; // Enable SMTP authentication
$mail->Username = 'mail#gmail.com'; // SMTP username
$mail->Password = 'mypassword'; // SMTP password
$mail->SMTPSecure = 'tls'; // Enable TLS encryption, `ssl` also accepted
$mail->Port = 587; // TCP port to connect to
$mail->setFrom('mail#gmail.com', 'Manager');
$mail->addAddress('mail#gmail.com', 'Administrator'); // Add a recipient
$name = $_POST['name'];
$email = $_POST['email'];
$mail->Body = "<h2><b>".$name." ".$email."</b></h2>";
if(!$mail->send()) {
echo 'Message could not be sent.';
echo 'Mailer Error: ' . $mail->ErrorInfo;
} else {
echo 'Message has been sent';
}
} else {
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="POST">
<p>Name:<input type="text" name="name" size="30" required></p>
<p>Email Address:<input type="email" name="email" size="30" required></p>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
<?php
}
?>

Access json data using jquery (returned by php)

Q1.here is my html:
<html>
<head>
<title>
Runners
</title>
</head>
<body>
<button id="printrunners"> Print Runners</button>
<div id="printrunnershere"></div>
<script src="printrunners1.js"></script>
</body>
</html>
javascript is here:
$(document).ready(function()
{
$("#printrunners").click(function()
{
$.getJSON("printrunners.php?action=getrunners",
function(json) //also tried without "?action=getrunner" line
{
$.each(json.runners,function()
{
var info= 'Name: '+this['fname']+' '+ this['lname']+' Gender: '+this['gender']+' Finish Time: '+this['finish_time'];
$("#printrunnershere").append(info);
});
});
});
});
printrunners.php here:
<?php
if($_GET) //also tried without it with respect to "?action=getrunner"
{
if($_GET['action']=="getrunners") // also tried without it w.r.t "?action=getrunner"
{
mysql_connect("localhost","runner_db_user","runner_db_user_password");
mysql_select_db("runner_info");
$result=mysql_query("select * from runner");
$runners=array();
while($row=mysql_fetch_array($result,MYSQL_ASSOC))
{
array_push($runners, array('fname' => $row['fname'], 'lname' => $row['lname'], 'gender' => $row['gender'], 'finish_time' => $row['finish_time']));
}
echo json_encode(array("runners" =>$runners));
}
}
?>
Q2. also I used post() to insert a row in same above database it inserts but can't access json data returned by php program:
javascript here:
$(document).ready(function()
{
$('#add').click(function()
{
var data=$("#form1 :input").serializeArray();
$.post($("#form1").attr('action'),data,function(json){
if(json.status=='success')
{
alert (json.message);
}
if(json.status=='fail')
{
alert(json.message);
}
},"json");
});
$("#form1").submit(function()
{
return false;
});
});
it's php here:
<?php
$fname=htmlspecialchars($_POST['fname']);
$lname=htmlspecialchars($_POST["lname"]);
$gender=htmlspecialchars($_POST["gender"]);
$finish_time=htmlspecialchars($_POST["finish_time"]);
$query="insert into runners (fname,lname,gender,finish_time) values('$fname','$lname','$gender','$finish_time')" ;
$result=db_connection($query);
if($result)
{
$msg="Runner " .fname."".lname."added successfully";
success($msg);
}
else
{
fail("insert failed");
}
exit;
function fail($message)
{
die(json_encode(array('status' => 'fail', 'message' => $message)));
}
function success($message)
{
die(json_encode(array('status' => 'success', 'message' => $message)));
}
function db_connection($query1)
{
mysql_connect("localhost","runner_db_user","runner_db_password")
OR die(fail('Could not connect to database.'));
mysql_select_db("runner_info");
return mysql_query($query1);
}
?>
ITS FRONT END(html page):
<!DOCTYPE html>
<html>
<head>
<title>
add runner
</title>
<script src="jquery-2.0.3.js" type="text/javascript"></script>
<script src="jsonuse.js" type="text/javascript"></script>
</head>
<body>
<form id="addrunnerform" name="addrunnerform" method="post" action="addrunner.php">
First Name: <input type="text" name="fname" id="name"></br>
Last Name: <input type="text" name="lname" id="lname"></br>
Gender: <input type="radio" name="gender" id="male" value="m" checked>Male
<input type="radio" name="gender" id="female" value="f">Female</br>
Finish Time: <input type="text" id="finish_time" name="finish_time"></br>
<button type="submit" id="add" name="add">ADD</button>
</form>
</body>
</html>

Jquery mobile page id turns into folder name

I made an android app with a multi-page template. When I push the Zoeken button on the home page I go to Page 1 (id = Zoeken). On that page, when I push the button (id = zoek), the app goes to the following url android_asset/www/Zoeken/# instead of going to android_asset/www/index.html#win2 (Page 2)
When I change the id of Page 1, the foldername changes too
Why is the id Zoeken turned into a folder name?
Index.html
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="cordova.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.0a1.min.css" />
<script src="jquery-1.4.3.min.js"></script>
<script src="jquery.mobile-1.0a1.min.js"></script>
<script type="text/javascript" src="SQLitePlugin.js"></script>
</head>
<body>
<!-- home -->
<div data-role="page" data-theme="e" id="home">
<div data-role="content">
<img src="img/logo_wablief.png" width="300" height="99" alt="wablief logo">
<ul data-role="listview" data-inset="true">
<li>Zoeken</li>
<li>A tot Z</li>
<li>Info</li>
</ul>
</div>
</div>
<!-- Page 1 -->
<div data-role="page" data-theme="e" id="Zoeken">
<div data-role="header" data-position="inline">
<h1>Zoeken </h1>
</div>
<div data-role="content"> <p>Welk woord wil je zoeken?</p>
<label for="search-basic">Vlaams woord</label>
<input type="search" name="search" id="search-basic" value="" />
Zoek
</div>
</div>
<!-- Page 2 -->
<div data-role="page" id="win2" data-add-back-btn="true" data-theme="e">
<div data-role="header">
<h1>Zoekresultaten</h1>
</div>
<div data-role="content">
</div>
</div>
</body>
</html>
<script>
// Wait for Cordova to load
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var db = window.sqlitePlugin.openDatabase ("wablief", "", "wablief", 65535);
$("#zoek").bind ("click", function (event)
{
db.transaction (function (transaction)
{
var search = $("#search-basic").val ();
var sql = "SELECT * from wablief WHERE woord LIKE ?";
transaction.executeSql (sql, ["%"+search+"%"],
function (transaction, result)
{
var html = "<ul>";
if (result.rows.length)
{
for (var i = 0; i < result.rows.length; i++)
{
var row = result.rows.item (i);
var woord = row.woord;
var woord2 = row.woord2;
var vertaling = row.vertaling;
html += "<li>" + woord + " " + woord2 + "<br><br>" + vertaling + "</li>";
}
}
else
{
html += "<li> Geen resultaten </li>";
}
html += "</ul>";
$("#win2").unbind ().bind ("pagebeforeshow", function ()
{
var $content = $("#win2 div:jqmData(role=content)");
$content.html (html);
var $ul = $content.find ("ul");
$ul.listview ();
});
$.mobile.changePage ($("#win2"));
}, error);
});
});
function error (transaction, err)
{
alert ("DB error : " + err.message);
return false;
}
}
</script>
I solved the issue bij adding different jQuery and jQuery mobile files.
I am now using the files you can find here:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
I copied and pasted them, for use offline and now it is working like a charm.

Working with multiple dialog boxes, logics error

I am using the following code to View Complete Messages from Users, on my web page.
u can see my web page here : http://team-kh.hireexpertprogrammers.com/~maiarn/Admin.php
But the only prob is some logic Error here, When i randomly click on the View Complete link, the dialog Box, shows me the title and content of the first message. How can i avoid this error:
Such that, which View Complete Link is clicked, the dialog box shall show the title and content of that row , message.
<?php
$i=0;
while ($i < $num) {
$f1=mysql_result($result,$i,"FullName");
$Name = $ f1;
$f2=mysql_result($result,$i,"EmailAddr");
$string=mysql_result($result,$i,"Message");
$limit=10;
$string1 = myTruncate($string,$limit);
?>
<tr>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f2; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $string1; ?></font>
<a id="button1"href="#">View Complete</a>
<div id="dialog1"title="<?php echo $Name; ?>" style="display: none;">
<?php echo $string; ?></div>
</td>
</tr>
<?php
$i++;
}
?>
The script is
<script type="text/javascript" src="jquery/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.18.custom.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("a#button1").click(function(e) {
e.preventDefault();
$("#dialog1").dialog({height: 300, width: 500, modal: true});
});
});
</script>
You either need to assign dynamic ID's to your dialogs based on a number or some other distinguishing string or load the information from the row into a single dialog before you display it (which would be preferable).

problem with jquery tabs and ajax , behaviour change is observed between tabs eventhough they have similar html

I am working on creating a html page with three tabs, each one of which pulls data from three different html pages through jquery ajax. I am passing 2 parameters , method and mode ( to set read only or edit for all the html elements in the page ) while calling the ajax function.
The problem I have is, when i set the parameters with method=somemethod&mode=ro, the first renders the proper method and in readonly mode, whereas the second tab's html is rendered in edit mode. I debugged the page using firebug but couldnot find the actual problem. All the three tab htmls are all the similar, so i have no idea why this is happening. I have attached the code. Kindly help.
Main html/php page.
<?
$method = $_GET['method'];
$mode = $_GET['mode'];
?>
<html>
<head>
<link type="text/css" href="../../css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<link type="text/css" href="./methodeditor.css" rel="stylesheet" />
<script type="text/javascript" src="../../js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery-ui-1.8.14.custom.min.js"></script>
<script>
function loadtabs() {
$( ".tabs" ).tabs({cache:false});
//$( ".tabs" ).tabs();
method = "<? echo $method; ?>";
mode = "<? echo $mode; ?>";
$.ajax({
type: "GET",
url: "oven.php",
data: "method=" +method+"&mode="+mode,
cache: false,
async: true,
success: function(data){
htdata = data;
$("#oven").html(data);
},
});
$.ajax({
type: "GET",
url: "detectors.php",
data: "method=" +method+"&mode="+mode,
async: true,
cache: false,
success: function(data1){
htdata = data1;
$("#detectors").html(data1);
},
});
$.ajax({
type: "GET",
url: "inlets.php",
data: "method=" +method+"&mode="+mode,
async: true,
cache: false,
success: function(data){
$("#inlets").html(data);
},
});
}
</script>
</head>
<body>
<form id="editor" action="method.php" method="POST" >
<div class="editor">
<div class="tabs">
<ul>
<li>Oven</li>
<li>Detectors</li>
<li>Inlets</li>
</ul>
<div id="oven" ></div>
<div id="detectors" ></div>
<div id="inlets"> </div>
</div>
<script>
loadtabs();
</script>
</form>
</div>
</body>
</html>
tab1 php
<?
$method = $_GET['method'];
$mode = $_GET['mode'];
?>
<!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>Oven</title>
<link type="text/css" href="../../css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="../../js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery-ui-1.8.14.custom.min.js"></script>
<script>
function togglestatus(val) {
if ( val == "ro" )
{
$('#elements :input').attr('disabled', true );
}
if ( val == "edit")
{
$('#elements :input').removeAttr('disabled');
}
}
function getvalues() {
//file = window.method;
file = "<? echo $method; ?>";
file = "./method/"+file;
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", file, false);
xmlhttp.setRequestHeader('Content-Type', 'text/xml');
xmlhttp.send("");
xmldoc = xmlhttp.responseXML;
etimenode = xmldoc.getElementsByTagName("method")[0].childNodes[1].childNodes[1];
etime = etimenode.textContent;
document.getElementById("etime").value = etime;
maxovtp = xmldoc.getElementsByTagName("method")[0].childNodes[1].childNodes[5].childNodes[0].data;
document.getElementById("maxovtp").value = maxovtp;
}
</script>
</head>
<body>
<div id="elements">
<input type="checkbox" id="oventemp" value="ON" />Oven Temperature<br />
Equilibrium time <input type="text" id="etime" /><br />
Maximum Oven Temperature <input type="text" id="maxovtp" /><br />
<script>
getvalues();
x = "<? echo $mode; ?>";
togglestatus(x);
</script>
</div>
</body>
</html>
tab2 php/html page
<?
$method = $_GET['method'];
$mode = $_GET['mode'];
?>
<!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>Detectors</title>
<link type="text/css" href="../../css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="../../js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery-ui-1.8.14.custom.min.js"></script>
<script>
function togglestatus(val) {
if ( val == "ro" )
{
$('#elements :input').attr('disabled', true );
}
if ( val == "edit")
{
$('#elements :input').removeAttr('disabled');
}
}
function getvalues() {
file = "<? echo $method; ?>";
file = "./method/"+file;
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", file, false);
xmlhttp.setRequestHeader('Content-Type', 'text/xml');
xmlhttp.send("");
xmldoc = xmlhttp.responseXML;
heater = xmldoc.getElementsByTagName("method")[0].childNodes[3].childNodes[1].childNodes[1].childNodes[0].data;
document.getElementById("heater").value = heater;
h2flow = xmldoc.getElementsByTagName("method")[0].childNodes[3].childNodes[1].childNodes[3].childNodes[0].data;
document.getElementById("h2flow").value = h2flow;
}
</script>
</head>
<body>
<div id="elements">
Heater Status <input type="checkbox" id="heaterstat" value="ON" /><br />
Heater <input type="text" id="heater" /><br />
H2 Flow <input type="text" id="h2flow" /><br />
<script>
getvalues();
x = "<? echo $mode; ?>";
togglestatus(x);
</script>
</div>
</body>
</html>
I figured out the solution by chance.
Both the tabs had elements wrapped under the same div called . So when toggle status was called , only the first div with id "element" was getting changed. I gave different names to the divs and solved the problem.

Resources