CODEWITHSUNDEEP
javascriptphpjquerymysql
Waaaaat
Waaaaat

Reputation: 644

onChange function change the displayed data from a table

I have a table in my website and a dropdown list in my website which according to the selected value from the dropdown list it will change the output of the table. I did a search and I found this on stackoverflow and I tried to do something similar but it doesn't work. Here is my php file called announcements which I want to display the table.

<?php
include_once 'header.php';
$connection = mysql_connect("localhost", "root", "smogi")?>

<html>
<head>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<?php
$result = queryMysql("SELECT * FROM doctor WHERE username='$username'");
if (mysql_num_rows($result)):
?>
<!-- Koumpi pou se metaferei sti selida gia tin dimiourgia neas anakoinwseis -->
<form action="new_announcement.php">
<input type="submit" value="Create New Announcement">
</form>
<br />

Select Category :<select id="SelectDisease" name="category">
<option value="*">All</option>
<!--emfanizei tis epiloges gia ta specialties me basi auta p exoume sti basi mas -->
<?php
$sql = mysql_query("SELECT name FROM disease");
while ($row = mysql_fetch_array($sql)) {
echo "<option value='" . $row['name'] . "'>" . $row['name'] . "</option>";
}
?>
</select><br><br />

<table border="1" style="width:100%">
<tr>
<td><b>Author</b></td>
<td><b>Category</b></td>
<td><b>Subject</b></td>
<td><b>Content</b></td>
</tr>
<?php
if(isset($_GET["selected"])){

$type = $_GET["selected"];
$query = "SELECT author,category,subject,content FROM announcements WHERE category='" . $type . "'";
$announcements = mysql_query($query, $connection);
$counter = 0;
$z = 0;
if ($announcements == FALSE) {
die(mysql_error()); // To get better errors report
}
while ($row = mysql_fetch_assoc($announcements)) {
while ($row = mysql_fetch_assoc($announcements)) {
$counter++;
?>
<tr>
<td><?php echo $row['author'];?></td>
<td><?php echo $row['category']; ?></td>
<td><?php echo $row['subject']; ?></td>
<td><?php echo $row['content']; ?></td>
</tr>
<?php }
}
}
?>
<?php
else:
?>

Select Category :<select id="SelectDisease" name="category">
<option value="*">All</option>
<!--emfanizei tis epiloges gia ta specialties me basi auta p exoume sti basi mas -->
<?php
$sql = mysql_query("SELECT name FROM disease");
while ($row = mysql_fetch_array($sql)) {
echo "<option value='" . $row['name'] . "'>" . $row['name'] . "</option>";
}
?>
</select><br><br />

<table border="1" style="width:100%">
<tr>
<td><b>Author</b></td>
<td><b>Category</b></td>
<td><b>Subject</b></td>
<td><b>Content</b></td>
</tr>
<?php
if(isset($_GET["selected"])){
$type = $_GET["selected"];
$query = "SELECT author,category,subject,content FROM announcements WHERE category='" . $type . "'";
$announcements = mysql_query($query, $connection);
$counter = 0;
$z = 0;
while ($row = mysql_fetch_assoc($announcements)) {
$counter++;
?>
<tr>
<td><?php echo $row['author'];?></td>
<td><?php echo $row['category']; ?></td>
<td><?php echo $row['subject']; ?></td>
<td><?php echo $row['content']; ?></td>
</tr>
<?php } } endif;?>
</table>
</body>
</html>

And this is my javascript.js file

$(document).ready(function() {
  $('#SelectDisease').change(function() {
var selected=$(this).val();
  $.get("announcements.php?selected="+selected, function(data){
      $('.result').html(data);

    });
    });
});

Thank you for your time :)

PS: THE INCLUDE_ONCE CODE create the connection with th db

Upvotes: 0

Views: 2941

Answers (3)

Makan
Makan

Reputation: 617

First thing is that unless your user makes a selection, you do not have any $_GET available so it will be undefined. You should get the value if it is available. Like so:

if(isset($_GET['selected'])){
    $type = $_GET['selected'];
}

But this is not the only issue here. $.get is an ajax request and it is just sending a request to your php file and gets all the html content of your page.

If you do not care to reload the page each time your user selects an option, instead of an $.get request simply redirect your user to that url. Otherwise if you want to do it without reloading, you need to do an $.get request correctly.

The example that you said you are trying to do something similar, is not sending an $.get request to the same page that the user is viewing. It is sending the get request to another php page which is just designed to get the $_GET["selected"] from its url, send a query to the database, get the result from the database and then just return the result, which will be the data in your $.get request.

See this example: Get data from mysql database using php and jquery ajax

It is trying to do the same thing as you, except with $.POST which you can do the same or change it to a $.GET if you want. See how the other php page return the result and how the $.get request is receiving and viewing the data.

Upvotes: 1

Michael from Eilon Eng
Michael from Eilon Eng

Reputation: 11

mysql_query() returns FALSE in case of error. You have to choose the data base name. Like so:

$connection = mysql_connect("localhost", "root", "smogi", "***DATABASE_NAME***");

Remember, mysql functions are deprecated! Use mysqli or PDO.

Have a nice day

Upvotes: 0

Raja
Raja

Reputation: 608

mysql_query() will result in FALSE which is Boolean value if there is any error, do check before while loop, to get better error,

if($announcements == FALSE) { 
    die(mysql_error()); // To get better errors report
}

while($row = mysql_fetch_assoc($announcements)){
  // then you code here
}

Upvotes: 0

Related Questions