Question

对于我的很多php文件，我附加了一个html和一个javascript部分，它修改和增强了表中显示的数据。因为html和js / jquery部分总是相同的，所以我想创建一个全局头文件，我将这样包含在我的php文件中：

include("parts/head.html");

Head.html包含几个jquery js文件，css文件和我自己的js，它们调用jquery插件并将其应用于主表中的某些id或类：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script type="text/javascript" src="js/defaulttable.js"></script>
<link rel="icon" href="images/favicon.ico">
<body>test test
</body>
</html>

现在，除了一个函数之外，一切正常 - 一个函数，您可以通过一个小文本框将注释插入到数据库中。从我的.js文件中提取：

 //function to insert textarea
  function insertTextarea() {
      if ($(this).parents("tr").find("td:eq(0)").text() == 1) {
          var boardInfo = $("<form id='boardComment'><textarea placeholder='Notizen? Fragen? Kommentare?' rows='2' cols='27'></textarea>Privat:<input type='checkbox' name='privatecheckbox' id='privatecheckbox'/>Reminder:<input type='checkbox' name='remindercheckbox' id='remindercheckbox' checked/><input type='submit' value='Submit'><input type='reset' value='Cancel'></form>");
      } else {
          var boardInfo = $("<form id='boardComment'><textarea placeholder='Notizen? Fragen? Kommentare?' rows='2' cols='27'></textarea>Privat:<input type='checkbox' name='privatecheckbox' id='privatecheckbox'/>Reminder:<input type='checkbox' name='remindercheckbox' id='remindercheckbox'/><input type='submit' value='Submit'><input type='reset' value='Cancel'></form>");
      }

      console.log('this', $(this).parents("tr").find("td:eq(0)").text());


      $(this).parent().append(boardInfo);
      $("tbody img").hide();
      $("textarea").focus();

      $("#boardComment").on("submit", function(event) {
          event.preventDefault();
          var change_id = {};
          change_id['id'] = $(this).parent().attr("id");

          change_id['comment'] = $(this).find("textarea").val();

          change_id['privatecheckbox'] = $("input[name='privatecheckbox']", this).is(':checked') ? 1 : 0;
          // get remindercheckbox
          change_id['remindercheckbox'] = $("input[name='remindercheckbox']", this).is(':checked') ? 1 : 0;

          $.ajax({
              type: "POST",
              url: "boardinfo2private.php",
              cache: false,
              data: change_id,
              success: function(response2) {
                  alert("Your comment has been saved!");
                  $("tbody img").show();
                  $("#" + change_id['id']).find("form").remove();

                  if (change_id['remindercheckbox'] == 1) {
                      console.log("rem checkbox 1");
                      $("#" + change_id['id']).parent().addClass("Reminds");
                      $("#" + change_id['id']).parent().find("td:eq(0)").html(1);

                  } else if ($("#" + change_id['id']).parent().hasClass("Reminds")) {
                      $("#" + change_id['id']).parent().removeClass("Reminds");
                      $("#" + change_id['id']).parent().find("td:eq(0)").html(0);

                  }
              }
       });

      return false;
       });

变量change_id已经充分定义，当我将所有内容放在一个php文件中时，它可以很好地工作 - html，script和php。会发生什么，当我点击提交时，页面完全重新加载，变量存储在URL中，而没有插入数据库。

我在js文件中执行的其他函数调用是外部php文件上的AJAX帖子，它们工作正常。他们不会在DB tho中插入任何新内容。

如果有人可以帮助我，我会感激不尽。我非常想改进我的编码，并认为全局文件将是一个良好的开端，所以如果我想在JS中添加内容，我不必更改每个文件。

Answer 1

你想通过全球改进不是一个好主意...因为全球事物总是问题，你应该在

上调用这个功能

$(document).ready(function(){

  call it here 
})

还包括头脑中的javascript也不是好主意

Answer 2

据我所知，您的问题是页面在提交表单时正在重新加载，您只是希望它以异步方式发生。如果这是问题，我会在return false函数的末尾添加("submit", function(event) {。希望这能回答你的问题。

Answer 3

我使用与php类似的功能，而不是使用post函数重新加载页面我拦截表单提交请求然后使用jquery get或load函数来完成同样的事情而无需刷新或重新加载页面

$( "#formsubmit" ).click(function(e) 
{
    //stop grid submission from reloading page or going anywhere
        e.preventDefault();
    //get variables
        var passVar = encodeURIComponent($("#var").val());

    //pass to insert to db page, get response
        $.get('adddata.php?var=' + passVar,
            function(data) 
            { 
                var getResult = data;
                //do something, including update page if incessary
            }
        );      
});

Answer 4

我能够通过解决问题 $(document).on('submit', 'form#boardComment', function(event){

而不是

$ ("#boardComment").on( "submit", function( event ) {

当通过HTML文件包含在PHP中时，AJAX Post不再工作了

4 个答案: