根据组合框值php ajax过滤记录

时间:2015-11-02 03:06:27

标签: php jquery ajax combobox

我想使用ajax基于组合框(下拉列表)的值显示记录。根据考试显示考生列表。救命。我是PHP和AJAX的新手。

我想使用ajax基于组合框(下拉列表)的值显示记录。根据考试显示考生列表。救命。我是PHP和AJAX的新手。 我想使用ajax基于组合框(下拉列表)的值显示记录。根据考试显示考生列表。救命。我是PHP和AJAX的新手。

<?php
include 'configuration.php';
$queryselect = mysql_query("SELECT examdateno, examdate from tbl_examdate ORDER BY examdate DESC");
?>
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="keywords" content="onclick edit jquery php, grid in php, onclick change text box in jquery, onclick edit table row, insert update delete using jquery ajax, simple php data grid" />
    <meta name="description" content="This article is about simple grid system using PHP, jQuery. Insert a new record to the table using by normal Ajax PHP. It will show the editable textbox when user clicks on the label." />
    <link rel="stylesheet" type="text/css" href="css/grid.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/component.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>         
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">


    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <script type="text/javascript">
            $(function () {

                // Function for load the grid
                function LoadGrid(dte) {
                    var gridder = $('#as_gridder');
                    var UrlToPass = 'action=load';
                    var value = $('#examdate').val();
                    gridder.html('loading..');
                    $.ajax({
                        url: 'ajax.php',
                        type: 'POST',
                        data: UrlToPass,
                        success: function (responseText) {
                            gridder.html(responseText);
                        }
                    });
                }

                // Seperate Function for datepiker() to save the value
                function ForDatePiker(ThisElement) {
                    ThisElement.prev('span').html(ThisElement.val()).prop('title', ThisElement.val());
                    var UrlToPass = 'action=update&value=' + ThisElement.val() + '&crypto=' + ThisElement.prop('name');
                    $.ajax({
                        url: 'ajax.php',
                        type: 'POST',
                        data: UrlToPass
                    });
                }

                LoadGrid(); // Load the grid on page loads


                // Execute datepiker() for date fields
                $("body").delegate("input[type=text].datepicker", "focusin", function () {
                    var ThisElement = $(this);
                    $(this).datepicker({
                        dateFormat: 'yy/mm/dd',
                        onSelect: function () {
                            setTimeout(ForDatePiker(ThisElement), 500);
                        }
                    });
                });

                // Show the text box on click
                $('body').delegate('.editable', 'click', function () {
                    var ThisElement = $(this);
                    ThisElement.find('span').hide();
                    ThisElement.find('.gridder_input').show().focus();
                });

                // Pass and save the textbox values on blur function
                $('body').delegate('.gridder_input', 'blur', function () {
                    var ThisElement = $(this);
                    ThisElement.hide();
                    ThisElement.prev('span').show().html($(this).val()).prop('title', $(this).val());
                    var UrlToPass = 'action=update&value=' + ThisElement.val() + '&crypto=' + ThisElement.prop('name');
                    if (ThisElement.hasClass('datepicker')) {
                        return false;
                    }
                    $.ajax({
                        url: 'ajax.php',
                        type: 'POST',
                        data: UrlToPass
                    });
                });

                // Same as the above blur() when user hits the 'Enter' key
                $('body').delegate('.gridder_input', 'keypress', function (e) {
                    if (e.keyCode == '13') {
                        var ThisElement = $(this);
                        ThisElement.hide();
                        ThisElement.prev('span').show().html($(this).val()).prop('title', $(this).val());
                        var UrlToPass = 'action=update&value=' + ThisElement.val() + '&crypto=' + ThisElement.prop('name');
                        if (ThisElement.hasClass('datepicker')) {
                            return false;
                        }
                        $.ajax({
                            url: 'ajax.php',
                            type: 'POST',
                            data: UrlToPass
                        });
                    }
                });

                // Function for delete the record
                $('body').delegate('.gridder_delete', 'click', function () {
                    var conf = confirm('Are you sure want to delete this record?');
                    if (!conf) {
                        return false;
                    }
                    var ThisElement = $(this);
                    var UrlToPass = 'action=delete&value=' + ThisElement.attr('href');
                    $.ajax({
                        url: 'ajax.php',
                        type: 'POST',
                        data: UrlToPass,
                        success: function () {
                            LoadGrid();
                        }
                    });
                    return false;
                });


                // Add new record

                // Add new record when the table is empty
                $('body').delegate('.gridder_insert', 'click', function () {
                    $('#norecords').hide();
                    $('#addnew').slideDown();
                    return false;
                });


                // Add new record when the table in non-empty
                $('body').delegate('.gridder_addnew', 'click', function () {
                    $('html, body').animate({scrollTop: $('.as_gridder').offset().top}, 250); // Scroll to top gridder table
                    $('#addnew').slideDown();
                    return false;
                });

                // Cancel the insertion
                $('body').delegate('.gridder_cancel', 'click', function () {
                    LoadGrid()
                    return false;
                });

                // For datepiker
                $("body").delegate(".gridder_add.datepiker", "focusin", function () {
                    var ThisElement = $(this);
                    $(this).datepicker({
                        dateFormat: 'yy/mm/dd'
                    });
                });

                // Pass the values to ajax page to add the values
                $('body').delegate('#gridder_addrecord', 'click', function () {

                    // Do insert vaidation here
                    if ($('#fname').val() == '') {
                        $('#fname').focus();
                        alert('Enter the First Name');
                        return false;
                    }
                    if ($('#lname').val() == '') {
                        $('#lname').focus();
                        alert('Enter the Last Name');
                        return false;
                    }
                    if ($('#age').val() == '') {
                        $('#age').focus();
                        alert('Enter the Age');
                        return false;
                    }
                    if ($('#profession').val() == '') {
                        $('#profession').focus();
                        alert('Select the Profession');
                        return false;
                    }
                    if ($('#date').val() == '') {
                        $('#date').focus();
                        alert('Select the Date');
                        return false;
                    }

                    // Pass the form data to the ajax page
                    var data = $('#gridder_addform').serialize();
                    $.ajax({
                        url: 'ajax.php',
                        type: 'POST',
                        data: data,
                        success: function () {
                            LoadGrid();
                        }
                    });
                    return false;
                });

            });
        </script>
</head>

<body>
    <header>
        <img src="images/qes_logob.png" alt="logo">
        <button class="hamburger">&#9776;</button>
        <button class="cross">&#735;</button>
    </header>
    <div class="menu">
        <ul>
            <a href="encodeinterview.php">
                <li>Encode Grades</li>
            </a> 
            <a href="viewinterview.php">
                <li>View Grades</li>
            </a>               
            <a href="../index.php">
                <li>Logout</li>
            </a>  
        </ul>
    </div>

     <script>
        $(function () {
            $(".cross").hide();
            $(".menu").hide();
            $(".hamburger").click(function () {
                $(".menu").slideToggle("slow", function () {
                    $(".hamburger").hide();
                    $(".cross").show();
                });
            });

            $(".cross").click(function () {
                $(".menu").slideToggle("slow", function () {
                    $(".cross").hide();
                    $(".hamburger").show();
                });
            });
        });
    </script>
    <form>
            <h1>Exam Dates</>
                <select name="examdate" id="examDate" onchange="LoadGrid(this.value)">
                    <option>Select Exam Date</option>
                    <?php
                    while ($row = mysql_fetch_array($queryselect)) {
                        echo "<option value={$row['examdateno']}>{$row['examdate']}</option>\n";
                    }
                    ?>
                </select>
    </form>
    <div class="as_wrapper">    
        <div class="as_grid_container">
            <div class="as_gridder" id="as_gridder"></div> <!-- GRID LOADER -->
        </div>
    </div>
</body>
</html>

AJAX

        <?php
        include 'configuration.php';
        include 'functions/functions.php';
        $action = $_REQUEST['action'];
        $q = intval($_POST['q']);
        switch($action) {

                case "load":

                        $query  = mysql_query("select s.sno, s.fname, s.lname, s.examdate, s.interviewgrade, s.gwa from student s inner join tbl_examdate e on s.examdate=e.examdate where e.examdateno=$q");
                        $count  = mysql_num_rows($query);
                        if($count > 0) {
                                while($fetch = mysql_fetch_array($query)) {
                                        $record[] = $fetch;
                                }
                        }
                        $department = array('Software Architect', 'Inventor', 'Programmer', 'Entrepreneur');
                        ?>
                <table class="as_gridder_table">
                    <tr class="grid_header">
                        <td><div class="grid_heading">Sno</div></td>
                        <td><div class="grid_heading">First Name</div></td>
                        <td><div class="grid_heading">Last Name</div></td>
                        <td><div class="grid_heading">Age</div></td>
                        <td><div class="grid_heading">Profession</div></td>
                        <td><div class="grid_heading">Date</div></td>
                        <td><div class="grid_heading">Actions</div></td>
                    </tr>
                    <tr id="addnew">
                        <td>&nbsp;</td>
                        <td colspan="6">
                        <form id="gridder_addform" method="post">
                        <input type="hidden" name="action" value="addnew" />
                        <table width="100%">
                        <tr>
                            <td><input type="text" name="fname" id="fname" class="gridder_add" /></td>
                            <td><input type="text" name="lname" id="lname" class="gridder_add" /></td>
                            <td><input type="text" name="age" id="age" class="gridder_add" /></td>
                            <td><select name="profession" id="profession" class="gridder_add select">
                                <option value="">SELECT</option>
                                <?php foreach($department as $departments) { ?>
                                <option value="<?php echo $departments; ?>"><?php echo $departments; ?></option>
                                <?php } ?>
                                </select></td>
                            <td><input type="text" name="date" id="date" class="gridder_add datepiker" /></td>
                            <td>&nbsp;
                            <input type="submit" id="gridder_addrecord" value="" class="gridder_addrecord_button" title="Add" />
                            <a href="cancel" id="gridder_cancel" class="gridder_cancel"><img src="images/delete.png" alt="Cancel" title="Cancel" /></a></td>
                                        </tr>
                        </table>                    
                        </form>
                    </tr>
                    <?php
                    if($count <= 0) {
                    ?>
                    <tr id="norecords">
                        <td colspan="7" align="center">No records found <a href="addnew" id="gridder_insert" class="gridder_insert"><img src="images/insert.png" alt="Add New" title="Add New" /></a></td>
                    </tr>
                    <?php } else {
                    $i = 0;
                    foreach($record as $records) {
                    $i = $i + 1;
                    ?>
                    <tr class="<?php if($i%2 == 0) { echo 'even'; } else { echo 'odd'; } ?>">
                        <td><div class="grid_content sno"><span><?php echo $i; ?></span></div></td>
                        <td><div class="grid_content editable"><span><?php echo $records['fname']; ?></span><input type="text" class="gridder_input" name="<?php echo encrypt("fname|".$records['id']); ?>" value="<?php echo $records['fname']; ?>" /></div></td>
                        <td><div class="grid_content editable"><span><?php echo $records['lname']; ?></span><input type="text" class="gridder_input" name="<?php echo encrypt("lname|".$records['id']); ?>" value="<?php echo $records['lname']; ?>" /></div></td>
                        <td><div class="grid_content editable"><span><?php echo $records['age']; ?></span><input type="text" class="gridder_input" name="<?php echo encrypt("age|".$records['id']); ?>" value="<?php echo $records['age']; ?>" /></div></td>
                        <td><div class="grid_content editable"><span><?php echo $records['profession']; ?></span>
                        <select class="gridder_input select" name="<?php echo encrypt("profession|".$records['id']); ?>">
                            <?php foreach($department as $departments) { ?>
                            <option value="<?php echo $departments; ?>" <?php if($departments == $records['profession']) { echo 'selected="selected"'; } ?>><?php echo $departments; ?></option>
                            <?php } ?>
                        </select>
                        </div></td>
                        <td><div class="grid_content editable"><span><?php echo date("Y/m/d", strtotime($records['posted_date'])); ?></span><input type="text" class="gridder_input datepicker" name="<?php echo encrypt("posted_date|".$records['id']); ?>" value="<?php echo date("Y/m/d", strtotime($records['posted_date'])); ?>" /></div></td>
                        <td>
                        <a href="gridder_addnew" id="gridder_addnew" class="gridder_addnew"><img src="images/insert.png" alt="Add New" title="Add New" /></a>
                        <a href="<?php echo encrypt($records['id']); ?>" class="gridder_delete"><img src="images/delete.png" alt="Delete" title="Delete" /></a></td>
                    </tr>
                    <?php
                        }
                    }
                    ?>
                    </table>
                <?php
                break;

                case "addnew":
                        $fname      = isset($_POST['fname']) ? mysql_real_escape_string($_POST['fname']) : '';
                        $lname      = isset($_POST['lname']) ? mysql_real_escape_string($_POST['lname']) : '';
                        $age        = isset($_POST['age']) ? mysql_real_escape_string($_POST['age']) : '';
                        $profession = isset($_POST['profession']) ? mysql_real_escape_string($_POST['profession']) : '';
                        $date       = isset($_POST['date']) ? mysql_real_escape_string($_POST['date']) : '';
                        mysql_query("INSERT INTO `grid` (fname, lname, age, profession, posted_date) VALUES ('$fname', '$lname', '$age', '$profession', '$date')");
                break;


                case "update":
                        $value  = $_POST['value'];
                        $crypto = decrypt($_POST['crypto']);
                        $explode = explode('|', $crypto);
                        $columnName = $explode[0];
                        $rowId = $explode[1];
                        if($columnName == 'posted_date') { // Check the column is 'date', if yes convert it to date format
                                $datevalue = $value;
                                $value     = date('Y-m-d', strtotime($datevalue));
                        }
                        $query = mysql_query("UPDATE `grid` SET `$columnName` = '$value' WHERE id = '$rowId' ");
                break;

                case "delete":
                        $value  = decrypt($_POST['value']);
                        $query = mysql_query("DELETE FROM `grid` WHERE id = '$value' ");
                break;
        }
        ?>

1 个答案:

答案 0 :(得分:0)

您没有在ajax中通过考试日期,q,但您在$_POST中使用该考试日期,因此请将ajax中的值传递给您的文件。

function LoadGrid(dte) {
                var gridder = $('#as_gridder');
                var UrlToPass = 'action=load';
                var value = $('#examdate').val();
                gridder.html('loading..');
                $.ajax({
                    url: 'ajax.php',
                    type: 'POST',
                    data: {action:"load",q:dte},   <----- this line.
                    success: function (responseText) {
                        gridder.html(responseText);
                    }
                });
            }