How can I close the suggestion box when the user click the Clear button?
When the suggestion box is closed, how can the Search & Clear button move up to its original place?
What code should I insert to do this?
You can see the buttons when you run this code.
This is my current code:
<html>
<head>
<title>
Brandon's Search Engine
</title>
<style type="text/css">
#suggestion {
border: 1px solid black;
visibility: hidden;
position: relative;
background-color: white;
z-index: 10;
}
#suggestion a {
font-size: 12pt;
color: black;
text-decoration: none;
display: block;
width: 648px;
height: auto;
text-align: left;
padding: 2px;
}
#suggestion a:hover {
background-color: #dddddd;
width: 644px;
padding: 2px;
}
</style>
<script type="text/javascript">
//document.getElementById("suggestion")
function getSuggestion(q) {
var ajax;
if(window.XMLHttpRequest)//for ie7+, FF, Chrome
ajax = new XMLHttpRequest();//ajax object
else
ajax = new ActiveXObject("Microsoft.XMLHTTP");//for ie6 and previous
ajax.onreadystatechange = function() {
if(ajax.status === 200 && ajax.readyState === 4) {
//if result are not there then don't display them
if(ajax.responseText === "")
document.getElementById("suggestion").style.visibility = "hidden";
else {
document.getElementById("suggestion").style.visibility = "visible";
document.getElementById("suggestion").innerHTML = ajax.responseText;
}
}
};
ajax.open("GET", "suggestion.php?q=" + q, false);
ajax.send();
}
</script>
<script>
function validateForm()
{
var x=document.forms["q"]["q"].value;
if (x==null || x=="")
{
return false;
}
}
</script>
</head>
<body>
<form method="GET" action="search.php" name="q" onsubmit="return validateForm()">
<table align="center">
<tr>
<td>
<h1><center>Brandon's Search Engine</center></h1>
</td>
</tr>
<tr>
<td align="center">
<input type="text" name="q" style="height: 27px; width: 650px; padding: 2px"
onkeyup="getSuggestion(this.value)" autocomplete="off" onblur="blur() document.getElementById('suggestion').style.visibility = 'hidden'"/>
<div id="suggestion" style="width: 648px">
</div>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" name="submit" value="Search" style="height: auto; width: 60px; padding: 2px" />
<input type="reset" value="Clear" style="height: auto; width: 50px; padding: 2px" />
</td>
</tr>
<tr>
<td align="center">
To insert your site in result fill in the form at here.
</td>
</tr>
</table>
<input type="hidden" name="page" value="0" />
</form>
</body>
</html>
Hope that someone can help me out with this
Thanks
<html>
<head>
<title>
Brandon's Search Engine
</title>
<style type="text/css">
#suggestion {
border: 1px solid black;
visibility: hidden;
position: relative;
background-color: white;
z-index: 10;
}
#suggestion a {
font-size: 12pt;
color: black;
text-decoration: none;
display: block;
width: 648px;
height: auto;
text-align: left;
padding: 2px;
}
#suggestion a:hover {
background-color: #dddddd;
width: 644px;
padding: 2px;
}
</style>
<script type="text/javascript">
//document.getElementById("suggestion")
function getSuggestion(q) {
var ajax;
if(window.XMLHttpRequest)//for ie7+, FF, Chrome
ajax = new XMLHttpRequest();//ajax object
else
ajax = new ActiveXObject("Microsoft.XMLHTTP");//for ie6 and previous
ajax.onreadystatechange = function() {
if(ajax.status === 200 && ajax.readyState === 4) {
//if result are not there then don't display them
if(ajax.responseText === "")
document.getElementById("suggestion").style.visibility = "hidden";
else {
document.getElementById("suggestion").style.visibility = "visible";
document.getElementById("suggestion").innerHTML = ajax.responseText;
}
}
};
ajax.open("GET", "suggestion.php?q=" + q, false);
ajax.send();
}
</script>
<script>
function closeBox(){
document.getElementById("suggestion").style.visibility = "hidden";
}
function validateForm()
{
var x=document.forms["q"]["q"].value;
if (x==null || x=="")
{
return false;
}
}
</script>
</head>
<body>
<form method="GET" action="search.php" name="q" onsubmit="return validateForm()">
<table align="center">
<tr>
<td>
<h1><center>Brandon's Search Engine</center></h1>
</td>
</tr>
<tr>
<td align="center">
<input type="text" name="q" style="height: 27px; width: 650px; padding: 2px"
onkeyup="getSuggestion(this.value)" autocomplete="off" onblur="blur() document.getElementById('suggestion').style.visibility = 'hidden'"/>
<div id="suggestion" style="width: 648px">
</div>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" name="submit" value="Search" style="height: auto; width: 60px; padding: 2px" />
<input type="reset" onclick="closeBox()" value="Clear" style="height: auto; width: 50px; padding: 2px" />
</td>
</tr>
<tr>
<td align="center">
To insert your site in result fill in the form at here.
</td>
</tr>
</table>
<input type="hidden" name="page" value="0" />
</form>
</body>
Related
when ever i am insert the value it says check data base connection. All the things are correct but it always giving the same error.
I am amking the quiz this page is for adding the question adding. whenever i am inserting the value it says please check DB connection. All the things are correct. User name password database name are also correct.
But same error is occuring
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>!deal Banker</title>
<style type="text/css">
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}
#leftcolumn{
float: left;
width: 230px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
background: #FDE95E;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
/* ####### responsive layout CSS ####### */
#media (max-width: 840px){ /* 1st level responsive layout break point- drop right column down*/
#leftcolumn{
margin-left: -100%;
}
#rightcolumn{
float: none;
width: 100%;
margin-left: 0;
clear: both;
}
#contentcolumn{
margin-right: 0; /*Set margin to LeftColumnWidth*/
}
}
#media (max-width: 600px){ /* 2nd level responsive layout break point- drop left column down */
#leftcolumn{
float: none;
width: 100%;
clear: both;
margin-left: 0;
}
#contentcolumn{
margin-left: 0;
}
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="topsection"><div class="innertube">
<?php
include'menu.php';
?></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<?php
$conn = mysql_connect("localhost","banker","gaurav#441");
$db = "idealbanker";
$table = "pp";
mysql_select_db($db,$conn);
if(isset($_REQUEST['submit']))
{
if($_POST['question'] == '')
{
echo 'cannot submit field empty';
}
elseif($_POST['answer1'] == '')
{
echo 'cannot submit field empty';
}
elseif($_POST['answer2'] == '')
{
echo 'cannot submit field empty';
}
elseif($_POST['answer3'] == '')
{
echo 'cannot submit field empty';
}
elseif($_POST['answer4'] == '')
{
echo 'cannot submit field empty';
}
elseif($_POST['answer5'] == '')
{
echo 'cannot submit field empty';
}
else
{
function clean($str) {
$str = #trim($str);
if(get_magic_quotes_gpc()) {
$str = stripslashes($str);
}
return mysql_real_escape_string($str);
}
$question = clean($_POST['question']);
$answer1 = clean($_POST['answer1']);
$answer2 = clean($_POST['answer2']);
$answer3 = clean($_POST['answer3']);
$answer4 = clean($_POST['answer4']);
$correctanswer = clean($_POST['answer5']);
$qry = "INSERT INTO $table( question, answer1, answer2, answer3, answer4, correctanswer )VALUES('$question','$answer1','$answer2','$answer3','$answer4','$correctanswer')";
$result = #mysql_query($qry);
if(!$result)
{
echo 'Question Cannot Submit Check DB Connection';
echo "<br>Add Again";
}
else
{
echo 'Question Submitted Successfully';
}
echo "<br>Add More";
}
}
else
{
echo '<form name="form1" method="post" action="'.$_SERVER['PHP_SELF'].'">
<table width="500" border="0">
<tr>
<td width="100">Question</td>
<td width="242">
<input name="question" type="text" size="60">
</td>
</tr>
<tr>
<td>Answer 1 </td>
<td><input name="answer1" type="text" size="30"></td>
</tr>
<tr>
<td>Answer 2 </td>
<td><input name="answer2" type="text" size="30"></td>
</tr>
<tr>
<td>Answer 3 </td>
<td><input name="answer3" type="text" size="30"></td>
</tr>
<tr>
<td>Answer 4 </td>
<td><input name="answer4" type="text" size="30"></td>
</tr>
<tr>
<td>Correct Answer </td>
<td><input name="answer5" type="text" size="30"></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><label>
<input type="submit" name="submit" value="Submit">
</label></td>
</tr>
</table>
</form>
';
}
?>
</div>
</div>
<div id="leftcolumn">
<?php
include 'left.php';
?>
</div>
<div id="rightcolumn">
<?php
include 'right.php';
?>
</div>
<div id="footer"><?php
include'footer.php';
?></div>
</div>
</body>
</html>
Your "check db connection" error message is UTTERLY useless. Never output a fixed unchanging message. Have the DB TELL you why the query failed:
if (!$result) {
die(mysql_error());
}
And note that you're simply ASSUMING the connection is working. You never bother checking the return values of your connection and select_db calls.
I am loading a PHP page with a table using DataTables fixed header functionality. I can not seem to get the table to be at 100% of page load while page renders. It starts off as compressed (while loading) then expanded (once page renders).
I tried to resolve this by output buffering in php but can not get the effect of compression then expansion to go away.
Initialization Code (At Bottom of Script)
$(document).ready(function() {
$('#summary_table').DataTable( {
"scrollY": 400,
"scrollX": true,
"bSort": false,
"bPaginate": false,
"autoWidth": false
} );
$(".dataTables_wrapper").css("width","100%");
});
EDIT:
(Table is compressed during load but then goes to 100%.)
PHP
<html>
<head>
<title>Action Item Summary</title>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
<style>
thead th {
background-color:#0038a8;
font-weight: bold;
font-style: italic;
color: white;
text-align: left;
}
table:not(#header):not(#menu):not(#find) {
background-color: white;
width: 100%;
}
td {
width: auto;
min-width: auto;
white-space: nowrap;
}
input[type='text'] {
width: 50%;
min-width: 100%;
}
span {
white-space: nowrap;
}
span.late{
color: red;
}
thead tr td a{
color: white;
}
th a:hover
{
cursor: pointer;
text-decoration: underline;
}
div.dataTables_wrapper {
width: 100%;
margin: 0 auto;
}
div.dataTables_scrollBody table#summary_table {
width: 100% !important;
}
table.dataTable tr.odd { background-color: #dae1e9; }
table.dataTable tr.even { background-color: white; }
</style>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../js/table.js"></script>
</head>
<body>
<? $pageTitle="All Action Items (".count($resAll).")"; include_once('../shared/pageheader.php'); ?>
<?if (isset($_SESSION['filteron']) && $_SESSION['filteron'] == true):?><div style="position:relative; float:right; display: inline; font-weight: bold; color:red; font-size: 12pt; background-color: lightgray; margin-right: 10"> Filter On </div><br /><?endif;?>
<form method="POST" action="/actionitems/viewactionitem.php">
<table id="find" border="1">
<tr>
<td class="label">Find Action Item</td>
<td style="width:100 !important"><input type="text" id="id" name="id" value=""></input></td>
<td><input type="submit" value="View" /></td>
<td><input type="button" value="Find" onclick="jumpTo($('#id').val())"+/></td>
</tr>
</table>
</form>
<table style="background-color: transparent">
<tr>
<td id="left" align="left">
<? if($_SESSION['userrole'] == 'Admin'): ?>[<a style="text-decoration: underline; color: black" href="newactionitem.php"><b>Add New Action Item</b></a>] <? endif;?>
</td>
<td id="middle" align="middle">
[<a style="text-decoration: underline; color: black" href="allactionitems.php"><b>All Action Items</b></a>]
[<a style="text-decoration: underline; color: black" href="openactionitems.php"><b>Open Action Items</b></a>]
[<a style="text-decoration: underline; color: black" href="completedactionitems.php"><b>Completed Action Items</b></a>]
[<a style="text-decoration: underline; color: black" href="closedactionitems.php"><b>Closed Action Items</b></a>]
</td>
<td id="right">
</td>
</tr>
</table>
<form style="display:inline" id="summaryform" method="POST" action="allactionitems.php">
<div class="summary_table" style="<? if(count($resAll)> 23): ?>height:500;<?endif;?> overflow-y:auto">
<table id="summary_table" class="display nowrap" style="width: 1000" border=1>
<thead class="header">
<tr>
<? foreach ($cols as $cidx=>$col): ?>
<? if (!in_array($col, $hideCols)): ?>
<th>
<?if (in_array($col, $categoryNames)):?>
<a onclick="$('#summaryform').attr('action', 'allactionitems.php?orderby=<?=$manageActionItems->getCategoryName($col)?>&dir=<?=($dir=="DESC")?"ASC":"DESC"?>'); $('#summaryform').submit();"><?=$manageActionItems->getCategoryName($col)?></a><? if ($orderBy == $manageActionItems->getCategoryName($col) && $dir == "DESC") echo "<white>▼</white>"; else if ($orderBy == $manageActionItems->getCategoryName($col) && $dir == "ASC") echo "<white>▲</white>"; else echo "<span style='display: inline-block; width: 13'></span>";?></td>
<? else:?>
<a onclick="$('#summaryform').attr('action', 'allactionitems.php?orderby=<?=$col?>&dir=<?=($dir=="DESC")?"ASC":"DESC"?>'); $('#summaryform').submit();"><?=($col=="ActionItemID")?"ID": $col?></a><? if ($orderBy == $col && $dir == "DESC") echo "<white>▼</white>"; else if ($orderBy == $col && $dir == "ASC") echo "<white>▲</white>"; else echo "<span style='display: inline-block; width: 13'></span>"; ?>
<?endif;?>
</th>
<? endif; ?>
<? endforeach; ?>
<th>
View
</th>
<th>
Edit
</th>
</tr>
</thead>
<tbody>
<? foreach($resAll as $idx=>$row): ?>
<? //echo"<pre>"; var_dump($row); echo"</pre>"; ?>
<tr id="row<?=$row['ActionItemID']?>">
<? foreach ($cols as $cidx=>$col): ?>
<? if (!in_array($col, $hideCols)): ?>
<td <? if($orderBy == $col) echo "class='sort'"; ?>>
</td>
<? endif; ?>
<? endforeach; ?>
<td>
View
<!--input type="submit" value="View" style="width:60;height:20;border:none; font-weight: bold"/-->
</form>
</td>
<td>
<? if(($_SESSION['userrole'] == 'Admin' && $_SESSION['userrole'] == 'Admin') || isset($_SESSION['userid']) &&($row['OwnerID'] == $_SESSION['userid'] || $row['AltOwnerID'] == $_SESSION['userid'])):?>
Edit
<? endif; ?>
<!--input type="submit" value="Edit" style="width:60;height:20; border:none;font-weight: bold" /-->
</form>
</td>
</tr>
<? endforeach; ?>
</tbody>
</table>
</div>
</form>
<script>
$(document).ready(function() {
$('#summary_table').DataTable( {
"scrollY": 400,
"scrollX": true,
"bSort": false,
"bPaginate": false,
"autoWidth": false
} );
$(".dataTables_wrapper").css("width","100%");
});
</script>
</body>
</html>
CSS
div#splash
{
background-color:#d8d8d8;
}
body
{
font-family: arial;
}
textarea
{
width: 100%;
max-width: auto;
height: 100px;
max-height: 85px;
overflow-y:scroll;
resize: none;
font-family: inherit;
}
html * :not(h1):not(h2)
{
font-size: 10pt;
}
body
{
margin: 0px;
background-image: url('/img/custom_back.gif');
}
h1, h2
{
font-family: arial;
text-align: center;
}
h3
{
font-size: 75%;
}
table.data tr td:not(.label)
{
background-color:white;
}
td#left
{
width: 25%;
}
td#right
{
width: 25%;
}
td#middle
{
width: 50%;
}
td.label
{
font-weight: bold;
font-style: italic;
}
table#find tr td.label,
table.data tr td.label
{
background-color:#0038a8;
color: white;
}
table.data tr td.label,
table.data:not(#details) tr td
{
width: 25%;
}
table.data
{
margin: 0 auto;
}
table#header
{
width: 100% !important;
}
table#header tr td
{
vertical-align: middle;
background-color: transparent;
}
input[type=submit]
{
margin: 0 auto;
}
td
{
vertical-align: middle;
}
div#header div
{
display:inline-block;
}
div#title
{
font-style: italic;
}
img#logo
{
width: 95px;
height: 95px;
}
table#toolname td
{
font-weight: bold;
font-size: 15px;
}
table#menu
{
background-color: #0038a8;
}
.required
{
border-style:solid;
border-width:2px;
border-color:red;
}
td > div:not(.filterinput):not(.cell)
{
height: 85px;
max-height: 85px;
overflow-y:scroll;
overflow-x:hidden;
}
td.sort
{
background-color: lightgray;
}
How do I resolve this issue?
for Bootstrap 4 Users
If you are using Bootstrap classes to the table, you might ran into this width issue. To fix this, use the datatable default option "autoWidth": false
Enable or disable automatic column width calculation. This can be
disabled as an optimisation (it takes a finite amount of time to
calculate the widths) if the tables widths are passed in using
$('#example').dataTable( {
"autoWidth": false
});
https://datatables.net/reference/option/autoWidth
I believe I have resolved the issue. I was using an older build.
After upgrading to 10.1 and following the table width instruction below, I resolved my issue.
I added (width="100%") to my table tag and it now stays at 100%
So instead of
<table id="summary_table" class="display nowrap" style="width: 1000" border=1>
I replaced the style width: 1000 which just sets the absolute width to 1000 pixels (I forgot to add the px unit suffix), to a percentage value of 100% `width='100%' and the resolving table tag would read.
<table id="summary_table" class="display nowrap" width="100%" border=1>
I used the answer from this question to form my response
https://stackoverflow.com/a/23842795/1691103
Example
http://www.datatables.net/examples/basic_init/flexible_width.html
I was facing the same problem and tried all the above solutions but no luck.
After hours of search, I found that the bootstrap class "table-responsive" has a problem with the DataTable.
So the solution is -
Just remove the "table-responsive" class from the table.
So the HTML of the table should look like this -
<table class="table table-striped table-hover table-sm" id="followup-table">
<thead>
<tr class="text-white">
<th>#</th>
<th>Follow Up On</th>
<th>Name</th>
<th>Phone No</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>4 Jun 2021</td>
<td>Mrityunjay Mishra</td>
<td>87838734</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#followup-table').DataTable();
} );
</script>
I read all the answers. none of them mentioned this simple way:
just add style="width:100%" to the table tag
<table style="width:100%" class="table table-striped- table-bordered table-hover table-checkable" id="firstmile-tbl" >
For me in Bootstrap 4.4.1 unfortunately Dexters solution didn't work. The solution is to add a class of w-100 to the table.
If you're using Bootstrap don't forget to add the table class to your table.
<table id="my_table" class="table">
...
</table>
For me adding css selector to the parent div of the table worked like a charm!
div.dataTables_wrapper {
width:100% !important;
}
I have set when user types something in the search box, the suggestions will appear.
When suggestions appear, it will push the buttons and texts below down as I set its position relative.
But when user delete those words in the search box and the suggestion list disappears, the buttons and texts below the suggestion list did not move back to the original place.
How can I let the buttons and texts below the suggestion list move back to the original place when user delete those words in search box?
This is my current code:
<?php
include 'script_suggestion.php';
include 'script_close_suggestion_box.php';
?>
<html>
<head>
<title>
Brandon's Search Engine
</title>
<style type="text/css">
#suggestion {
border: 1px solid black;
visibility: hidden;
position: relative;
background-color: transparent;
z-index: 10;
}
.suggestion a {
font-size: 12pt;
color: black;
text-decoration: none;
display: block;
width: 648px;
height: auto;
text-align: left;
padding: 10px;
}
.suggestion a:hover {
background-color: #dddddd;
width: 644px;
padding: 2px;
}
</style>
</head>
<body>
<form method="GET" action="search.php" name="q">
<table align="center">
<div>
<h1><center>Brandon's Search Engine</center></h1>
</div>
<div align="center">
<input type="text" name="q" id="q" class="q" style="height: 27px; width: 650px; padding: 2px" placeholder="Search Now"
onkeyup="getSuggestion(this.value)" autocomplete="off" autoFill="on" onblur="closeBox()"/>
<script>document.getElementById('q').focus()</script>
<div id="suggestionBox" style="visibility: collapse;">
<div id="suggestion" style="width: 645px; text-align: left; padding: 2px;">
</div>
</div>
</div>
<br />
<div align="center">
<input type="submit" value="Search" name="submit" style="height: auto; width: 60px; padding: 2px" />
<input type="reset" value="Clear" onclick="closeBox()" style="height: auto; width: 50px; padding: 2px" />
</div>
<div align="center">
Can't find your site? <br /> Insert here.
</div>
</table>
<input type="hidden" name="page" value="1" />
</form>
</body>
</html>
Thanks in advance.
On your function in your onkeyup, you can check the text value and if that was empty change css position of your element to original:
function getSuggestion(value){
if(!value.length()){
//change to original place
}
.
.
.
}
I hope to help
I'm trying to show suggestionList on search, I have 4 questions
is it safe?
why it doesn't work on google chrome and working on firefox and ie
how i make it hide suggestions after 2 > seconds if the user
didn't choose any of the suggestions, i have tried to do but it
didn't work
[setTimeOut(document.getElementById("list").style.display="none",
2000)]
how to add quote in the sql query while im using WHERE > NAME LIKE
here is the piece of code
<script type="text/javascript">
function showSuggestions(str)
{
if(str=="")
return;
if(window.XMLHttpRequest())
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
var c = document.getElementById("list");
c.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "/ajax/character/"+str, true);
xmlhttp.send();
}
</script>
<form action="/characters/" onsubmit="window.location='/characters/'+this.name.value; return false;" class="form" autocomplete="off" method="post">
<p style="font-weight:200;color:brown;font-size:12px;">Find User.</p>
<div>Please enter a user name
<input name="name" type="text" onkeyup="showSuggestions(this.value)" maxlength="35" required="required" pattern="[A-Za-z\s]{3,35}" autofocus="autofocus"/>
<div id="list"></div>
</div>
<p style="text-align:center">
<input type="submit" class="button" value="Search"/>
</p>
</form>
<style>
.suggestionList {
margin: 0px;
padding: 0px;
padding-left: 10px;
line-height: 16px;
list-style: none outside none;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #659CD8;
}
.suggestionsBox {
position: relative;
left: 230px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #212427;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}
</style>
<?php
if(isset($_GET['name']) && strlen($_GET['name']) > 1) {
include('../main.php');
$name = $_GET['name'];
if(check_name($name)) {
?>
<div class="suggestionsBox" id="suggestions" style="display :block;">
<img src="/images/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="SuggestionsList"><?
foreach(query('SELECT name FROM users WHERE name LIKE "'.$name.'" LIMIT 5')->fetchAll() as $q) {
echo '<li>'.$q['name'].'</li>';
} ?>
</div>
</div>
<?
}
else
echo 'Invalid name format';
}
I am creating an application in which a folder gets created by the username, and inside that folder, another folder gets created dynamically called Profile_Pics.
I have used Ajax Script also.
Its just a bit of Facebook album type application. Now the problem is that, for this thing I am using session, and user can created other folders also say like "My_Pics" inside his folder. The folder is for storing photos.
The path of the created album inside username folder is like this
Candidate_Pics/sex/Username/album_name
Example:
If a male of username saz26 registers first, then the folder Profile_pics will be created by default.
Candidate_Pics/Male/saz26/Profile_pics
If he creates another album say My_Pics then:
Candidate_Pics/Male/saz26/My_pics
Where under My_Pics he can store other pics.
Now I have created this page, and I need to work with session. And also I use session variable.
Here's my photos.php file:
<?php
session_start();
ob_start();
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" media="screen" href="CSS/main.css" />
<link rel="stylesheet" type="text/css" media="screen" href="CSS/style.css" />
<script type="text/javascript" src="AJAX/AjaxCreateAlbum.js"></script>
<script>
function showalbum()
{
document.getElementById('AlbumDiv').style.display = "block";
document.getElementById('fade').style.display = "block"
return false;
}
</script>
</head>
<body>
<div id="pictures">
<h2>Photos</h2>
<form id="picture_form" name="picture_form" method="post" action="javascript:getfolder(document.getElementById('picture_form'));">
<table align="center" width="650" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50px" align="center"/>
<td width="100px" align="center">
<label for="album_name">Create Album::</label>
</td>
<td width="50px" align="center"/>
<td width="100px" align="center">
<input type="text" name="album_name" id="album_name" class="textfield" style="width: 100px;"/>
</td>
<td width="50px" align="center"/>
<td width="100px" align="center">
<input type="submit" name="submit" id="submit" class="button" value="Create Album" />
</td>
<td width="50px" align="center"/>
<td width="100px" align="center">
<div id="album_report"></div>
</td>
<td width="50px" align="center"/>
</tr>
<tr>
<td colspan="9" height="20px"/>
</tr>
</table>
<?php
$folder=array();
if(is_dir("Candidate_Pics/". "$_SESSION[sex]". "/" . "$_SESSION[logged_user]"))
{
$dir=opendir("Candidate_Pics/". "$_SESSION[sex]". "/" . "$_SESSION[logged_user]");
$nofiles=0;
while ($file = readdir($dir))
{
if ($file != '.' && $file != '..')
{
$nofiles++;
$files[$nofiles]=$file;
}
}
closedir($dir);
}
/* populate sample data */?>
<?php
/* how many columns */
$column_number='3';
/* html table start */
?><table border="1" cellspacing="5" cellpadding="5" width="650px" align="center"
><?php
$recordcounter=1; /* counts the records while they are in loop */
foreach($files as $record) {
/* decide if there will be new Table row (<TR>) or not ... left of division by column number is the key */
if($recordcounter%$column_number==1){ echo "<tr>"; }
?>
<td width="200px" align="center">
<?php echo $record;?><br/>
<?php
$_SESSION['album_name']="Candidate_Pics/$_SESSION[sex]/$_SESSION[logged_user]/$record";
echo "$_SESSION[album_name]"; ?>
<a href="javascript:void(0)" onClick="showalbum();" ><img src="Images/folder.png" width="200px"/></a><br/>
<input type="button" name="delete" id="delete" value="delete" class="button"/>
</td>
<?php
/* decide if there will be end of table row */
if($recordcounter%$column_number==0){ echo "</tr>"; }
$recordcounter++; /* increment the counter */
}
if(($recordcounter%$column_number)!=1){ echo "</tr>"; }
?></table>
</form>
</div>
<div id="AlbumDiv" class="white_content">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="382px">
<tr>
<td height="16px">
<a href="javascript:void(0)"
onclick="document.getElementById('AlbumDiv').style.display =
'none';document.getElementById('fade').style.display='none'">
<img src="images/close-icon.png" style="border-style: none; border-color: inherit;
border-width: 0px; height: 17px; width: 16px;" align="right" /></a>
</td>
</tr>
<tr>
<td>
<?php echo "$_SESSION[album_name]";?>
</td>
</tr>
<tr>
<td height="16px"/>
</tr>
</table>
</div>
<div id="fade" class="black_overlay">
</div>
</body>
</html>
the problem is that the line
echo "$_SESSION[album_name]";
inside the foreach loop is giving rite result for each record(rather say folder),
but the line
echo "$_SESSION[album_name]";
inside the AlbumDiv(used for the lightbox),
is only giving the result with Profile_pics, i.e. "Candidate_Pics/Male/saz26/Profile_pics"
no matter which ever folder image i click...
following is the AjaxCreateAlbum.js script
var http_request = false;
function makePOSTalbum(url, parameters)
{
http_request = false;
if (window.XMLHttpRequest)
{
// Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType)
{
// set type accordingly to anticipated content type
//http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
}
}
else if (window.ActiveXObject)
{ // IE
try
{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (!http_request)
{
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertAlbumCreated;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
}
function alertAlbumCreated()
{
if (http_request.readyState == 4)
{
if (http_request.status == 200)
{
//alert(http_request.responseText);
result = http_request.responseText;
document.getElementById('album_report').innerHTML = result;
}
else
{
alert(http_request.status);
}
}
}
function getfolder(obj)
{
alert("huhu");
var poststring = "album_name=" + encodeURI( document.getElementById("album_name").value );
alert(poststring);
makePOSTalbum('createalbum.php', poststring);
}
And following is the createalbum.php script:
<?php
session_start();
if(mkdir("Candidate_Pics/$_SESSION[sex]/$_SESSION[logged_user]/".$_POST['album_name']))
echo "done";
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
And following is the stylesheet file:
.black_overlay
{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100.7%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.white_content
{
display: none;
position: fixed;
top: 37%;
left: 32%;
width: 382px;
padding: 0px;
border: 0px solid #a6c25c;
background: url(loginpanel.png);
z-index: 1002;
overflow: auto;
}
.headertext
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #f19a19;
font-weight: bold;
}
.textfield
{
border: 1px solid #a6c25c;
width: 100px;
border : 1px solid #999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
_border-radius: 5px;
}
.dropdown
{
border: 1px solid #a6c25c;
border : 1px solid #999;
border-radius: 5px;
}
.button2
{
background-color: #a6c25c;
color: White;
font-size: 11px;
font-weight: bold;
border: 1px solid #7f9db9;
width: 100px;
}
.button
{
zoom: 1;
background: url(button.png);
color: White;
font-size: 11px;
font-weight: bold;
border: 1px solid #7f9db9;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
#border-radius: 5px;
_border-radius: 5px;
border-radius: 5px;
}
#loading{
text-align: center;
visibility: hidden;
}
#content{
color: #000000;
margin: 0 0 20px 0;
line-height: 1.3em;
font-size: 14px;
}
.text
{
border: 1px solid #a6c25c;
border : 1px solid #999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
_border-radius: 5px;
}
/******* TOP *******/
#topmenu{
margin: 0 0;
padding: 0 0 0 0;
background: url(button.png);
}
/******* /TOP *******/
/******* MENU *******/
#topmenu #menu_main{
float: left;
list-style-type: none;
margin: 0px 0 0px 0px;
}
#topmenu #menu_main li{
float: left;
text-transform: uppercase;
color: #000099;
margin-left: 50px;
margin-right: 50px;
}
#topmenu #menu_main li:hover{
color: #6fa5fd;
cursor: pointer;
}
/******* /MENU *******/
/******* FOOTER *******/
#footer{
background: #efefef;
border: 1px solid #d0ccc9;
padding: 5px;
color: #7e7e7e;
font-size: 11px;
text-align: right;
}
/******* /FOOTER *******/
If I'm reading this correctly, your session variable is being set multiple times within a foreach loop, and then later called. Every time you write to that session variable within a loop, it overwrites the previous value, so once that loop is done, the only value the session variable will hold is the very last one from the loop.
Luckily you can remedy that pretty easily, since you're writing a javascript function call in an <a> tag in the next line. You can change that to echo the album name (while you're still in the loop) as what will on the client side be a Javascript argument.
<a href="javascript:void(0)" onClick="showalbum();" ><img src="Images/folder.png" width="200px"/></a><br/>
Becomes:
<a href="javascript:void(0)" onClick="showalbum('<?php echo $_SESSION['album_name']; ?>');" ><img src="Images/folder.png" width="200px"/></a><br/>
Then all you have to do is change your showalbum function to accept an argument, and use it to set the content of the intended <td> element. For example:
function showalbum(album_name)
{
document.getElementById('AlbumDiv').style.display = "block";
document.getElementById('fade').style.display = "block"
document.getElementById('albumName').innerHTML = album_name; // this line added
return false;
}
And in the PHP,
<td>
<?php echo "$_SESSION[album_name]";?>
</td>
Becomes:
<td id="albumName"></td>