来自ajax修改文件的JavaScript在主页上不起作用

Question

I have a problems with a form and ajax behavior when I populate my dynamic div using JavaScript.

I have a drop box which contains different time periods and it triggers JavaScript function which modifies the container div based on provided value.

The problem is that the POST behavior of the form and all JavaScript elements doesn't work in the main file.

Here is the code. I simplified it to emphasize the problem. this is the drop Box:

//jQuery for datePicker comes here

<select id="QSelector" method="post" onchange="populateDiv(this.value)">
   <option value="0">All Values</option>
   <option value="1">Sets for 1</option>
   <option value="2">Sets for 2</option>
   <option value="3">Sets for 3</option>
   <option value="4">Sets for 4</option>
</select>

<div id="OUtputDiv" ></div>

here is the javascript function:

          function populateDiv(id){
          var xmlhttp;
          if(window.XMLHttpRequest){//safari, chrome, opera, ffox
             xmlhttp=new XMLHttpRequest();
          }
          else{//IE
             xmlhttp=ActiveXObject("Microft.XMLHTTP");
          }

          xmlhttp.onreadystatechange=function(){
          if(xmlhttp.readyState==4 && xmlhttp.status==200){
             document.getElementById("OUtputDiv").innerHTML = xmlhttp.responseText;
           }
         }
         xmlhttp.open("GET", "../scripts/supportFile.php?ID=" + id, true);
         xmlhttp.send();
   }

And here is the content of the support file. don't mind the id variable it does some logic (ant it works), but I removed it because it's irrelevant to a given problem.

  <?php

     $Id= $_GET['ID'];
      echo "<script> alert('it works'); </script>";
      echo "<form name='AddForm' class='AddForm' method='post' >";
      echo "<span > Date: &nbsp; </span> <input type='textbox' id='datepicker' name='datepicker' > &nbsp;";
      echo "<input type='submit' name='SubBtn' value='Save' >";
      echo "</form>";

      if(isset($_POST['SubBtn']))
      {
          echo $_POST["datepicker"];
      }
   ?>

Nether JavaScript or JQuery does not work from the main file. And form does not post anything if I press the save button. Can anyone suggest how can I make it responsive in the main file where I call ajax function from?

Answer 1

Avoid using IE5/6 support, use jQuery instead:

The problem is that you put all code in the same page, it will not work in that way, you need to make 2 files, 1 for post 1 for result

Good:

test_post.php

<?php
      $Id = $_POST['id'];
      if(!empty($Id)){

          $result = "
                        <script> alert('it works'); </script>
                        <form name='AddForm' class='AddForm' method='post' >
                        <span > Date: &nbsp; </span> <input type='textbox' id='datepicker' name='datepicker' > &nbsp;
                        <input type='submit' name='SubBtn' value='Save' >
                        </form>
                    ";

          echo json_encode(array('status' => 'success', 'result' => $result));
      }
?>

test.php

<select id="QSelector">
   <option value="0">All Values</option>
   <option value="1">Sets for 1</option>
   <option value="2">Sets for 2</option>
   <option value="3">Sets for 3</option>
   <option value="4">Sets for 4</option>
</select>

<div id="OUtputDiv" ></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    var $ =jQuery.noConflict(); 
    $(document).ready(function(){

        $(document).on( "change", '#QSelector',function(e) {
            e.preventDefault();
            var id = $(this).val();
            $.ajax({
                    type: "POST",
                    url:"<?php echo './test_post.php'; ?>",    
                    data: {id: id},
                    dataType: 'json',
                    success: function(data){
                        if(data.status == 'success'){
                            $('#OUtputDiv').html(data.result);
                        }
                    }
            });
        });
    });
</script>