jquery replacewith to get data with Ajax after click on a cell

StackOverflow https://stackoverflow.com/questions/22159854

  •  19-10-2022
  •  | 
  •  

Question

am working on a code which I want to use as follow: there is a html table A and the user can click on the first cell of a row. The click causes a replacewith-function with jquery. From the cell the user had clicked before he got the id or a keyword for the search in the mysql database. For example the user clicks on an ID which is 1. Then the function would start searching for an entry with the same id.

I have a code already, but think there must be a mistake. Anybody here who can help? By the way: if you don't really understand what I mean, don't hesitate to ask me.

<html>
<head>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>
$( "#mytable tr td:first-child" ).click(function() {
    $( "#yourtable" ).replaceWith( function showUser(str)
        {
            if (str=="")
                {
                    document.getElementById("txtHint").innerHTML="";
                    return;
                }
            if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }
            else
                {// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
            xmlhttp.onreadystatechange=function()
                {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                }
        }
    xmlhttp.open("GET","getuser.php?q="+str,true);
    xmlhttp.send();
}

</script>


</head>
<title></title>


<body>


<table border="1" rules="groups" id="mytable">
  <thead>
    <tr>
      <th>Assoziation 1</th>
      <th>Assoziation 2</th>
      <th>Assoziation 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td><i>betroffen:<br>4 Mio. Menschen</i></td>
      <td><i>betroffen:<br>2 Mio. Menschen</i></td>
      <td><i>betroffen:<br>1 Mio. Menschen</i></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlin</td>
      <td>Hamburg</td>
      <td>M&uuml;nchen</td>
    </tr><tr>
      <td>Milj&ouml;h</td>
      <td>Kiez</td>
      <td>Bierdampf</td>
    </tr><tr>
      <td>Buletten</td>
      <td>Frikadellen</td>
      <td>Fleischpflanzerl</td>
    </tr>
  </tbody>
</table>

<table border="1" rules="groups" id="yourtable">
  <thead>
    <tr>
      <th>Assoziation 1</th>
      <th>Assoziation 2</th>
      <th>Assoziation 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td><i>betroffen:<br>4 Mio. Menschen</i></td>
      <td><i>betroffen:<br>2 Mio. Menschen</i></td>
      <td><i>betroffen:<br>1 Mio. Menschen</i></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlin</td>
      <td>Hamburg</td>
      <td>M&uuml;nchen</td>
    </tr><tr>
      <td>Milj&ouml;h</td>
      <td>Kiez</td>
      <td>Bierdampf</td>
    </tr><tr>
      <td>Buletten</td>
      <td>Frikadellen</td>
      <td>Fleischpflanzerl</td>
    </tr>
  </tbody>
</table>


</body>
</html>

getuser.php

 <?php
$q = intval($_GET['q']);
//$q = 2;

$con = mysqli_connect('localhost','root','','boerse');
if (!$con)
  {
  die('Could not connect: ' . mysqli_error($con));
  }


$sql="SELECT * FROM orders WHERE share_id = '".$q."' GROUP BY time DESC LIMIT 1";

$result = mysqli_query($con,$sql);

echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";

while($row = mysqli_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['usr_id'] . "</td>";
  echo "<td>" . $row['share_id'] . "</td>";
  echo "<td>" . $row['amount'] . "</td>";
  echo "<td>" . $row['price'] . "</td>";
  echo "<td>" . $row['ordertype'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysqli_close($con);
?>

EDITED *UPDATED* Okay, I now changed some code lines. Generally I would say I get 'str'. But it doesn't work. I can see the table. But without the expected data output.

<html>
<head>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-latest.min.js"></script>



<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<?
$con = mysqli_connect('localhost','root','','boerse');
$sql="SELECT short, name FROM markets";
        $result = mysqli_query($con,$sql);

?>




    <div class="markets">

<?
echo "<table>
<thead border='0'>
<tr>
<th>Index</th>
<th>Name</th>
</tr>
</thead>
<tbody border='1'>";
while($row = mysqli_fetch_array($result))
  {
  echo "<tr>";
  echo "<td class='nr'>".$row['short']."</td>";
  echo "<td>" . $row['name'] . "</td>";
  echo "<td class='information'>Use</td>";
  echo "</tr>";
  }
echo "</tbody></table>";
?>
<div class="clicked_info" name="users" onchange="showUser(this.value)">Hello</div>  
    </div>
<br><br>

<div id="txtHint"><b>Info will be listed here.</b></div>


<script>

$(".information").click(function () {
  var str = $(this).closest("tr").find(".nr").text(); //thank you David
  $.get("getuser_exp.php", {q:str}, function(data){ 
        $("#txtHint").replaceWith(data);

    });

}); 



</script>

</body>
</html>

The getuser_exp.php is following:

 <?php
$q = intval($_GET['q']);
//$q = 'SP500';

$con = mysqli_connect('localhost','root','','boerse');
if (!$con)
  {
  die('Could not connect: ' . mysqli_error($con));
  }


$sql="SELECT * FROM markets WHERE short = '".$q."'";

$result = mysqli_query($con,$sql);

echo "<table border='1'>
<tr>
<th>id</th>
<th>name</th>
<th>short</th>
<th>category</th>
</tr>";

while($row = mysqli_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['id'] . "</td>";
  echo "<td>" . $row['name'] . "</td>";
  echo "<td>" . $row['short'] . "</td>";
  echo "<td>" . $row['category'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysqli_close($con);
?>

Problem must be in the script, but why? I displayed 'var str' in a div. It was the right result. I see that I have to learn much. I tried to find a good tutorial, but not what I am looking for to solve the problem.

Hope anyone can help.

Was it helpful?

Solution

Your code is very odd. I assume your problem is coming from your Javascript/jQuery.

Your code is not using a callback function that I can see, so I would change your code to update after the XMLHTTPRequest is finished:

$( "#mytable tr td:first-child" ).click(function() {

    //I'm not sure where you are getting str from, but get it before you call this:

    $.get("getUser.php", {q:str}, function(data){

        //data holds what getUser.php echoes
        $("#yourTable").replaceWith(data);

    });

});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top