Call a php page inside a div with AJAX and jQuery (there is loops too)

Question

There is some questions like this, but the problem is: why this doesn't work?

Well, I have a div and a php loop to get values from mysql and put it into a table. And each row of this table, I need a button that open more details about itself. Like, it is a users list and I need to open a second php page inside that div with more information about that person. So I put a AJAX script with jQuery inside the loop :D

And, as always, sorry for bad english u.u

Well... this is my main code:

<div id="equipecontent" class="card-content" style="padding:10px;">
    <p class="center-align grey-text text-darken-1""><b>Código Sênior: <? echo $_SESSION['cod_revenda']-100000; ?></b></p>
    <table class="striped centered highlight">
        <thead>
            <tr>
                <th data-field="id">Name</th>
                <th data-field="tel">Phone</th>
                <th data-field="email">E-mail</th>
                <th data-field="ven">Moth sell</th>
                <th data-field="ir"></th>
            </tr>
        </thead>

        <tbody>

            <?
                $sql = "select cli_nom, cli_cod, cli_log, cli_fon1, cli_ven_cod, cli_ven_mes";
                $sql .= " from clientes where cli_tip_cod = 2 and cli_ven_cod = ".$_SESSION['cod_revenda']."-100000";
                $query = mysql_query($sql) or die($sql ."<p>". mysql_error());
                $i=0;
                while ($r = mysql_fetch_array($query)) {
                    extract($r,EXTR_PREFIX_ALL,"c");
                ?>
                <tr>
                    <td><? echo $c_cli_nom; ?></td>
                    <td><? echo $c_cli_fon1; ?></td>
                    <td><? echo $c_cli_log; ?></td>
                    <td>R$<? echo $c_cli_ven_mes; ?></td>
                    <td><a href="" onclick="id<? echo $c_cli_cod; ?>();"><i class="fa fa-user-plus fa-lg"></i></a></td>
                    <script>
                    function id<? echo $c_cli_cod; ?>(){
                        var id = <? echo $c_cli_cod; ?>;
                        $('#equipecontent').html('Downloading...'); // Show "Downloading..."
                        // Do an ajax request
                        $.ajax({
                            url: "equipece.php?id="+id
                            }).done(function(data) { // data what is sent back by the php page
                            $('#equipecontent').html(data); // display data
                        });
                    }
                    </script>
                </tr>
                <? $i++;} if($i==0){ ?>
                <tr>
                    <td colspan="2"></td>
                    <td><h4 class="grey-text text-darken-1">Nothing here =(</h4></td>
                    <td colspan="1"></td>
                </tr>
            <? } ?>
        </tbody>
    </table>
</div>

And this is my second target page (equipece.php) content:

<?
    include_once "comum.php"; // Things that previous page already had, but without this, doesn't work.
    dbAbreConexao(); // Opening connection with database
    ini_set('default_charset','UTF-8');
    mysql_set_charset('utf8'); 

    if(isset($_GET["id"])) {
        $id = $_GET["id"];
        } else {
        $id = 0;
    }

    $sql = "select cli_nom, cli_cod, cli_log, cli_fon1, cli_ven_cod, cli_ven_mes";
    $sql .= " from clientes where cli_tip_cod = 2 and cli_ven_cod = $id";
    $query = mysql_query($sql) or die($sql ."<p>". mysql_error());
    $i=0;
    while ($r = mysql_fetch_array($query)) {
    extract($r,EXTR_PREFIX_ALL,"c");}
?>

<? echo $c_cli_nom; ?>

Well, when I lick the button, a lot of things happens, actually... Sometimes something loads and the first bage returns; other times the entire page turns to white and stuck... Well, I think that my code is a mess.

Help D=

Ps.: I think this information is useless, but I'm using Materializecss framework.

Please [stop using `mysql_*` functions](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php). [These extensions](http://php.net/manual/en/migration70.removed-exts-sapis.php) have been removed in PHP 7. Learn about [prepared](http://en.wikipedia.org/wiki/Prepared_statement) statements for [PDO](http://php.net/manual/en/pdo.prepared-statements.php) and [MySQLi](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php) and consider using PDO, [it's really pretty easy](http://jayblanchard.net/demystifying_php_pdo.html). — Jay Blanchard, Dec 02 '15 at 17:26
ALso there is absolutely no need to use `extract()`, instead use `$r['cli_nom']` — RiggsFolly, Dec 02 '15 at 17:26
Many, Riggs. Actually, I'm a front end developer, and that code was wrote by my partner. And thank you, Jay, I will stop use `mysql_*` and start to use `PDO`. — Igor, Dec 02 '15 at 17:50

score 1 · Accepted Answer · answered Dec 02 '15 at 17:29

1

You can make this a lot simpler by using one function to handle every onClick() event. Maybe start here:

<a href="#" data-id="<?php echo $c_cli_cod; ?>" class="click-me">
    <i class="fa fa-user-plus fa-lg"></i>
</a>

Then OUTSIDE of your loop, put one function like so:

<script>

    $(function(){

        $('.click-me').click(function(e){

            e.preventDefault();
            var id = $(this).data('id');

            $('#equipecontent').html('Downloading...');

            $.ajax({
                url: 'equipece.php?id='+id,
                type: 'GET',
                error: function(){
                    // always good to have an error handler with AJAX
                },
                success: function(data){
                    $('#equipecontent').html(data);
                }
            });

        });

    });

</script>

answered Dec 02 '15 at 17:29

Tony DeStefano

819
6
11

Almost worked like a charm. Now, the page doesn't return anymore, but ` echo $c_cli_nom; ?>` in the target page doesn't show nothing =( – Igor Dec 02 '15 at 17:46
Is the element still inside your loop? Also, what version of PHP are you using. I changed your short tag to a – Tony DeStefano Dec 02 '15 at 17:53
Try echoing your sql statement in equippage.php to make sure it looks correct (and is receiving the $id value appropriately). – Tony DeStefano Dec 02 '15 at 17:56
My PHP version is 5.4.45. But short tags worked very well until now. And yes, my element is still inside my loop. Is that wrong? – Igor Dec 02 '15 at 17:56

RiggsFolly · Answer 2 · 2015-12-02T17:58:16.467

1

Your code will only actually return the last row from your result set as the extract ( major bad idea ) will overwrite the variables each time through the loop.

If you store your multiple results, assuming you are getting more than one result, or why would you have coded a while loop to process the retrieved rows.

So if you change your php to process all the results and save the data you require from each row into another data structure in this case a string, then you will return data from each or your result rows, rather than just the last row

<?php
    include_once "comum.php"; // Things that previous page already had, but without this, doesn't work.
    dbAbreConexao(); // Opening connection with database
    ini_set('default_charset','UTF-8');
    mysql_set_charset('utf8'); 

    if(isset($_POST["id"])) {
        $id = $_POST["id"];
    } else {
        $id = 0;
    }

    $sql = "SELECT cli_nom, cli_cod, cli_log, cli_fon1, 
                   cli_ven_cod, cli_ven_mes
            FROM clientes 
            WHERE cli_tip_cod = 2 
              AND cli_ven_cod = $id";

    $query = mysql_query($sql) or die($sql ."<p>". mysql_error());

    $result = '';
    while ($r = mysql_fetch_array($query)) {
        $result .= $r['cli_nom'] . ',';
    }
    rtrim($result, ',');  // remove trailing comma
    echo $result;
    exit;
?>

edited Dec 02 '15 at 17:58

answered Dec 02 '15 at 17:39

RiggsFolly

93,638
21
103
149

Tony DeStefano's solution works very well, but, like I said to him, ` echo $c_cli_nom; ?>` in the equipece.php page doesn't show nothing =( – Igor Dec 02 '15 at 17:47
Are you sure you have passed a `$_GET['id']` if not the code is setting `$id=0` and that probably does not exist in your database. You probebly ought to be setting an error status in that case and returning that error to the javascript – RiggsFolly Dec 02 '15 at 17:50
How can I figure out it? – Igor Dec 02 '15 at 17:57
See the loop processing that I changed, yours will only return one result, i.e. the data from that last row of your result set – RiggsFolly Dec 02 '15 at 17:59
Riggs, I changed `else { $id = 0}` to an existing value (like `else { $id = 676}`) and it is all the same, so I think that the problem is with my target page. – Igor Dec 02 '15 at 18:01
Have you used the javascript debugger to see whet is being returned to the page by the ajax call? – RiggsFolly Dec 02 '15 at 18:04

Call a php page inside a div with AJAX and jQuery (there is loops too)

2 Answers2