文章/答案/技术大牛

发布

社区首页 >问答首页 >CFform和Jquery提交而不刷新

问CFform和Jquery提交而不刷新
EN

Stack Overflow用户

提问于 2014-04-08 00:09:03

回答 1查看 1.1K关注 0票数 0

我有一个相当简单的CFform，用于使用JQuery提交记录并将其添加到数据库中，而无需刷新页面。

我的主页使用#include-from- with调用一个带有表单代码的页面：

<div class="vehicle-log" id='include-from-outside'></div>
  <script type='text/javascript'>
  $('#include-from-outside').load('trip_tab.cfm?ticketid=<cfoutput>#url.ticketid#</cfoutput>');
</script>

包含表单的页面实现了jquery-tabs，以在一个选项卡上显示表单，并在另一个选项卡上显示提交的记录的摘要。

<!---Calendar Script--->
<script>
  $(function() {
    $( "#vdate" ).datepicker();
  });

   $(function() {
    $( "#tabs" ).tabs();
  });
</script>

<script>
$(document).ready(function () {
      //Send the serialized data to mailer.php.
      $('#addmileage').submit(function (e) 
      {          
        e.preventDefault();
        $.ajax({
        data: $('#addmileage').serialize(),
        type:'POST',
        url:'actionpages/add_trip.cfm?ticketid=<cfoutput>#url.ticketid#</cfoutput>',
        success: function (response)
            {
                //do after response.
            }
        });
    });
});

</script>

<!---Odometer Totaling --->
<script type="text/javascript" src="Scripts/odometersum.js" language="javascript"></script>

</head>

<body>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Mileage Log</a></li>
    <li><a href="#tabs-2">Trips</a></li>
  </ul>
  <div id="tabs-1">

            <!---Get current ticket from DB --->
            <cfoutput>
            <cfquery name="get_ticket" datasource="#datasource#">
            select *
            from service_ticket
            where ticket_id = #url.ticketid#
            </cfquery>
            </cfoutput>

            <!---Get current trips for this ticket --->
            <cfoutput>
            <cfquery name="get_trips" datasource="#datasource#">
            select *
            from vehicle_log
            where ticket_id = '#url.ticketid#'
            </cfquery>
            </cfoutput>

            <cfquery name="get_vehicles" datasource="#datasource#">
            select *
            from vehicles
            where active = '1'
            </cfquery>

    <cfform name="addmileage" id="addmileage" method="post" class="vehicle-log-form">
             <br />
<table border="0" cellpadding="5">
                      <tr>
                        <td><label class="vehicle-log-form">Service Vehicle:</label></td>
                        <td><cfselect class="vehicle-log-form" queryPosition="below" name="vehicle_name" id="vehicle_name" value="vehicle_name" bind="cfc:cfcs.mileagedata.getData()" bindonload="true" >
                        </cfselect>                    </td>
                      </tr>
                      <tr>
                        <td><label class="vehicle-log-form">Date:</label></td>
                        <td><cfinput class="vehicle-log-form" name="vdate" id="vdate" type="text" required="yes" />                          &nbsp; <a href="javascript:;" onclick="displayDatePicker('vdate');"></a></td>
                      </tr>
                      <tr>
                        <td>
                          <label class="vehicle-log-form">Origin:</label></td>
                        <td><cfinput class="vehicle-log-form" required="yes" name="origin" type="text" /></td>
                      </tr>
                      <tr>
                        <td><label class="vehicle-log-form">Destination:</label></td>
                        <td><cfinput required="yes"  class="vehicle-log-form" name="destination" type="text" /></td>
                      </tr>
                      <tr><!---onBlur="stopMaterialCalc();" onFocus="startOdometerCalc();" bind="cfc:cfcs.mileagedata.getDetail({vehicle_name})" bindattribute="value" bindonload="true" ---> 
                        <td><label class="vehicle-log-form">Start Odometer:</label></td>
                        <td><cfinput class="vehicle-log-form" id="start_odometer"  name="start_odometer" type="text"  /></td>
                      </tr>
                      <tr><!---onBlur="stopMaterialCalc();" onFocus="startOdometerCalc();" bind="cfc:cfcs.mileagedata.getDetail({vehicle_name})" bindattribute="value" bindonload="true" --->
                        <td><label class="vehicle-log-form">End Odometer:</label></td>
                        <td><cfinput class="vehicle-log-form"  id="end_odometer" name="end_odometer" type="text"  /></td>
                      </tr>
                      <tr>
                        <td><label class="vehicle-log-form">Total mileage:</label></td>
                        <td><cfinput class="vehicle-log-form" id="total_mileage" name="total_mileage" type="text" /></td>
                      </tr>
                      <tr>
                        <td><label class="vehicle-log-form">Expenses:</label></td>
                        <td><cfinput class="vehicle-log-form" value="0.00" name="expenses" type="text" /></td>
                      </tr>
                      <tr>
                        <td colspan="2">
                        <!---If ticket isn't saved yet, disable the button --->
                        <cfif #get_ticket.recordcount# eq '0'>
                        <cfinput class="vehicle-log-form" type="submit" name="submit" id="submit" value="Add Trip"  disabled="disabled"/> 
                        <span class="style3">Ticket must be saved first.</span>
                        <cfelse>
                       <cfinput class="vehicle-log-form" type="submit" id="submit" name="submit" value="Add Trip">
                        </cfif>                        </td>
                      </tr>
                </table>
    </cfform>




  </div>

  <div id="tabs-2">



 <!---Get current trips for this ticket --->
            <cfoutput>
            <cfquery name="get_trips" datasource="#datasource#">
            select *
            from vehicle_log
            where ticket_id = '#url.ticketid#'
            </cfquery>
            </cfoutput>

            <br />
<br />

            <cfif #get_trips.recordcount# eq 0>
            <table width="100%" class="vehicle-log-table" id="vehicle-log-table" border="0" cellpadding="5">
                <tr class="vehicle-log-table" bgcolor="#cccccc">
                  <td class="vehicle-log-table"><div align="center"><strong>Date</strong></div></td>
                  <td class="vehicle-log-table"><div align="center"><strong>Mileage</strong></div></td>
                  <td class="vehicle-log-table"><div align="center"><strong>Expenses</strong></div></td>
                  <td class="vehicle-log-table"><div align="right"></div></td>
                </tr>
                <tr class="vehicle-log-table">
                  <td colspan="4">No Trips Exist</td>
                </tr>
                </table><br />

            <cfelse>    
                <table width="100%" class="vehicle-log-table" border="0" cellpadding="5">
                <tr class="vehicle-log-table" bgcolor="#cccccc">
                  <td class="vehicle-log-table"><div align="center"><strong>Date</strong></div></td>
                  <td class="vehicle-log-table"><div align="center"><strong>Mileage</strong></div></td>
                  <td class="vehicle-log-table"><div align="center"><strong>Expenses</strong></div></td>
                  <td class="vehicle-log-table"><div align="right"></div></td>
                </tr>
                <cfoutput>
                <cfloop query="get_trips">

                <tr class="vehicle-log-table">
                  <td class="vehicle-log-table">#DateFormat(get_trips._date, "mm-dd-yyyy")#</td>
                  <td class="vehicle-log-table"><div align="center">#get_trips.total_mileage#</div></td>
                  <td class="vehicle-log-table"><div align="center">#get_trips.expenses#</div></td>
                  <td class="vehicle-log-table"><div align="right"> 
                  <cfform name="delete" action="">
                  <cfinput class="vehicle-log-form" type="submit" id="delete" name="delete" value="Delete">
                  <cfinput type="hidden" id="hidden" name="hidden" value="#get_trips.id#">
                  </cfform>           
                 </div></td>
                </tr>



            </cfloop>
            </cfoutput>
          </table><br />
</cfif>

当用户单击submit按钮时，它会在没有错误或页面刷新的情况下提交，并成功地将记录添加到my DB。

但是，如何才能只刷新jquery-tabs元素来显示新添加的记录呢？我相信这很简单，但我是一个jquery新手。

谢谢，布赖恩

jquery

coldfusion

回答 1

Stack Overflow用户

发布于 2014-04-08 00:31:29

我所做的是进行ajax调用，给我一个HTML，我可以在其中以我想要的格式放置数据，以便所有样式都可以应用于此。如果您正在使用一些MVC框架，您可以在ajax中调用您的控制器，然后处理该数据，将其发送到DB，并返回一个HTML，其中包含您希望在响应中显示的数据。一旦你得到了你的响应并且它是一个HTML，你只需要这样做：

$.ajax({
    data: $('#addmileage').serialize(),
    type:'POST',
    url:'actionpages/add_trip.cfm?ticketid=<cfoutput>#url.ticketid#</cfoutput>',
    success: function (response)
        {
            $(ElementOrElementsYouWantToRefresh).html(response)
        }
    });

因此，通过这种方式，您可以将响应提供给您的html放入要放置内容的元素中。我所做的是更改您想要的一个或多个元素的HTML内容，以便它们显示ajax调用的响应

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22917600

复制

相似问题

问CFform和Jquery提交而不刷新
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CFform和Jquery提交而不刷新EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CFform和Jquery提交而不刷新
EN