Jump to content

Show file info at mouseover with Ajax and PHP in JQuery

- - - - -

  • Please log in to reply
2 replies to this topic

#1
Sonic3R

Sonic3R

    Newbie

  • Members
  • Pip
  • 3 posts
Hi
I have a list of files made by my PHP code


    if ($handle = opendir($director))  

    {

        $path="images/files/nou/";

        if(Files::is_empty_dir($director))

            {

                echo "<p>There are no script available.</p>";

            }

        else

            {

       while (false !== ($file = readdir($handle)))

       {

             if ($file != "." && $file != "..")

                 {

            $size=Files::getSize($director."/".$file);

            $exts=Files::getExtension($file);

                    $filex = str_replace(".".$exts,"",$file);

                if(strlen($filex)>10)

                    {

                        $filex=substr($filex,0,6);

                    }

                    echo "<div class='file' title='".$file."'>".$filex."</div>";



There are functions defined in my own class "Files".
Good. I want that on mouseover to show file information with this code


    function getInfo($file)

            {

                $info="<div class='info_public'><table border=0 cellpadding=2><tr>";

                $info.="<td>File : </td><td>".$file."</td></tr>";

                $info.="<tr><td>Extension : </td><td>".Files::getExtension($file)."</td></tr>";

                $info.="<tr><td>Size : </td><td>".Files::getSize($file)."</td></tr>";

               

                return $info;

            }



I want to show info dynamically with JQuery. I wrote this

$(function() {

    $(".file").mouseover(function()

        {

            data=$(this).attr("title");

            alert(data);

        });

});


It alerts always first filename not what I mouseover. But if I quit to use mouseover JQuery function, the title appears correctly for each file in part. If I use mouseover function again, the selected value from title doesn't appear correctly, it shows first filename in alert no matter what file I crossed with mouse.

I called the alert function to see results before implementing $.ajax function to avoid bad responses.
What's the problem in my script ?

Thank you

#2
RhetoricalRuvim

RhetoricalRuvim

    JavaScript Programmer

  • Members
  • PipPipPipPipPipPipPipPip
  • 1,254 posts
  • Location:C:\Countries\US

Quote

    if ($handle = opendir($director))  

    {

        $path="images/files/nou/";

        if(Files::is_empty_dir($director))

            {

                echo "<p>There are no script available.</p>";

            }

        else

            {

       while (false !== ($file = readdir($handle)))

       {

             if ($file != "." && $file != "..")

                 {

            $size=Files::getSize($director."/".$file);

            $exts=Files::getExtension($file);

                    $filex = str_replace(".".$exts,"",$file);

                if(strlen($filex)>10)

                    {

                        $filex=substr($filex,0,6);

                    }

                    echo "<div class='file' title='".$file."'>".$filex."</div>";
I think you're missing a few "}"'s and a closedir() call.
And you can use 'while ($file= readdir($handle))' instead of 'while (false !== ...', because the loop will be executed while the code inside the parentheses evaluates to true (or similar).

Then there's this:
    function getInfo($file)

            {

                $info="<div class='info_public'><table border=0 cellpadding=2><tr>";

                $info.="<td>File : </td><td>".$file."</td></tr>";

                $info.="<tr><td>Extension : </td><td>".Files::getExtension($file)."</td></tr>";

                $info.="<tr><td>Size : </td><td>".Files::getSize($file)."</td></tr>";

               

                return $info;

            }
JavaScript variables are not supposed to be assigned like that. It's more like this:
function getInfo(file){ 

var info= "<div class='info_public'><table border=0 cellpadding=2><tr>"; 

info += "<td>File : </td><td>"+file+"</td></tr>"; 

[I]... and so on ...  [/I]

I don't know much about jQuery, though, so I can't really tell whether that's right or not. But you can, however, use the HTML onMouseOver attribute:
<div id="some_id" onMouseOver="getInfo('whatever_the_file_is');"> some_text </div> 

Or you can have a script write that stuff to the document:
<script type="text/javascript"> 

// The files array holds all the filenames. 

var files= ["file1", "file2", "file3"]; 

var i; 

// Then we iterate through the array, starting from 0 and ending at the length of the array, with 'i' being our index variable. 

for (i= 0; i < files.length; i++){ 

  // Write the DIV to the document. The ID should be some_id_{whatever the index is} and onMouseOver is getInfo({the filename at the index}); 

  document.write('<div id="some_id_' + i + '" onMouseOver="getInfo(\'' + files[i] + '\');"> some_text </div> '); 

} 


#3
Sonic3R

Sonic3R

    Newbie

  • Members
  • Pip
  • 3 posts

function getInfo($file)

            {

                $info="<div class='info_public'><table border=0 cellpadding=2><tr>";

                $info.="<td>File : </td><td>".$file."</td></tr>";

                $info.="<tr><td>Extension : </td><td>".Files::getExtension($file)."</td></tr>";

                $info.="<tr><td>Size : </td><td>".Files::getSize($file)."</td></tr>";

               

                return $info;

            }

is a PHP code no Javascript

I solved the problem with 'each' JQuery function.
Thank you anyway




1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users