在数据库提交后立即将内容附加到页面

时间:2013-06-11 23:04:27

标签: php mysql jquery

<div class="accordion" id="accordion2">
<?php $info= mysql_query("SELECT id, title, description FROM event"); ?>
  <?php while ($row = mysql_fetch_array($info, MYSQL_NUM)): ?>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse<?php print $row[0]; ?>"><?php print $row[1]; ?></a><span class="delete" id="<?php print $row[0]; ?>">×</span>
    </div>
    <div id="collapse<?php print $row[0]; ?>" class="accordion-body collapse">
      <div class="accordion-inner">
        <div class="row-fluid">
          <div class="span6">
            <?php print $row[2]; ?>
          </div>
          <div class="span6 ppl">
            <ul>

            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <?php endwhile; ?>          
</div>

我有一个非常简单的方法来打印我的twitter bootstrap手风琴。 我在我的页面上显示了这个,我还在手风琴本身上面有一个表单,我可以使用ajax将另一个表单提交到数据库中。这是表格:

<form class="form">
  <fieldset>
    <legend>Stuff</legend>
    <input class="class1" type="text" placeholder="xx">
    <input class="class2" type="text" placeholder="xx">
    <input class="class3" type="password" placeholder="xx">
    <textarea maxlength="320" rows="5" class="class4" placeholder="xx"></textarea>
    <div class="submit btn">Add</div>
  </fieldset>
</form>

这是jQuery:

$(".form .submit").bind("click", function() {
  var title = $(".form input.class1").val();
  var email = $(".form input.class2").val();
  var stuff1 = $('.form input.class3').val();
  var stuff2 = $('.form textarea.class4').val();

  if (title && email) {
    var data = {title: title, email: email, stuff1: stuff1, stuff2: stuff2};

    $.post("action.php", data, function() {
      $(".form input, .form textarea").val("");
        alert('done');
    });
  }
  else {
    alert('something went wrong');
  }
});

最后我的action.php文件:

<?php require('access.php');

if ($_POST['title'] && $_POST['email']) {

  $title = $_POST['title'];
  $email = $_POST['email'];
  $stuff1 = $_POST['stuff1'];
  $stuff2 = $_POST['stuff2'];

  mysql_query("INSERT INTO events (title, email, stuff1, stuff2) VALUES('$title', '$email', '$stuff1', '$stuff2')");

}

一切正常,但正如标题所说,我希望输入的信息作为一个新的手风琴组(不刷新页面)作为手风琴乐队的前奏。我的大脑拒绝与我合作,因为对我来说,似乎如果我提交值,我必须向数据库发出另一个请求,以获得新事件的新生成的id,以使我的手风琴布局正常工作。 Wat do?

抱歉使用不推荐使用mysql的方式:O

1 个答案:

答案 0 :(得分:0)

所以除了mysql函数之外,你要做的就是在元素前加上一些html。你已经在你的帖子上有一个回调函数,所以你需要做的就是让它真正做一些事情,例如。

$.post('action.php', data, function() {
    var newID = 123;  // get this from the response text
    $('div.accordion-inner').prepend('<div class="row-fluid"><div class="span6">'+newID +'</div><div class="span6 ppl"><ul></ul></div></div>');
});

这将尝试将指定的div添加到div.accordion-inner

只需用您要查找的html替换前缀。

作为补充说明,http://php.net/manual/en/function.mysql-insert-id.php将为您获取MySQL连接上执行的最后一次INSERT的PRIMARY KEY值