HTML表单GET结果显示在目标div中，然后立即消失

时间：2015-06-12 16:33:06

标签： php jquery mysql css

我在StackOverflow上发现了5-6个类似的问题，但是我无法看到与我的代码的相关性 - 他们似乎是一种不同的方法 - 所以我无法从他们那里挤出一个解决方案

基本上，当我调用我的report.html页面并输入有效日期时，例如2015-06-01和2015-06-12，选择交易“A”并点击提交...简要结果表出现在底部的目标div中......然后立即消失。

另一个奇怪的事情是，当我点击浏览器上的后退按钮时，结果是我的结果（它保持不变）！

另一件事：如果我添加action =“ajaxFunction（）”，结果会显示并停留（尽管我的屏幕中间还有一个很好的大jQuery Mobile错误消息框，持续几秒钟）

无论如何，我想我已经关闭了。代码如下。谢谢！

report.html 

<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<title> Report</title>
<link rel="stylesheet" href="css/style_report.css" type="text/css">
<link rel="stylesheet" href="../../../jquery-mobile/demos/css/themes/default/jquery.mobile-1.4.5.min.css">
</head>
<body>

<div data-role="page"  id="pageone">
<div data-role="panel" id="myPanel">  

    <form name="sqlForm" method="" action="" id="sqlForm" >

    <div class="date-range">
        <p>Choose a date range</p>
        <div><input type="text" id="startDate" name="startDate" data-role="date" data-date-format="yy-mm-dd"></div>
        <p>to</p>
        <div><input type="text" id="endDate" name="endDate" data-role="date" data-date-format="yy-mm-dd"></div>
    </div>  

    <div class="deal_type">
        <p>Choose one or more deals</p>   
        <select name="dealCode" id="dealCode">
        <option value="*">Select a deal</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
        <option value="D">D</option>
        <option value="E">E</option>
        <option value="F">F</option>
        <option value="G">G</option>
        <option value="H">H</option>
        <option value="I">I</option>
        <option value="J">J</option>
        <option value="K">K</option>
        <option value="L">L</option>
        <option value="M">M</option>
        <option value="N">N</option>
        <option value="O">O</option>
        </select>
    </div>

    <input data-rel="close" type="submit" id="submit" value="Submit" onclick="ajaxFunction()" value="Query MySQL" >
    </form>

<!-- BUTTON HERE TO GO TO RESULTS AND CLOSE PANEL  -->
</div><!-- PANEL ENDS -->

<div class="wrapper">
<h1>REPORTS</h1>

<div data-role="main" class="ui-content"> 
<!-- PANEL BUTTON -->
<a href="#myPanel" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-btn-icon-left ui-icon-bars">
Filter results</a>

<div id="sqlTable" style="background-color:yellow; height:auto;">Person info will be listed here...</div>

</div>
</div>
</div>

<script src="../../../jquery-mobile/demos/js/jquery.js"></script>
<script src="../../../jquery-mobile/demos/js/jquery.mobile-1.4.5.min.js"></script>
<script src="http://cdn.rawgit.com/jquery/jquery-ui/1.10.4/ui/jquery.ui.datepicker.js"></script>

<!-- JQuery datepicker -->
<!--Datepicker relevant external files-->
<script src="https://rawgithub.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.js"></script>
<script src="https://rawgithub.com/jquery/jquery-ui/1.10.4/ui/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.css">


<!-- SCRIPT TO SET UP THE DATEPICKER CORRECTLY -->
<script>
$(document).ready(function () {
    $.datepicker.setDefaults({
        dateFormat: 'yy-mm-dd'
    });

    $(document).on("click", "#date1", function () {
        var viewportwidth = $(window).width();
        var datepickerwidth = $("#ui-datepicker-div").width();
        var leftpos = (viewportwidth - datepickerwidth) / 2;
        $("#ui-datepicker-div").css({
            left: leftpos,
            position: 'absolute'
        });
    });

    $("#date1").datepicker({
        onSelect: function () {
            alert("HAHA");
        }
    }); 
}
);
</script> 

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){

    var ajaxRequest;  // The variable that makes Ajax possible!

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('sqlTable');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;

        }
    }
    var startDate = document.getElementById('startDate').value;
    var endDate = document.getElementById('endDate').value;
    var dealCode = document.getElementById('dealCode').value;
    var queryString = "?startDate=" + startDate + "&endDate=" + endDate + "&dealCode=" + dealCode;
    ajaxRequest.open("GET", "getReport.php" + queryString, true);
    ajaxRequest.send(null); 
}

console.log("ffff", "startDate="+str1+"&endDate="+str2+"&dealCode="+str3);

</script>

</body>
</html>

getReport.php 

<?php

    // MAKE THE MAIN CONNECTION, AND GIVE IT A NAME, 'CON'
    $con = mysqli_connect("URL", "USERNAME", "PASSWORD", "DB");

    if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

    // THE INFO AFTER THE COMMA, "MAIN_REPORT", APPEARS TO BE USELESS, BUT HAS TO BE THERE.
    mysqli_select_db($con,"MAIN_REPORT");


    //GRAB THE STUFF FROM THE HTML FORMS    
    $startDate = $_REQUEST['startDate'];
    $endDate = $_REQUEST['endDate'];
    $dealCode = $_REQUEST['dealCode'];


    // MAKE YOUR OVERALL QUERY HERE.
    $sql="SELECT * FROM `oasis_bagels` WHERE `dealDate` > '$startDate' AND `dealDate` < '$endDate' ORDER BY `dealDate`";  

    $result = mysqli_query($con,$sql);

    // THIS TESTS YOUR QUERY, OFTEN GIVING YOU A HELPFUL ERROR MESSAGE
    if (!$result) {
        printf("Error: %s\n", mysqli_error($con));
        exit();
    }

    ?>

 <?php /*?>  $all = mysqli_query(
        $con,
        //"SEL
        SELECT * FROM `oasis_bagels` WHERE `dealCode` = ' "$q" ';
        // SELECT * FROM `oasis_bagels` WHERE `dealDate` > '$startDate' AND `dealDate` < '$endDate'
        // SELECT * FROM `oasis_bagels` WHERE `dealDate` > '2015-01-01' AND `dealDate` < '2100-01-01'
       // WHERE dealCode=*"
    );
<?php */?>


    <!-- ////////////////////////////////////////////////////////// -->
    <!-- THE CODE BELOW GIVES ME THE DATE AND TIME RESULTS I WANT. 
    NONE OF THIS SHOULD CHANGE, AS IT'S ONLY FORMATTING THE RESULTS.  -->
    <!-- ////////////////////////////////////////////////////////// -->

        <table border="1" cellpadding="4" cellspacing="4" bordercolor="#CFCBCB">

          <tr class="header">
          <th>Purchased</th>
          <th>Code</th>
          <th>Name</th>
          <th>Value</th>
          </tr>

      <?php while ($row = mysqli_fetch_array($result)): ?>
          <?php $date = $row['dealDate']; ?>
          <?php $code = $row['dealCode']; ?>
          <?php $name = $row['dealName']; ?>
          <?php $value = $row['dealValue']; ?>               

          <tr>
          <td>
          <span class="date">
          <?php 
          $PhpDate = strtotime($date);
          $FormattedPhpDate = date('m/d/y', $PhpDate );
          echo $FormattedPhpDate; 
          ?></span><br>
          <span class="time"><?php 
          $PhpDate = strtotime($date);
          $FormattedPhpDate = date('(g:i A)', $PhpDate );
          echo $FormattedPhpDate; 
          ?></span>
          </td>
          <td class="code"><?php echo $code; ?></td>
          <td><?php echo $name; ?></td>
          <td><?php echo $value; ?></td>
          </tr>

      <?php endwhile; ?>
  </table>

<?php mysqli_close($con); ?>

1 个答案:

答案 0 :(得分：1)

将提交按钮更改为... 

<button type="button" data-rel="close" id="submit" value="Query MySQL" >
<input style="display: none;" type="submit" id="realsubmit">

并添加此内容...... 

    $("#submit").on('click', function() {
        // do some stuff
        $("#realsubmit").trigger('click');
        return false;
    });
相关问题
最新问题