Develop Reference

PHP reload elements without reloading the page?

I have code generating a table from a database like this:
<?
include 'conndb.php';
?>
<button id="ps">PŚ</button>
<button id="lgp">LGP</button>
<table align=center border=1 cellspacing=0 cellpadding=2 style=\"color: brown;\">
<tr>
<td width=25 align=\"center\">Lp.</td>
<td width=570 align=\"left\">Nazwisko i imię</td>
<td width=50 align=\"center\">Pkt</td>
</tr>
<? ///content
$sql55="SELECT * FROM `grobar_IDs` WHERE `ps_m_s`!=0 AND `kategoria`=1 ORDER BY `ps_m_s` DESC LIMIT 5";
$result55=mysql_query($sql55);
$lp0 = 1;
while($s = mysql_fetch_assoc($result55)) {
echo "<tr><td width=25 align=\"center\">".$lp0++."</td><td width=570 align=\"left\">".$s['nazwisko']." ".$s['imie']."</td><td width=50 align=\"center\">".$s['ps_m_s']."</td></tr>";
}
///end content
?>
</table>
And I want to change the content between ///content and ///end content after using these buttons - of course without reloading the page. How can I do this?

Get clicked href variable from one page to another

Greeting everyone,
Currently i'm making a webpage that has the following functions:
When the administrator opens the page, admin will be seeing a form filled with these information from a database:
What this page does is that it shows how many video's each user has in the database and when the admin clicks on the desired user ID, a new page should open with the video's of that specific user ID. The " DONE" button is to return to the main page when the admin is done deleting video's.
Now, what I have done is that I've assigned an href link to the userID values that is being fetched from Database. The problem is that, I have no clue how to pass the selected value/string to the next page with href. I've tried with Session, but ended up getting the last variable processed in the WHILE loop instead of getting the clicked UserID. Below follows my php code of what I've done. Can anyone give me some tips on how to pass the clicked userID from one page to another with href, or is there another way to do this?
code= click here
ps: As everyone can see, my php coding needs some serious improvement. But i'm still trying to improve by doing these types of exercises.
<?php
include_once ("includes/db_connection.php");
$sql = "SELECT Users_UserID, count(Users_UserID) AS total FROM video GROUP BY Users_UserID";
$sql2="SELECT UserID, FirstName, LastName FROM users";
$result = $connection->query($sql);
$result2 = $connection->query($sql2);
?>
<table width="400" border="0" cellspacing="1" cellpadding="0">
<tr>
<td><form name="deleteSingleVideo" method="post" action="">
<table width="400" border="0" cellpadding="3" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td bgcolor="#FFFFFF"> </td>
<td colspan="4" bgcolor="#FFFFFF"><strong>Delete user video</strong> </td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF">#</td>
<td align="center" bgcolor="#FFFFFF"><strong>First Name</strong></td>
<td align="center" bgcolor="#FFFFFF"><strong>Last Name</strong></td>
<td align="center" bgcolor="#FFFFFF"><strong>User ID</strong></td>
<td align="center" bgcolor="#FFFFFF"><strong>Amount of videos</strong></td>
</tr>
<?php
session_start();
if ($result->num_rows > 0) {
while (($row=$result->fetch_assoc())&& ($row2=$result2->fetch_assoc()) ) {
?>
<tr>
<td align="center" bgcolor="#FFFFFF"></td>
<td bgcolor="#FFFFFF"><center><?php echo $row2['FirstName']; ?></center></td>
<td bgcolor="#FFFFFF"><?php echo $row2['LastName']; ?></td>
<td bgcolor="#FFFFFF"><center><a href="DeleteVideo.php" target="_blank"><?php echo $row['Users_UserID'];
$_SESSION['id']=$row['id'] ?></center></td>
<td bgcolor="#FFFFFF"><center><?php echo $row['total'];?></a></center></td>
</tr>
<?php
}
}
?>
<tr>
<td colspan="5" align="center" bgcolor="#FFFFFF"><input name="Done" type="submit" id="Done" value="Done" </td>
</tr>
<?php
$connection->close();
if(isset($_POST['Done'])){
header( "Location: Home.php" );
}
?>
</table>
</form>
</td>
</tr>
</table>
<?php
?>

this is not a good use of session
use get method to send such data :
append the id to href url --->href="<?php echo "DeleteVideo.php?id="$row['id'] ?>";
get data in the next page by accessing global variable ---> $_GET['id']

..
In the DeleteVideo.php your variable is $_GET['id']

use this code
and that id value get in xyz.php
$value=$_request['id'];
or
$value=$_Get['id'];

Change dynamic id of an URL

I'm looking a way to set with javascript somewhere only the id e.g from a youtube video and to place it automatic in URL. For instance I can make it like this in PHP: ->
<?php
$id = 'pOYRLBhYGyc';
?>
<table style="background:url('http://img.youtube.com/vi/ <?php echo "$id" ?> /0.jpg')no-repeat;
Is there any way like this in JS also?

Yes you can. You need to set the background property dynamically.
Checkout a sample in JS Fiddle.
<table id="sample" border="1" width="100%" height="100%">
<tr>
<td>Sample</td>
</tr>
<tr>
<td>Sample</td>
</tr>
<tr>
<td>Sample</td>
</tr>
<tr>
<td>Sample</td>
</tr>
</table>
The script tag will contain the following script.
var videoId = "pOYRLBhYGyc";
$("#sample").attr("background", "http://img.youtube.com/vi/" + videoId + "/1.jpg");
http://jsfiddle.net/y44n6hao/

Using multiple values in a filter function jquery data attribute example

I was looking at the usage of jquery filter for data attributes, in this case, tables containing three data variables, i.e, team, specialization and level. Please do let me know what the best approach is and what the typical usage methodology are.
Here is my code html:
<table data-team="<?php print $name['team']; ?>" data-specialization="<?php print $name['speciality']; ?>" data-level="<?php print $name['level']; ?>" cellpadding="0" cellspacing="0" border="0" width="670px" class="jobs"><tr><td>
<tr><td colspan="4"><strong><?php print $name['title'] ?></strong></td>
<td></td><td></td><td></td></tr>
<tr>
<td width="100">Location : </td>
<td colspan="3"><?php print ($name['location']);?> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> Job Code : </td>
<td width="460"><?php print $name['id'] ?></td>
<td></td>
<td></td>
<td><a data-action="showDesc,jumpTo" href="javascript:;" id="<?php print($name['id']);?>" class="more">More Details </a></td>
</tr></td></tr>
</table>
The javascript that I have I got from one other Stack Overflow question, and it works on showing based on one matching attribute, here is my code:
$("#search").click(function() {
var team=$('#selectOne').val();
var specialty=$('#selectTwo').val();
var level=$('#selectThree').val();
var teams=[];//
var special=[];
var level=[];
//teams=$('.jobs').data('team');
//alert(teams);
$(".jobs").hide();
$('.jobs').filter(function(){
return $(this).data('team') === team;
}).show();
});
});
I want to put all the data-team attributes into the array, iterate over it and then check if each table contains it, in which case to the next array, to check and so on. if the data values match then, show.

Turns out my error was just that I re-declared the variables team[]. so basically, this:
$('.jobs') .hide().filter('[data-team="'+team+'"][data-specialization="'+specialty+'"][data-level="'+level+'"]').addClass('num').show();
Works fine now.

Don't understand jquery - setting equal height contained divs

I am trying to set two side-by-side divs contained by a single larger div to equal column height. I am trying to use the following jquery script:
<script type="text/javascript" language="javascript">
function pageLoad() {
$(document).ready(function() {
setEqualHeight($(".instructionsParent > div"));
});
}
function setEqualHeight(columns) {
var tallestColumn = 0;
columns.each(function() {
currentHeight = $(this).height();
if(currentHeight > tallestColumn) {
tallestColumn = currentHeight;
}
});
columns.height(tallestColumn);
}
</script>
Then the following are my DIV's:
<div class="instructionsParent borderDiv borderTable0" style="overflow:hidden">
<div class="instructionsLeft" style="float:left;width:49.5%">
</div>
<div class="instructionsRight" style="float:right;width:49.5%">
</div>
</div>
The jquery is running and appears to be returning the largest height (451), but doesn't seem to apply it to the two divs. I don't know much jquery or javascript and don't understand the following: "setEqualHeight($(".instructionsParent > div"));"
Could it be that I have that coded incorrectly?
Thank you,
James
Ok, here is the entire subform which is my entire page really (I have two subforms on the page with one visible and the other not:
<%# Control Language="VB" AutoEventWireup="false" CodeFile="ActivexInstructionsSubForm.ascx.vb" Inherits="Controls_ActivexInstructionsSubForm" %>
<div class="instructionsParent borderDiv borderTable0" style="overflow:hidden">
<div class="instructionsLeft" style="float:left;width:49.5%">
<table cellspacing="0" class="borderTable0" width="100%" style="height:430px;" >
<tr>
<td align="center">
<br />
<h3 style="font-family:Arial;color:#17238C">"The Important Stuff"</h3>
</td>
</tr>
<tr valign="top">
<td align="center">
<table border="0" cellpadding="1" cellspacing="0"
style="border-collapse: collapse;">
<tr>
<td>
<table border="0" cellpadding="0">
<tr>
<td colspan="2" style="text-align:left;font-family:Arial;font-weight:bold;color:#17238C">
<p style="font-size:11pt"><strong style="text-decoration: underline;font-size:11pt;font-style:normal">If this is the first time</strong> you've used our downloads, you now can see a
skinny information bar at the top of the page.
Click it, and select "Install ActiveX Control" from the dropdown menu.
Then, click "Install" when you see the new dialog box appear.
This does not collect info about you or hurt your machine.
</p>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<script type="text/javascript">
//Create JavaScript object that will embed File Downloader to the page
var fd = new FileDownloaderWriter("FileDownloader", 172, 28);
//For ActiveX control full path to CAB file (including file name) should be specified
fd.activeXControlCodeBase = "aurigma/FileDownloader2.cab";
fd.activeXControlVersion = "2,0,16,0";
//Set the Download button text
fd.addParam("ButtonDownloadText", "Proceed With Download");
//Set the Download button background color
//fd.addParam("BackgroundColor", "#E0EBFF");
fd.addParam("BackgroundColor", "White");
//Set the Download button regular image
fd.addParam("ButtonDownloadImageFormat", "width=172;height=28;BackgroundColor=#17238C;" +
"urlNormal=App_Themes/Default/images/BtnProceedDownloadA.jpg;" +
"urlDisabled=App_Themes/Default/images/BtnProceedDownloadA.jpg");
//Set license key
fd.addParam("LicenseKey", "888822-12222-D8444-111122-55555");
//Set reconnect attampts count
fd.addParam("ReconnectAttemptsCount", "360");
//Set reconnect timeout value (30000 = 10 seconds)
fd.addParam("ReconnectTimeOut", "10000");
//Configure URL from which the file list will be downloaded
//Change this path if necessary
//fd.addParam("FileList", "aurigma/filelist.txt");
//The following listener will perform some actions when the file list is about to be downloaded
fd.addEventListener("DownloadStep", "FileDownloader_DownloadStep");
//The following listener will perform some actions when download of a single file is finished
fd.addEventListener("DownloadItemComplete", "onDownloadItemComplete");
//The following listener will perform some actions when download process is complete
fd.addEventListener("DownloadComplete", "onDownloadComplete");
//The following listener will perform some actions when a general error is detected
//fd.addEventListener("Error", "onError");
//Add page load listener
//fd.fullPageLoadListenerName = "fullPageLoad";
//Set instructions property
fd.instructionsEnabled = false;
//Tell File Downloader writer object to generate all necessary HTML code to embed File Downloader into the page
fd.writeHtml();
</script>
<asp:ImageButton ID="BtnReturnHome" runat="server" AlternateText="Return to Home Page"
ImageUrl="~/App_Themes/Default/images/BtnReturnHomeS.jpg">
</asp:ImageButton>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2" style="text-align:left;font-family:Arial;font-weight:normal;font-style:italic;color:#17238C">
<p style="font-size:10pt"><strong style="text-decoration: underline;font-size:11pt;font-style:normal">Why do I need this?</strong> <strong>
This tiny control-program is only installed ONCE on a given machine,
and is there to assist with all future downloads.
It allows you to download a batch of several files at once, save
them wherever you wish, AND keeps track of the download progress. If your internet connection glitches, the
download will *automatically restart* (after a couple of minutes)
from where it left off, once the internet connection is restored, presuming that your computer remains powered on.
This is a very important feature, since these are BIG files that may take
several hours to download if you have a relatively slow internet connection.</strong>
</p>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="instructionsRight" style="float:right;width:49.5%">
<table cellspacing="0" width="100%" class="borderTable0" style="height:430px;">
<tr>
<td align="center">
<br style="height:20px" />
<h4 style="color:#17238C">Additional Info</h4>
</td>
</tr>
<tr valign="top">
<td align="center">
<table border="0" cellpadding="1" cellspacing="0"
style="border-collapse: collapse;">
<tr>
<td>
<table border="0" cellpadding="0">
<tr>
<td colspan="2" style="text-align:left;font-family:Arial;font-weight:normal;font-style:normal;color:#17238C">
<p style="font-size:9pt"><strong style="text-decoration: underline;font-size:11pt;font-style:normal">Worst-case scenario</strong>: <strong>
If the transfer fails because your computer shut down from a power-outage, there may be a temporary file left on your
machine - but the next time you start the download, it automatically cleans up what was left from the aborted transfer.
If you tend to get hit by electric power outages more often than normal, we recommend that you purchase a battery-backup UPS
(Uninterruptible Power Supply) that has at least 1500VA capacity so that the computer AND your modem AND router can remain
powered-up for several hours when the power goes out. Start the download before going to bed, and TURN OFF the monitor
during that process, so that the UPS would not have to feed it if a power outage hits.</strong>
</p>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2" style="text-align:left;font-family:Arial;font-weight:normal;font-style:normal;color:#17238C">
<p style="font-size:9pt"><strong style="text-decoration: underline;font-size:11pt;font-style:normal">Gotta-shut-down scenario</strong>: <strong>
If you are in the midst of a long download session, but for some reason you must interrupt it and turn off your computer
a while, then if you want to resume the download from where you left off, be sure to HIBERNATE your machine rather than
doing a simple shutdown. You can set this up from Control Panel > Power Options > Hibernate Tab. There will be a button
on your keyboard somewhere that activates hibernation (sometimes called "sleep"). It takes a complete "RAM snapshot" of
what is going on, so that the next time you start the computer, it resumes exactly where it left off (it may take a few
minutes after restart for the download to auto-resume).</strong>
</p>
</td>
</tr>
<tr>
<td colspan="2" style="height:24px">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>

Removing the pageload function worked for me. The script on my working page reads:
<script type="text/javascript" language="javascript">
$(document).ready(function() {
setEqualHeight($(".instructionsParent > div"));
});
function setEqualHeight(columns) {
console.log("here")
var tallestColumn = 0;
columns.each(function() {
currentHeight = $(this).height();
if(currentHeight > tallestColumn) {
tallestColumn = currentHeight;
}
});
columns.height(tallestColumn);
}
</script>

Try removing the pageLoad() function (I don't think you were calling it).
See :
http://paulisageek.com/tmp/jquery/equal_height.html