Detect where there are no entries for an HTML menu-submenu system_问答_开发者

I have MySQL tables looking like this:

regions table

id     |   region
-------------------
1      |   Region1
2      |   Region2

...

and schools table

region_id |   school
-------------------
1         |   schno1
1         |   schno5
1         |   schno6
2         |   scho120

My page works like this: At first, page populates #regions select menu from db table named "regions". when user selects #region, the JS sends selected region's value to search.php. Server-side PHP script searches db table nam开发者_StackOverflow社区ed "schools" for #region (previously selected menu) value, finds all matches and echoes them.

Now the question is, how can I hide #class and #school select menus, and show only error message "there is no school found in this region" if no matches are found? How to check if there's no result from search.php? I'm a beginner to JS.

My JavaScript looks like this: http://pastie.org/2444922 and the piece of code from form: http://pastie.org/2444929 and finally search.php: http://pastie.org/2444933

Update

I changed my JS but no success.

$(document).ready(function(){
    $("#school").hide();
    $("#class").hide();
searchSchool = function(regionSelect){
var selectedRegion = $("select[name*='"+regionSelect.name+"'] option:selected").val();
if (selectedRegion!='0'){
    $.ajax({
    type: "POST",
    url : "core/code/includes/search.php",
    data: "&region_id="+selectedRegion,
    success: function(result, status, xResponse){
        if (result!=null){
            $("#school").show();
            $("#class").show();
            $("#school").html(result);
        }else{
            $("#error").html("There is no school found in this region");
            $("#school").html('');
            $("#school").hide();
        }
    },
    error: function(e){
        alert(e);
    }
    });
}else{
    $("#error").html('Please select a region first');
    $("#school").html('');        
    $("#school").hide();
    $("#class").hide();
}
}
});

You could try this

index.php :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Ajax With Jquery</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    searchSchool = function(regionSelect){
    var selectedRegion = $("select[name*='"+regionSelect.name+"'] option:selected").val();
    if (selectedRegion!='0'){
        $.ajax({
            type: "POST",
            url : "search.php",
            data: "&region_id="+selectedRegion,
            success: function(result, status, xResponse){
            alert(result);
            if (result!=''){
                    $("#school").show();
                    $("#school").html(result);
                }else{
                    $("#error").html("There is no school found in this region");
                    $("#school").html('');
                    $("#school").hide();
                }
            },
            error: function(e){
                alert(e);
            }
        });
    }else{
        $("#error").html('Please select a region first');
        $("#school").html('');        
        $("#school").hide();
    }
}
</script>
</head>


<body>

    <?php 
$username="root";
$password="";
$database="test";

mysql_connect('localhost',$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
$query="SELECT * FROM regions";
$result=mysql_query($query);

$num=mysql_numrows($result);

mysql_close();

echo "<b><center>Database Output</center></b><br><br>";

?>
<select name="region" id="region" onchange="searchSchool(this)">
<option value="0">Please select a Region</option>
<?php 
while($data = mysql_fetch_array( $result )) 
{ 
?>
<option value="<?php echo $data['id']?>"><?php echo $data['name']?></option>
<?php 
}
?>
</select>

<select name="school" id="school"></select>

<span id="error"></span>

</body>
</html>

Search.php:

<?php 

$username="root";
$password="";
$database="test";

mysql_connect('localhost',$username,$password);
@mysql_select_db($database) or die( "Unable to select database");

if(isset($_POST['region_id'])) {
$query = "SELECT * FROM schools WHERE region_id='".$_POST['region_id']."'";
$result=mysql_query($query);

$num = mysql_numrows($result);

if ($num>0){
    while ($row = mysql_fetch_array($result)) {
        echo '<option value="'.$row['id'].'">'.$row['name'].'</option>';
    }
    }
else{
return null;
}
}


mysql_close();
?>

Well i cannot exactly read through your full code but i can give you a mock up of what you might wanna do.

have both the dependant drop downs wrapped in a div.

<div id="dep1"></div>
<div id="dep2"></div>

Now in server side after making the validations if u find elements create a drop down and send it here or just send an error message.

<? 
if($num>0) {
?>
<select>
<?
foreach($element as $ele) {
<option><?=$ele?></option>
}
?>
</select>
<?
} else {
?>
<div class="error">No regions found</div>
<? } ?>

Your js would look something like

$("#dep1").html(loadbar).load("mypage.php","region="+regionid);

I think the issue resides in your jQuery code on lines 27-30. There is no element with ID = cl_dropdown and the comma delimited makes it look for cl_dropdown inside of sch_dropdown.

My guess is that the second select used to have the id cl_dropdown at one point. If so, the HTML for it should look like this:

<select id="cl_dropdown" name="class">

You should also have an element for the message. According to the jQuery, you are supposed to have an #no_sch element but I don't see it.

<div id="no_sch"></div>

Then replace lines 27-30 with the following:

if (!results)     {
    $("#sch_dropdown").hide();
    $("#cl_dropdown").hide();
    $('#no_sch').show(); 
    $('#no_sch').text('no matches found');
};