JQuery：无法将值传递给Select Query

时间：2018-04-22 02:56:23

标签： php jquery mysql ajax

我似乎找不到将下拉列表的值传递给另一个页面中的选择查询的方法。由于某种原因，它可以填充下拉框，但不能按主题ID过滤注释。 我试图将sTopic选择列表的选定值传递给fetch_comment dot php，以便只检索与所选thread_id匹配的注释。

更具体地说，这是一段无效的代码。

var sTopic = $(this).val()
$.post( "fetch_comment.php", { idTopic: sTopic } );

index dot php 

<?php
//index.php
?>
<!DOCTYPE html>
<html>
 <head>
  <title>Topic Tracker</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <link href="./css/doc.min.css" rel="stylesheet">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 </head>
 <body>
  <br />
  <h2 align="center"><a href="#">Topic Tracker</a></h2>
  <br />

      <div class="container" style="margin-top:35px">
        <form>
            <div class="form-group">
                <label for="sYear">Year</label>
                <select class="form-control" id="sYear" name="sYear"></select>
            </div>
            <div class="form-group">
                <label for="sTopic">Topic</label>
                <select class="form-control" id="sTopic" name="sTopic" disabled></select>
            </div>
        </form>
        <div class="alert alert-info" id="alert_info"></div>
    </div>


  <div class="container" style="margin-top:35px">
    <div class="bd-callout bd-callout-warning" id="rule_abstract">
        <h4 id="conveying-meaning-to-assistive-technologies">Proposed Rule Change Abstract</h4>
        <p id="rule_text"></p>   
    </div> 

    <div class="bd-callout bd-callout-warning" id="proposed_rule">
        <h4 id="conveying-meaning-to-assistive-technologies">Proposed Rule Text</h4>
        <p id="rule_text_proposed"></p>   
    </div>
   </div>
  <div class="container" style="margin-top:35px">
   <form method="POST" id="comment_form">
    <div class="form-group">
    <h2>Comment Section</h2>
     <input type="text" name="comment_name" id="comment_name" class="form-control" placeholder="Enter Name" />
    </div>
    <div class="form-group">
     <textarea name="comment_content" id="comment_content" class="form-control" placeholder="Enter Comment" rows="5"></textarea>
    </div>
    <div class="form-group">
     <input type="hidden" name="thread_id" id="thread_id" value="1" />
     <input type="hidden" name="comment_id" id="comment_id" value="0" />
     <input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
    </div>
   </form>
   <span id="comment_message"></span>
   <br />
   <div id="display_comment"></div>
  </div>
 </body>
</html>

<?php $GLOBALS['a'] = '1'; ?>

<script>
$(document).ready(function(){
    //Hide Alert Info
    $("#alert_info").hide();
    //Hide Rule Abstract
    $("#rule_abstract").hide();
    //Hide Proposed Rule Text
    $("#proposed_rule").hide();
    //Hide Comment Form
    $("#comment_form").hide();   
    //Hide Comments
    $("#display_comment").hide();     
    //Get the dropdowns ready
    $.get('data.php',function(fyear){
        $('#sYear').html(fyear)
    })
    $('#sYear').change(function(){
        $('#sTopic').removeAttr('disabled')
        var sYear = $(this).val()
        $.post('data.php?p=sTopic',{idYear:sYear},function(ftopic){
            $('#sTopic').html(ftopic)
        })
        $("#alert_info").hide();
        $("#rule_abstract").hide();
        $("#proposed_rule").hide();
        $("#comment_added_success").hide();
        $("#comment_form").hide();
        $("#display_comment").hide()        

    })

    $('#sTopic').change(function(){
        var sTopic = $(this).val()
        $.post( "fetch_comment.php", { idTopic: sTopic } );

        var info = 'Year: '+ $('#sYear').val() +', Topic '+ $('#sTopic').val()
        $('.alert').html(info)
        $("#alert_info").show();
        $("#rule_abstract").show();
        $("#proposed_rule").show();
        $("#comment_form").show();
        $("#display_comment").show(); 
        $("#comment_added_success").show();
        $('#rule_text').html(info);
        $('#rule_text_proposed').html(info)       
    })


     //Submit Comment
     $('#comment_form').on('submit', function(event){
      event.preventDefault();
      var form_data = $(this).serialize();
      $.ajax({
       url:"add_comment.php",
       method:"POST",
       data:form_data,
       dataType:"JSON",
       success:function(data)
       {
        if(data.error != '')
        {
         $('#comment_form')[0].reset();
         $('#comment_message').html(data.error);
         $('#comment_id').val('0');
         load_comment();
        }
       }
      })
     });

    load_comment();
    //Load Comments
    function load_comment()
    {   
      $.ajax({
       url:"fetch_comment.php",
       method:"POST",
       success:function(data)
       {
        $('#display_comment').html(data);
       }
      })
    }

    $(document).on('click', '.reply', function(){
      var comment_id = $(this).attr("id");
      $('#comment_id').val(comment_id);
      $('#comment_name').focus();
     });     
});
</script>

数据点php      

$page = isset($_GET['p'])? $_GET['p'] : '' ;
if($page=='sTopic'){
    $sYear = $_POST['idYear'];
    echo "<option selected disabled>Select Topic</option>";
    $query = $connect->prepare("select * from tbl_topics where id_year='$sYear'");
    $query->execute();
    while($row = $query->fetch()){
        ?>
        <option value="<?php echo $row['id_topic'] ?>"><?php echo $row['st_topic'] ?></option>
        <?php
    }

} else{
    echo "<option selected disabled>Select Year</option>";
    $query = $connect->prepare("select * from tbl_years");
    $query->execute();
    while($row = $query->fetch()){
        ?>
        <option value="<?php echo $row['id_year'] ?>"><?php echo $row['tp_year'] ?></option>
        <?php
    }
}
?>

fetch_comment dot php      

//fetch_comment.php

//----------------------------
// Connect to database
//----------------------------
require("dbconfig.php"); 

$sTopic= "";
$sTopic = $_POST['idTopic'];

$query = "
SELECT * FROM tbl_comments 
WHERE thread_id = '".$sTopic."'
AND parent_comment_id = '0'
ORDER BY comment_id DESC
";

$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();
$output = '';
foreach($result as $row)
{
 $output .= '
 <div class="panel panel-default">
  <div class="panel-heading">By <b>'.$row["comment_sender_name"].'</b> on <i>'.$row["date"].'</i></div>
  <div class="panel-body">'.$row["comment"].'</div>
  <div class="panel-footer" align="right"><button type="button" class="btn btn-default reply" id="'.$row["comment_id"].'">Reply</button></div>
 </div>
 ';
 $output .= get_reply_comment($connect, $row["comment_id"]);
}

echo $output;

function get_reply_comment($connect, $parent_id = 0, $marginleft = 0)
{
 $query = "
 SELECT * FROM tbl_comments WHERE parent_comment_id = '".$parent_id."'
 ";
 $output = '';
 $statement = $connect->prepare($query);
 $statement->execute();
 $result = $statement->fetchAll();
 $count = $statement->rowCount();
 if($parent_id == 0)
 {
  $marginleft = 0;
 }
 else
 {
  $marginleft = $marginleft + 48;
 }
 if($count > 0)
 {
  foreach($result as $row)
  {
   $output .= '
   <div class="panel panel-default" style="margin-left:'.$marginleft.'px">
    <div class="panel-heading">By <b>'.$row["comment_sender_name"].'</b> on <i>'.$row["date"].'</i></div>
    <div class="panel-body">'.$row["comment"].'</div>
    <div class="panel-footer" align="right"><button type="button" class="btn btn-default reply" id="'.$row["comment_id"].'">Reply</button></div>
   </div>
   ';
   $output .= get_reply_comment($connect, $row["comment_id"], $marginleft);
  }
 }
 return $output;
}
?>

不发布add_comment.php，因为它工作正常。

提前致谢。

1 个答案:

答案 0 :(得分：0)

这是按预期发送值。但现在#display_comment div不可见了。如果我删除dataType：'json'，则会显示#display_commment div，但当然不会显示我想要的结果，因为没有发送idTopic。

//Load Comments
function load_comment()
{   
  var sTopic = $('#sTopic option:selected').val()
  $.ajax({
   url:"fetch_comment.php",
   method:"POST",
   dataType:'json',
   data: ({idTopic: sTopic}),
   success:function(data)
   {
    $('#display_comment').html(data);
    console.log(data);
   }
  })
}
相关问题
最新问题