使用Jquery和Ajax更新表

时间：2014-09-30 17:47:49

标签： php jquery mysql ajax

我有一个包含大量内容的大页面，其中一部分是针对日期的价格表。通常，表格如下所示： enter image description here

＆＃34; Previous＆＃34;和＆＃34;下一步＆＃34; links和datepicker使用户能够在表格中显示不同的日期范围。然而，使用简单的html表单和php / mysql，整个页面每次都刷新，看起来非常混乱。我想使用jQuery和Ajax来刷新表。

为此，我使用PHP include（）将表放在一个单独的文件中。这个名为calendar_inner.php的独立文件使用一个名为$ startdate的变量来执行必要的mysql查询以获取表的所有数据。现在我只需要了解如何使用$ startdate的新值来提供包含的文件，然后刷新该文件。这是我在jQuery的黑暗中摸索的地方。

从datepicker开始，我已经开始编写jQuery脚本，但不出所料，它不起作用。

$('#StartDateCal').on('submit', function(g) { 
    g.preventDefault();  //prevent form from submitting
    var startdate = $("#StartDate").val();
    $.ajax ({
        type: 'post',
        url: 'calendar_inner.php',
        data: data,
        dataType: 'text'
    });
});

请温柔地对待我。我偶尔在jQuery上取得的成功仅限于我能够逐字复制别人的代码片段。感谢。

EDIT 我根据Raslett的建议修改了我的脚本，但我还没有达到解决方案。

$('#StartDateCal').on('submit', function(g) { 
    g.preventDefault();  //prevent form from submitting
    $.ajax ({
        type: 'post',
        url: 'calendar_inner.php',
        data: $('#StartDateCal').serialize(),
        success: function(result) {
            $('#getresult').html(result);
        }
    });
});

现在整页不刷新，只刷新calendar_inner.php文件，因此取得了一点成功。我认为现在的问题是如何处理结果。使用上面的代码并放置

<div id="getresult"></div>

在calendar_inner.php的开头，将我的404错误页面插入整个页面。将html（result）更改为text（result）会将404 Error页面的整个代码写入同一空间。我不知道的是脚本生成的内容导致服务器调用404错误页面。

第二次编辑 我摆脱了404错误。我把网址称错了。现在这已得到纠正，我越来越近了，但剩下要做的事情是非常神秘的。该脚本现在将表的第一行写入两次：一次是开始日期为1月1日，第二次是原始开始日期。所以现在我所要做的就是： 1.说服表格行的第一个版本以使用新的开始日期 2.停止显示表格行的第二个版本 3.将开始日期传递到计算和编写价格的表格的下一部分 唷！不容易。

第三次编辑 正如Rasclatt所说，jQuery现在正在工作，我只需要整理calendar_inner.php文件。为简单起见，我只是将前几行放在下面。关键变量是$ startdate，然后驱动其他所有内容。我需要jQuery来改变$ startdate的值。

第四次编辑 更新了calendar_inner.php的代码并展示了更多内容。见下文。

<div id="getresult"></div>
<script>
$(document).ready(function() {
//Submit change of date in price tab without refreshing page
$('#StartDateCal').on('submit', function(g) { 
        g.preventDefault();  //prevent form from submitting
        $.ajax ({
            type: 'post',
            url: '/includes/calendar_inner.php',
            data: $('#StartDateCal').serialize(),
            success: function(result) {
                console.log(result),
                $('#getresult').html(result);
            }
        });
    });
});
</script>
<?php
if(isset($_POST['StartDate']) && !empty($_POST['StartDate'])) {
            $startdate  =   htmlentities($_POST['StartDate'], ENT_QUOTES);
            $firstdate  =   date('Y-m-d',$startdate);
            $lastdate   =   date('Y-m-d',strtotime('+11 days',strtotime($firstdate)));

            // database insertion of above variables
        }else{
            $firstdate = date('Y-m-d',$startdate);
$lastdate = date('Y-m-d',strtotime('+11 days',strtotime($firstdate)));
        }

//Select database
require_once('../Connections/MySQL.php');
mysql_select_db($database_MySQL, $MySQL);
mysql_set_charset("utf8");

// Create a temporary table
$query_temptable = "CREATE TEMPORARY TABLE temptable (dt DATE NOT NULL)";
$result = mysql_query($query_temptable, $MySQL) or die(mysql_error());

//Now loop through the date range and fill the temporary table
$thisdate = $firstdate;
while (strtotime($thisdate) <= strtotime($lastdate)){
$query_insertdate = "INSERT INTO temptable (dt) VALUES ('$thisdate')";
$result2 = mysql_query($query_insertdate, $MySQL) or die(mysql_error());
$thisdate = date('Y-m-d', strtotime('+1 day', strtotime($thisdate)));
}

// MySQL query to get price_id (or blank) for all dates in range
$query_tariff = "SELECT temptable.dt, lh_dates.tariff_id FROM temptable LEFT JOIN lh_dates ON temptable.dt = lh_dates.dt AND hid = '$hid'";
$tariff = mysql_query($query_tariff, $MySQL) or die(mysql_error());

// Create array of tariff_ids
$i = 0;
$tariff_id_list = array();
while ($row_tariff = mysql_fetch_assoc($tariff)) {
$tariff_id_list[$i] = $row_tariff['tariff_id'];
$date_list[$i] = $row_tariff['dt'];
$i++;
}
$tariff_id_unique = array_unique($tariff_id_list);

// Drop the temporary table
$query_droptable = "DROP TEMPORARY TABLE IF EXISTS temptable";
$result3 = mysql_query($query_droptable, $MySQL) or die(mysql_error());

//Here we start building the pseudo-table using divs 
echo "<div class='calendar'>";
// Dates row
echo "<div class='toprow'>"; 
echo "<div class='cal_firstcol'>&nbsp;</div>";
$i = 0;
$thisdate=strtotime($firstdate);
while ($i++ < 12) {
$day_week = date('D', $thisdate); 
$day_num = date('j', $thisdate);
$month_name = strtoupper(date('M', $thisdate));
echo "<div class='cal_dates'>";
echo $day_week."<br><span class='cal_day'>".$day_num."</span><br>".$month_name;
$thisdate = $thisdate+86400;
echo "</div>"; 
}
echo "<div class='clear'></div></div>";

// Room rows
//MySQL query to get rooms
$query_room = "SELECT room_id, roomtype, normalocc, singleocc, extrabed, childbed, cot FROM lh_rooms WHERE hid = '$hid' ORDER BY orderr ASC";
$room = mysql_query($query_room, $MySQL) or die(mysql_error());
while ($row_room = mysql_fetch_assoc($room)) {
foreach ($tariff_id_unique as $value) {
$tariff_id = $value;
$room_id = $row_room['room_id'];
$query_price = "SELECT * FROM lh_prices WHERE tariff_id = '$tariff_id' AND room_id = '$room_id'";
$price = mysql_query($query_price, $MySQL) or die(mysql_error());
$row_price[$value] = mysql_fetch_assoc($price);
}

echo "<div class='row'>"; 
echo "<div class='cal_firstcol'>".$row_room['roomtype']."</div>";
$thisdate = $firstdate;
$i=0;
while (strtotime($thisdate) <= strtotime($lastdate)){
$thisday = strtolower(date('D',strtotime($thisdate)));
echo "<div class='cal_pricecol'>";
if (in_array($thisday, $we_rates)) {
echo $row_price[$tariff_id_list[$i]]['price_we_std'];   
}else{
echo $row_price[$tariff_id_list[$i]]['price_wd_std'];
}
echo "</div>";
$i++;
$thisdate = date('Y-m-d',strtotime('+1 day',strtotime($thisdate)));
}
echo "</div>";

if (($row_room['extrabed']>=1)||($row_room['childbed']>=1)) {
echo "<div class='row hiddenrow' style='display:none'>"; 
echo "<div class='cal_firstcol'>Child Extra Bed</div>";
$thisdate = $firstdate;
$i=0;
while (strtotime($thisdate) <= strtotime($lastdate)){
$thisday = strtolower(date('D',strtotime($thisdate)));
echo "<div class='cal_pricecol'>";
echo $row_price[$tariff_id_list[$i]]['price_eb_c']; 
echo "</div>";
$i++;
$thisdate = date('Y-m-d',strtotime('+1 day',strtotime($thisdate)));
}
echo "<div class='clear'></div></div>";
}

}

echo "</div>"; 
?>

第五次编辑（！） 在回复Rasclatt时，这是脚本运行后表的样子。 enter image description here datepicker，Previous，复选框和Next都在父页面中。从9月30日开始的第一行日期是脚本的结果，第二行日期编码为calendar_inner.php。移动

<div id="getresult"></div>

在页面下方相应地移动第一行日期。 datepicker表单的代码是

<form id="StartDateCal">
<input type="hidden" name="hid" id="hid" value="<?php echo $hid ?>">
<input type="hidden" name="lang" id="lang" value="<?php echo $$ln ?>">
From <input name="StartDate" id="StartDate" class="datebox" size="10" value="<?php echo date('j M Y', $startdate) ?>" type="date"> 
<input name="submit" class="button" id="CalSubmitBtn" type="submit" value="Go">
</form>

1 个答案:

答案 0 :(得分：0)

这应该加载表单，然后脚本将通过AJAX将表自动加载到<div id="get result"></div>容器中。在提交表单时，它应该加载到覆盖表的同一位置。所以，只是为了澄清，你不会运行任何php来在原始加载页面上构建表。所有你运行php的是计算$hid，$$ln和$startdate。您的calendar_inner.php只包含日历代码，加载页面只包含表单和jQuery。

作为一种选择，我在CheckDates(FetchResults)添加了一个首选项，其中FetchResults是容器的名称。只是想要将它加载到不同的容器名称。

<form id="StartDateCal">
<input type="hidden" name="hid" id="hid" value="<?php echo $hid ?>">
<input type="hidden" name="lang" id="lang" value="<?php echo $$ln ?>">
From <input name="StartDate" id="StartDate" class="datebox" size="10" value="<?php echo date('j M Y', $startdate) ?>" type="date"> 
<input name="submit" class="button" id="CalSubmitBtn" type="submit" value="Go">
</form>
<div id="getresult"></div>
<script>
    function CheckDates(FetchResults)
        {
             $.ajax ({
                type: 'post',
                url: '/includes/calendar_inner.php',
                data: $("#StartDateCal").serialize(),
                success: function(result) {
                 $("#"+FetchResults).html(result);
                }
            });
        }
    $(document).ready(function() {
        // Auto load ajax
        CheckDates('getresult');
        // On submit load ajax
        $('#StartDateCal').submit(function() {
            // Add a loader image or text so you know it's refreshing
            $('#getresult').html("Loading...");
            // Run table loader
            CheckDates('getresult');
            return false;
        });
    });
</script>
相关问题
最新问题