Question

目的：

我有一个动态创建大小的大表单（它是产品订单表单，输入类型=＆＃34;数字＆＃34;）。填写完表单后，用户点击＆＃34;下订单＆＃34;按钮，我想在灯箱中（在同一页面上）显示摘要订单，以便他们确认。

目前使用的方法：

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文件还没有完成处理。

问题：

所以，我在这里的原因。在createTable.cfm完成服务器端处理之后，如何确保.load（）行等待执行？如您所见，我确实尝试使用.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;
}

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

1 个答案: