如何使用 ColdFusion/jQuery 在同一页面上发布表单、更新查询并显示结果？

Question

目标：

我有一个动态创建大小的大表格（它是一个产品订单表格，输入 type="number"）。填写表格后，用户单击“下订单”按钮，我想在灯箱中（在同一页面上）显示摘要订单以便他们确认。

目前使用的方法：

1) 我将表单发布到页面上的不可见 iframe。

<cfform id="refSubmit" action="/createTable.cfm" method="post" target="hiddenFrame">

2) createTable.cfm 遍历提交的表单字段并在 SQL Server 中创建一个临时表。此部分运行良好。

3）我正在使用jquery .submit() 等待表单提交成功，打开灯箱并在页面上使用.load() 显示确认。

$("input[name*='submit']").click(function(event) {
  var submitButton = $(this);
    // If lightbox is open, then close it.
    if ($("#confirmationLightbox").is(":visible")){
      $("#confirmationLightbox").toggle().children().remove();
      event.preventDefault();
    } else {
      $("#refSubmit").submit();
      $.ajax({
        type: "POST",
        url: "createTable.cfm",
        success: function() {
          // Changing the delay does resolve the issue, but not properly
          $("#changeIconLightbox").toggle().delay(0).queue(function(){
            $(this).load('/includes/inc_lightboxes/orderConfirmation.cfm');
          });
        }
      });
    }
  });

问题：

尽管从 createTable.cfm 创建的表在 100% 的时间都正确构建，但在 orderConfirmation.cfm 中调用查询时，它会在完成构建之前调用该查询。所以输出的不是等待表创建完成。

我知道我的 ajax POST 完全按照应有的方式进行。触发成功线是因为虽然表单数据已经成功发送，但是cfm文件还没有处理完。

问题：

所以，我在这里的原因。如何确保 .load() 行等待执行，直到 createTable.cfm 完成其服务器端处理？如您所见，我确实尝试使用 .delay()。当然，我可以输入一个数字，让用户等待该过程，但这意味着订购 1 件商品的人将与订购 2000 件独特商品的人同时等待。

因为有人问过这个问题，所以这是我用来创建唯一表的代码。

<!--- Create Unique ID for Table --->
  <cfset SESSION.tempOrder = Replace(CreateUUID(),"-","","All")>

  <!--- Create Temp Order Table --->
  <cfquery name="qCreateTempOrder" datasource="#REQUEST.dsn#" username="#REQUEST.dsu#" password="#REQUEST.dsp#">
    CREATE TABLE order_temp_#SESSION.tempOrder#
    ( id INTEGER IDENTITY(1,1) PRIMARY KEY,
    productId INTEGER NOT null,
    quantity INTEGER NOT null
    );
  </cfquery> 

Answer 1

如果其他人访问此页面，我将发布最终工作的结果，并表明我的问题已得到解决。

按照 Miguel-F 的建议，我去掉了表格上的 cf。

<form id="refSubmit">

我的 jQuery 现在看起来像这样。

$("#refSubmit").submit(sendForm);
  var confirmLightbox = $("#confirmationLightbox");
  var placeOrder = $("input[name*='submit']");

  function sendForm(event) {
    if (confirmLightbox.is(":visible")){
      confirmLightbox.toggle().children().remove();
      placeOrder.val("Place Order");
      event.preventDefault();
    } else {
      $('<input name="processing" style="margin: 5px 10px; float: right;" type="button" class="processingButton" value="Processing..." disabled>').insertBefore(placeOrder.hide());
      $.post('process/createTable.cfm',$("#refSubmit").serialize(),function(){
        confirmLightbox.toggle().delay(0).queue(function(){
        $(this).load('/includes/inc_lightboxes/jcorderconfirmation.cfm', function(){
          var confirmOrder = $("button[name*='confirm']");
          placeOrder.show().val("Edit Order");
          $("input.processingButton").remove();
          $("input[name*='confirmOrder']").on("click", function(){
            if($(this).is(':checked')){
              confirmOrder.removeAttr("disabled");
            } else {
              confirmOrder.prop("disabled", true);
            }
          });
          $("button[name*='cancel']").on("click", function(){
            confirmLightbox.toggle().children().remove();
            placeOrder.val("Place Order");
          });
          confirmOrder.on("click", function(){
          alert("Products successfully added to inventory.");
        });
      });
    });
  });
}
return false;
}