How should I retrieve the uploaded file details from uploadify after the completion of the upload process.
I want to do a process in the uploaded file.
But when I use the uploadify it simply uploads the file to a location through the uploadify.php which I customized.
I want this uploadify process to redirect to a page after completed with the details of the file such as filename and the targeted location where I will proceed with my second operation on the file uploaded
Updates
This is what my code as of now
<style type="text/css">
body {
font: 0.8em/1.6em Arial, Helvetica, sans-serif;
}
fieldset {
width: 500px;
}
#sample {
display:table;
}
#sampleFile {
float: left;
display:table-cell;
margin-right: 15px;
}
#download {
margin-top: 15px;
display: table;
}
.dlImage {
display: table-cell;
float: left;
margin-right: 10px;
}
.dlText {
float: left;
display: table-cell;
}
.fileDetails {
color: red;
}
.releaseDate{
margin-top: -3px;
color: gray;
}
</style>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Uploadify scriptData Sample</title>
<link rel="stylesheet" href="uploadify/uploadify.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#fileUpload").fileUpload({
'uploader': 'uploadify/uploader.swf',
'cancelImg': 'uploadify/cancel.png',
'script': 'uploadify/upload.php',
'folder': 'files',
'multi': false,
'displayData': 'speed',
'onComplete' : function(event, queueID, fileObj, reponse, data) {
location.href="complete.php";
}
});
});
</script>
</head>
<body>
<div id="sample">
<div id="sampleFile">
<fieldset style="border: 1px solid #CDCDCD; padding: 8px; padding-bottom:0px; margin: 8px 0">
<legend><strong>Sélectionner l'image à imprimer :</strong></legend>
<div id="fileUpload">You have a problem with your javascript</div>
Start Upload <p></p>
</fieldset>
</div>
</body>
</html>
on the second page I do want to echo the file name that is uploaded
I have there in the second page complete.php
<?php
print_r($_FILES);
echo $_FILES['type'];
echo $_FILES['tmp_name'];
echo $_FILES['name'];
echo $_FILES['size'];
?>
Do you know that you can get the filename, filpath inside the onComplete event like this:-
onComplete: function(event, queueID, fileObj, reponse, data)
{
alert fileObj.name; //The name of the uploaded file
alert fileObj.filePath; //The path on the server to the uploaded file
location.href= "complete.php?filename="+fileObj.name+"&filepath="+fileObj.filePath; //Here you can do a javascript redirect
}
Check the documentation for further details http://www.uploadify.com/documentation/events/oncomplete-2/
Are you looking for those values? If not let me know
Updates
As per your question updates, you have 2 options.
Either to do the "some process" after the file upload in the uploadify.php. You can see the file uploadify.php which comes with the uploadify plugin. There you have the $_FILES['Filedata'] array containing all the file info. You may do the post processing here itself (by calling a function better instead of writing lots of code in uploadify's core code)
in uploadify.php
$_FILES['Filedata']['name'] //file name
Or like I said, get the file name and path inside the onComplete event. Then pass these params like this :-
location.href= "complete.php?filename="+fileObj.name+"&filepath="+fileObj.filePath;
I think this is better. You may send an ajax request instead to do the entire process (file upload + your "some process") without loading the page again.
Write a $.post() request inside the onComplete event with those parameters and post to "complete.php"
Getting parameters inside onComplete which are not available by default
You have to use the response parameter available inside onComplete
I worked on uploadify version 2.1.0 so my solution will work for sure on that version.
If you want only one parameter, you can echo that at the end of uploadify.php
I did the following thing:-
In my uploadify.php changed (this was in the original uploadify.php):-
move_uploaded_file($tempFile,$targetFile);
echo "1";
to this:-
move_uploaded_file($tempFile,$targetFile);
echo $tempFile;
and then inside the onComplete event did an explode -
var tmpName = reponse;
If however, you want to get more than one parameter inside onComplete, this is a trick I can give (this is not a good approach, but I was not able to return multiple params by any other way - I tried returning json array etc.):-
move_uploaded_file($tempFile,$targetFile);
echo $param1.'%%__%%'.$param2;
and then inside the onComplete event did an explode -
var paramsArray = explode('%%__%%',reponse);
param1 = paramsArray[0];
param2 = paramsArray[1];
you can get all the details of the uploaded file by echoing below line;
print_r($_FIELS);
OR you can echo all the fields of uploded files.
echo $_FIELS['type'];
echo $_FIELS['tmp_name'];
echo $_FIELS['name'];
echo $_FIELS['size'];
i m right if i understood you what you want to saying. but please do comment if you searching for anything else.
Thanks.
Related
I have a QR code scanner that already works using Instascan and Vue.js libraries. Now what I want to do is to automatically post the scanned content to a php file and redirect to that php file after scanning, but I can't seem to pass the value. Here is my HTML code:
<div class="form-group" id="app">
<label v-for="scan in scans" class="disptext" style="font-size: 30px; top: 73%; left: 45%;">Welcome, </label>
<input v-for="scan in scans" :key="scan.date" :title="scan.content" class="form-control" id="qr_user" name="qr_user" placeholder="Scan User QR Code" :value="scan.content" style="width: auto; font-size: 30px; left: 37%; text-align: center; position: absolute; top: 80%; border: 0; background: transparent;">
<input type="hidden" name="qr" id="qr" :key="scan.date" />
</div>
I tried posting it through my js file like this:
mounted: function () {
var self = this;
self.scanner = new Instascan.Scanner({ video: document.getElementById('preview'), scanPeriod: 5 });
self.scanner.addListener('scan', function (content, image) {
self.scans.unshift({ date: +(Date.now()), content: content });
$.post("scanquery.php", {qr: content});
window.location.assign("scanquery.php");
});
But php executes first so "qr" is always undefined. How can I do this?
Edit
Here is the php code, I just posted it by calling the "qr":
$user = $_POST['qr'];
if(!empty($user)){
echo $user;
}
You can defer execution of window.location.assign() until after the post completes by using a callback in $.post:
$.post("scanquery.php", {qr: content}, () => {
window.location.assign("scanquery.php");
});
I think you have a mismatch in your payload types. $.post is formatting your object as JSON, and $_POST is not made available for JSON posts.
This source (https://davidwalsh.name/php-json) notes how to process incoming data as JSON:
# Get JSON as a string
$json_str = file_get_contents('php://input');
# Get as an object
$json_obj = json_decode($json_str);
Someone more of an expert on PHP can correct me on this part.
I'm trying to make a progress bar which works with $.ajax(jquery) and php for a file uploader but I dont know how to assemble it. I know there is a progress bar working with jQuery UI; how ever, it just change while receiving a value. And that's the point. How can I get a dinamic value for the byte uploded?
By the way, this is my code:
fx_file.js
/*This function gets Data from the form and send it to server*/
function fiEnviarDatos2(){
$("form#data").click(function(){
/*Some DOM'S animations*/
});
$("form#data").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: "PHP/Core/Archivos/upload.php",
type: 'POST',
data: formData,
async: false,
success: function (data) {
/*After actions**/
},
progress:function(data){
alert(data);
},
cache: false,
contentType: false,
processData: false
});
return false;
});`
upload.php
<?php include ("Class_upload.php");
/*Variables*/
$i=0;
$archivos=0;
/*Contains numbers of file sent*/
$archivos=((count($_FILES,1)-6)/5);
/*Contains the user's session name*/
session_start();
$sUsuario=$_SESSION['usuario'];
/*Use the information of each file to create a new class Upload*/
for($i=0;$i<$archivos;$i++){
/*FileSize*/
$tamaArchivo = $_FILES['formUploader']['size'][$i];
/*Filename*/
$nombArchivo = strtolower($_FILES['formUploader']['name'][$i]);
/*Filetemp*/
$tmpArchivo = $_FILES['formUploader']['tmp_name'][$i];
/*It creates class Upload*/
$archivo_subir=new Upload($nombArchivo,$tamaArchivo,$tmpArchivo,$sUsuario);
/*It validates each file and returns a status*/
$estatus=$archivo_subir->enviarData();
/*Returns if file's been uploaded or not*/
$resultFile=$archivo_subir->resultFile($estatus);
echo "<br>";
if($estatus>0){
echo "<div class='resultDeny'>".$resultFile."</div>";
}else{
if($resultFile=="ServerError"){
echo "<div class='resultServer'>".$resultFile."</div>";
}else{
echo "<div class='resultSuccess'>".$resultFile."</div>";
}
}
}
I hope I can found some help from you, guys. I know you all are expert. I'm new working with jquery and php; however , i've seen "their power together" and i want to learn more about them.
Thanks for all.
PDT: Sorry for my english, it's not my mother language. JQ &PHP will be.
Check this page out:
http://www.johnboy.com/php-upload-progress-bar/
http://www.johnboy.com/php-upload-progress-bar/upload_frame.phps
basically
function(data) //return information back from jQuery's get request
{
$('#progress_container').fadeIn(100); //fade in progress bar
$('#progress_bar').width(data +"%"); //set width of progress bar based on the $status value (set at the top of this page)
$('#progress_completed').html(parseInt(data) +"%"); //display the % completed within the progress bar
}
)},500);
after investigating almost all day , I achieved what I wanted.
I found this plugin called JQUERY Form Plugin.
[http://malsup.com/jquery/form/][1]
Maybe some of you have used it. It has almost all the necessary options to built a progressbar and to introduce code before and after submitting the form.
So, check it out. Maybe someone finds it useful
Btw , this is how my code looks like now
accountUser.html
<html>
//...
...//
<style>
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; margin-top:-200px }
.bar { background-image:url(Imagenes/index/pbar-ani.gif); width:0%; height:20px; border- radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
<script language="javascript" src="Scripts/jquery_min_1.8.js"></script>
<script language="javascript" src="Scripts/fx_file.js"></script>
<script language="javascript" src="Scripts/jquery.form.js"></script>
//...
..//
<form action="#" method="post" enctype="multipart/form-data" id="formu">
<input name="formUploader[]" type="file" multiple id="archivo"/>
<input class="button" type="submit" alt="Upload" value="Subir" id="btn_cargar"/>
</form>
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
//...
..//
</html>
fx_file.js
$(document).ready(function() {
// prepare Options Object
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
var options = {
url: "upload.php",
type: 'POST',
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
$(bar).animate({width:percentVal});
percent.html(percentVal);
},
success: function(data){
//After actions
}
};
// bind 'formu' and provide a simple callback function
$('#formu').ajaxForm(options);
});
upload.php
<?php include ("Class_upload.php");
/*Variables*/
$i=0;
$archivos=0;
/*Contains numbers of file sent*/
$archivos=((count($_FILES,1)-6)/5);
/*Contains the user's session name*/
session_start();
$sUsuario=$_SESSION['usuario'];
/*Use the information of each file to create a new class Upload*/
for($i=0;$i<$archivos;$i++){
/*FileSize*/
$tamaArchivo = $_FILES['formUploader']['size'][$i];
/*Filename*/
$nombArchivo = strtolower($_FILES['formUploader']['name'][$i]);
/*Filetemp*/
$tmpArchivo = $_FILES['formUploader']['tmp_name'][$i];
/*It creates class Upload*/
$archivo_subir=new Upload($nombArchivo,$tamaArchivo,$tmpArchivo,$sUsuario);
/*It validates each file and returns a status*/
$estatus=$archivo_subir->enviarData();
/*Returns if file's been uploaded or not*/
$resultFile=$archivo_subir->resultFile($estatus);
echo "<br>";
if($estatus>0){
echo "<div class='resultDeny'>".$resultFile."</div>";
}else{
if($resultFile=="ServerError"){
echo "<div class='resultServer'>".$resultFile."</div>";
}else{
echo "<div class='resultSuccess'>".$resultFile."</div>";
}
}
}//End For
<?php>
I recently installed uploadifive on my site http://tradersprinting.com/contact/send-file-2/ , and am experiencing a 404 error every time that I attempt to upload a file.
The site is powered by the WordPress Content Management System, and the site is hosted on 1&1. The uploadify files are stored in the directory: "http://tradersprinting.com/wp-content/themes/traders/uploadify". The WordPress function "bloginfo('template_directory')" returns "http://tradersprinting.com/wp-content/themes/traders/". Everything is currently at "factory settings" without any adjustments, save the snippet of code I am attaching below:
Code on the Page http://tradersprinting.com/contact/send-file-2/
<?php
chmod("wp-content/themes/traders/uploads/",0777);
chmod("wp-content/themes/traders/uploadify/uploads/",0777);
?>
<script src="<?php bloginfo('template_directory'); ?>/uploadify/jquery.min.js" type="text/javascript">
</script>
<script src="<?php bloginfo('template_directory'); ?>/uploadify/jquery.uploadifive.min.js" type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/uploadify/uploadifive.css">
<style type="text/css">
body {
font: 13px Arial, Helvetica, Sans-serif;
}
.uploadifive-button {
float: left;
margin-right: 10px;
}
#queue {
border: 1px solid #E5E5E5;
height: 177px;
overflow: auto;
margin-bottom: 10px;
padding: 0 3px 3px;
width: 300px;
}
</style>
<form>
<div id="queue">
</div>
<input id="file_upload" name="file_upload" type="file" multiple="true">
<a style="position: relative; top: 8px;" href="javascript:$('#file_upload').uploadifive('upload')">Upload Files</a>
</form>
<script type="text/javascript">
<?php $timestamp = time();?>
$(function() {
$('#file_upload').uploadifive({
'auto' : false,
'checkScript' : 'check-exists.php',
'formData' : {
'timestamp' : '<?php echo $timestamp;?>',
'token' : '<?php echo md5('unique_salt' . $timestamp);?>'
},
'queueID' : 'queue',
'uploadScript' : 'uploadifive.php',
'onUploadComplete' : function(file, data) { console.log(data); }
});
});
</script>
My copy of uploadifive.php
<?php
/*
UploadiFive
Copyright (c) 2012 Reactive Apps, Ronnie Garcia
*/
// Set the uplaod directory
$uploadDir = '/uploads/';
// Set the allowed file extensions
$fileTypes = array('jpg', 'jpeg', 'gif', 'png'); // Allowed file extensions
$verifyToken = md5('unique_salt' . $_POST['timestamp']);
if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
$tempFile = $_FILES['Filedata']['tmp_name'];
// Commenting out this line as a potential bugfix for 404 error
//$uploadDir = $_SERVER['DOCUMENT_ROOT'] . $uploadDir;
$uploadDir = "/wp-content/themes/traders/uploadify/uploads";
$targetFile = $uploadDir . $_FILES['Filedata']['name'];
// Validate the filetype
$fileParts = pathinfo($_FILES['Filedata']['name']);
if (in_array(strtolower($fileParts['extension']), $fileTypes)) {
// Save the file
move_uploaded_file($tempFile, $targetFile);
echo 1;
} else {
// The file type wasn't allowed
echo 'Invalid file type.';
}
}
?>
I have created an "uploads" directory in every branch of the directory tree starting from the root, and including one at every step of the way down to the sample uploadify directory, but none of them receive files.
I love the program, and I think the designer has done a stellar job, but I would really like for the product to work, especially after investing! Please help!
Uploadify uses a Flash SWF based uploader. In many cases Apache web server's mod_security module prevents data uploaded by any SWF. So I'd say check server's mod_security log (not Apache error log) if it is blocking your script.
I have been developing an upload site for a couple of months now, and the most requested feature on the site has been for a Multiple File Uploader, personally, I am more than happy to bring this feature in however I am looking for already-available scripts that will allow me to do this, as I have no idea how to code a purely php/html upload tool.
I came across SWFUpload, this seems like a decent script however I wanted to see if it could do the following:
-> Allow me to select what file extensions are allowed to be upload.
-> Allow me to set the maximum amount of files being uploaded.
-> Allow me to perform MySQL Queries post upload, as we log all uploads and assign them to accounts
I will need a lot of flexibility in such script, and SWFUpload does not seem to offer such flexibility to change the script into something I want, so I am asking if it would simply be easier to convert what currently is a single file uploader to a multi-file uploader.
Thank you for your time,
Jake
If you are happy to make somethnig for modern browsers only you can simply make your form look like:
<input name="files[]" type="file" multiple="multiple" />
And your browser will automatically do the rest for the front end.
If you already can upload files it wont take many changes to upload multiple files, just do what your doing now but in a loop. print_r($_FILES) will show you the structure.
If you want a fancy front end I recommend Uploadify, it works really well with jQuery.
I've used Maian Uploader before and it is extremely flexible. You can specify which file types to allow people to upload, a file size limit, select multiple files to upload, etc. Here's the link to the page http://www.maianscriptworld.co.uk/free-php-scripts/maian-uploader/free-file-upload-system/index.html.
The design is anything but pretty but you can customize it to your liking. You may want to check out the demo first http://www.maianscriptworld.com/demos/uploader/. You just login and go to the upload section on the left to check it out.
This script offers all what you need !
http://valums.com/ajax-upload/
You need to include these 4 files along with a folder named as "uploads" in which the images uploaded will be stored.
multiupload.php
<html>
<head>
<title>Upload Multiple Images Using jquery and PHP</title>
<!-------Including jQuery from Google ------>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
<!------- Including CSS File ------>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div id="maindiv">
<div id="formdiv">
<h2>Multiple Image Upload Form</h2>
<form enctype="multipart/form-data" action="upload.php" method="post">
First Field is Compulsory. Only JPEG,PNG,JPG Type Image Uploaded. Image Size Should Be Less Than 100KB.
<div id="filediv"><input name="file[]" type="file" id="file"/></div>
<input type="button" id="add_more" class="upload" value="Add More Files"/>
<input type="submit" value="Upload File" name="submit" id="upload" class="upload"/>
</form>
<!------- Including PHP Script here ------>
<?php include "connect.php"; ?>
<?php include "upload.php"; ?>
</div>
</div>
</body>
</html>
upload.php
<?php include "connect.php"; ?>
<?php
if (isset($_POST['submit'])) {
$j = 0; // Variable for indexing uploaded image.
$target_path = "uploads/"; // Declaring Path for uploaded images.
for ($i = 0; $i < count($_FILES['file']['name']); $i++) {
// Loop to get individual element from the array
$validextensions = array("jpeg", "jpg", "png","pdf","gif","doc","docx","txt","bmp"); // Extensions which are allowed.
$ext = explode('.', basename($_FILES['file']['name'][$i])); // Explode file name from dot(.)
$file_extension = end($ext); // Store extensions in the variable.
//$target_path = $target_path . md5(md5(uniqid())) . "." . $ext[count($ext) - 1]; // Set the target path with a new name of image.
$j = $j + 1; // Increment the number of uploaded images according to the files in array.
if (($_FILES["file"]["size"][$i] < 20000000) // Approx. 100kb files can be uploaded.
&& in_array($file_extension, $validextensions)) {
if (move_uploaded_file($_FILES['file']['tmp_name'][$i], "uploads/".$_FILES['file']['name'][$i])) {
//if (move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) { <!----For file uploading with actual name->
// If file moved to uploads folder.
echo $imagename=basename($_FILES['file']['name'][$i]);
echo $imagetmp="uploads/" . $imagename;
//Insert the image name and image content in image_table
$insert_image="INSERT INTO `image_table`(`image_name`, `image_content`) VALUES('$imagetmp','$imagename')";
mysql_query($insert_image);
echo $j. ').<span id="noerror">Image uploaded successfully!.</span><br/><br/>';
} else { // If File Was Not Moved.
echo "not inserted in db";
echo $j. ').<span id="error">please try again!.</span><br/><br/>';
}
} else { // If File Size And File Type Was Incorrect.
echo $j. ').<span id="error">***Invalid file Size or Type***</span><br/><br/>';
}
}
}
?>
script.js
var abc = 0; // Declaring and defining global increment variable.
$(document).ready(function() {
// To add new input file field dynamically, on click of "Add More Files" button below function will be executed.
$('#add_more').click(function() {
$(this).before($("<div/>", {
id: 'filediv'
}).fadeIn('slow').append($("<input/>", {
name: 'file[]',
type: 'file',
id: 'file'
}), $("<br/><br/>")));
});
// Following function will executes on change event of file input to select different file.
$('body').on('change', '#file', function() {
if (this.files && this.files[0]) {
abc += 1; // Incrementing global variable by 1.
var z = abc - 1;
var x = $(this).parent().find('#previewimg' + z).remove();
$(this).before("<div id='abcd" + abc + "' class='abcd'><img id='previewimg" + abc + "' src=''/></div>");
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
$(this).hide();
$("#abcd" + abc).append($("<img/>", {
id: 'img',
src: 'x.jpg',
alt: 'delete'
}).click(function() {
$(this).parent().parent().remove();
}));
}
});
// To Preview Image
function imageIsLoaded(e) {
$('#previewimg' + abc).attr('src', e.target.result);
};
$('#upload').click(function(e) {
var name = $(":file").val();
if (!name) {
alert("First Image Must Be Selected");
e.preventDefault();
}
});
});
style.css
#import "http://fonts.googleapis.com/css?family=Droid+Sans";
form{
background-color:#fff
}
#maindiv{
width:960px;
margin:10px auto;
padding:10px;
font-family:'Droid Sans',sans-serif
}
#formdiv{
width:500px;
float:left;
text-align:center
}
form{
padding:40px 20px;
box-shadow:0 0 10px;
border-radius:2px
}
h2{
margin-left:30px
}
.upload{
background-color:red;
border:1px solid red;
color:#fff;
border-radius:5px;
padding:10px;
text-shadow:1px 1px 0 green;
box-shadow:2px 2px 15px rgba(0,0,0,.75)
}
.upload:hover{
cursor:pointer;
background:#c20b0b;
border:1px solid #c20b0b;
box-shadow:0 0 5px rgba(0,0,0,.75)
}
#file{
color:green;
padding:5px;
border:1px dashed #123456;
background-color:#f9ffe5
}
#upload{
margin-left:45px
}
#noerror{
color:green;
text-align:left
}
#error{
color:red;
text-align:left
}
#img{
width:17px;
border:none;
height:17px;
margin-left:-20px;
margin-bottom:91px
}
.abcd{
text-align:center
}
.abcd img{
height:100px;
width:100px;
padding:5px;
border:1px solid #e8debd
}
b{
color:red
}
By using this code, you can upload multiple images and that images will be stored in the database too.For that purpose you need to create one table in database in which there are three fields id,image_name and image_content.
can someone tell me how to create a nice small tooltip like ajax pop-up ?
the situation is like this,
I am pulling the $row->title from the db, and then I presented it as a link like this
<?php foreach($task->result() as $row): ?>
<tr>
<td><a href=#><?php echo $row->title; ?></a></td>
</tr>
<?php endforeach; ?>
when a random user clicks that link, I want it to produce a small pop-up or tooltip like stuff that contains the title's description $row->description , and when user moves mouse from it,it closes. i know its possible, but i just don't know how to do it.
You need jQuery. Add stylesheet into <head></head> and javascript to any place in your page.
Sample style:
<style type="text/css">
.description {
visible: hidden;
position: absolute;
left: 0px;
top: 0px;
/* View */
font-family: Arial,Tahoma,Verdana;
font-size: 8pt;
color: #bbb;
background-color: #444;
padding: 5px 7px;
border: 1px solid #222;
}
</style>
Javascript:
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Add listener to links
$(".some_class").click(function(e) {
var description = $('<div class="description">'+ $(this).attr("description") +'</div>');
$(this).append(description);
description.css("left", e.pageX-4);
description.css("top", e.pageY-4);
description.animate({ opacity: 'toggle' }, 400, 'linear');
// Remove description, if user moved the mouse cursor out description
description.mouseout(function() {
$(this).remove();
});
return false;
});
});
</script>
Change your code:
<?php foreach($task->result() as $row): ?>
<tr>
<td><?php echo $row->title; ?></td>
</tr>
<?php endforeach; ?>
But the better way is to check out some good jQuery plugin..
Check out this jQuery plugin: http://www.w3avenue.com/2010/01/11/coda-bubble-jquery-plugin/
something like the following?
AJAX to get the description and when you're received the response create the description 'box'
var tipel = document.createElement('div');
tipel.innerHTML = descr;`
add it to the page
var bodyel = document.getElementsByTagName('body').item(0);
bodyel.appendChild(tipel);`
and position it like:
tipel.style.position = "absolute";
tipel.style.top = newfntogetabsolutecoord_top(document.getElementById("mytitleelement"));
tipel.style.left = newfntogetabsolutecoord_left(document.getElementById("mytitleelement"));`
getting absolute coords of an element can be tricky, look for a fn online.
for closing the tip, a suggestion would be placing tipel just under the mouse pointer (you already know it's over the link "mytitleelement", just shift the tip a little in the lines above), and then add an onmouseout event function to tipel that:
tipel.style.display = "none"; //hides or
tipel.parentNode.removeChild(tipel); //removes it from the page
(you might get away with using this instead of tipel in those 2 lines)