CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
sardine
sardine

Reputation: 157

AJAX Post doesn't work anymore when included in PHP via a HTML file

To a lot of my php files i append a html and a javascript part, which modify and enhance the displayed data in a table. Because the html and js/jquery part is always the same, i wanted to make a global header file, that i'd include in my php file like this:

include("parts/head.html");

Head.html contains several jquery js files, css files and my own js, which calls the jquery plugins and applies it to certain ids or classes in the main table:

<!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>

Now, everything works fine apart from one function - a function wherein you insert comments via a little textbox into the DB. Extraction from my .js file:

 //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;
       });

The variable change_id is sufficiently defined earlier and works perfectly, when i put everything in a single php file - html, script and php. What happens is, that when i hit submit, the page reloads completely and the variables are stored in the URL without having been inserted in the DB.

The other function calls i do in my js file are AJAX Posts on external php files aswell and they work fine. They don't insert anything new into the DB tho.

I'd be endlessly thankful if someone can help me with this.. I desperately want to improve my coding and thought global files would be a good start, so i don't have to change every single file if i want to add something to the JS..

Upvotes: 0

Views: 559

Answers (4)

Goose
Goose

Reputation: 4821

As I understand, your issue is that the page is reloading when the form is submitted, and you just want it to happen asynchronously. If that is the issue, I would add a return false at the end of the ("submit", function(event) { function. Hope this answers your question.

Upvotes: 1

sardine
sardine

Reputation: 157

I was able to solve the issue via $(document).on('submit', 'form#boardComment', function(event){

instead of

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

Upvotes: 0

Jeff Bluemel
Jeff Bluemel

Reputation: 486

I'm using similar functions with php and instead of using a post function to reload the page I am intercepting form submit requests and then use jquery get or load functions to accomplish the same thing without ever refreshing or reloading the page.

$( "#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
            }
        );      
});

Upvotes: 0

Fatodi
Fatodi

Reputation: 42

you want to improve by global isnt a good idea ... because global things have always issue and you should call this function on 

$(document).ready(function(){

  call it here 
})

also including javascript in head isnt good idea either

Upvotes: 2

Related Questions