views:

928

answers:

3

Hello,

I was wondering how I can slideToggle a table row from my script.

I have a php file that is included in an html page inside a div called 'output-listings'.

PHP FILE:

<?php

function outputListingsTable() { $mysql = new mysqli('localhost', 'root', 'root', 'ajax_demo') or die('you\'re dead'); $result = $mysql->query("SELECT * FROM explore") or die($mysql->error);

if($result) 
{
 echo "<div class=\"main-info\"> \n";
  echo "<table class=\"listings\"> \n";
   echo "<tbody> \n";

    while($row = $result->fetch_object()) 
    {
     $id = $row->id;
     $siteName = $row->site_name;
     $siteDescription = $row->site_description;
     $siteURL = $row->site_url;
     $sitePrice = $row->site_price;


     echo " <tr id=\"more-info-" .$id. "\" class=\"mi-" .$id. "\"> \n";
       echo " <td> \n";
       echo "  <div id=\"more-" .$id. "\" class=\"more-information\"></div> \n";
       echo " </td> \n";
     echo " </tr> \n";

     echo " <tr id=\"main-info-" .$id. "\"> \n";
     echo "   <td>" . $siteName . "</td> \n";
     echo "  <td>" . $siteURL . "</td> \n";
     echo "  <td><a id=\"link-" . $id . "\" class=\"more-info-link\" href=\"#\">More info</a></td> \n"; 
     echo " </tr> \n";
    }
 echo "</tbody> \n";
echo "</table> \n";

echo " \n";

}

}

?>

As you can see the script above creates dynamic id's and classes which confuses me on how to select them with Jquery.

Here is the jquery that I have so far, but does not work sadly.

$(function() {

$("a.more-info-link").click(function() {

$("#more-info-" + this.id).load("getinfo.php").slideToggle("slow");

return false;

});

});

Any help would be great. Thank you.

A: 
$("a.more-info-link").click(function() {
    var id = $(this).attr("id").substring(4); // This extract the id from the link's id field
    $(#more-info-" + id).load("getinfo.php", function() {
        $(this).slideToggle("slow");
    }); // I suppose you want to toggle after the content was loaded? or you can keep your statement
});

See if it works?

xandy
this doesn't seem to work, apparently there is an illegal character after loading the getinfo.php? where the function begins.
Maybe can you post your "generated" html instead of the PHP page here. So that we can target more on the html and js themselves.
xandy
A: 

Instead of targeting the row, nest the content in a div inside the row and apply the animation to the div.

<html>
    <head>
        <title>SandBox</title>       
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <div id="divMoreInfo">
                        some text or whatever goes here.
                    </div>
                </td>
            </tr>
            <tr id="main-info-">
                <td>
                    <a id="link" href="#">More info</a>
                </td>
            </tr>
        </table>
    </body>
</html> 
<script src="js/jquery.js" type="text/jscript" ></script>
<script type="text/javascript">
    $("#link").click(function() {
        $("#divMoreInfo").slideToggle(200);
    });
</script>
x13
A: 

here is the page source:

html

div id="output-listings"

div class="main-info"

table class="listings"

tbody

tr id="more-info-1" class="mi-1"

td

div id="more-1" class="more-information"/div

/td

/tr

tr id="main-info-1"

tdLeftlane News/td

tdwww.leftlanenews.com//td

tda id="link-1" class="more-info-link" href="#"More info/a/td

/tr

tr id="more-info-2" class="mi-2"

td

div id="more-2" class="more-information"/div

/td

/tr

tr id="main-info-2"

tdMotor Authority/td

tdwww.motorauthority.com/ /td

tda id="link-2" class="more-info-link" href="#"More info/a/td

/tr

tr id="more-info-3" class="mi-3"

td

div id="more-3" class="more-information"/div

/td

/tr

tr id="main-info-3"

tdAutoblog/td

tdhttp://www.autoblog.com//td

tda id="link-3" class="more-info-link" href="#"More info/a/td

/tr

/tbody

/table

/div

/div!--end output-listings--

/html