CODEWITHSUNDEEP
jquerysqlajaxformscoldfusion
Tim Howey
Tim Howey

Reputation: 145

How do I post a form, update a query and display the results on the same page with ColdFusion/jQuery?

Objective:

I have a large form with a dynamically created size (it's a product order form, input type="number"). After filling out the form, the user clicks the "Place Order" button, and I want to display a summary order in a lightbox (on the same page) so they can confirm.

Currently Used Method:

1) I have the form post to an invisible iframe on the page.

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

2) createTable.cfm loops through the form fields submitted and creates a temporary table in SQL Server. This section is working perfectly.

3) I'm using jquery .submit() to wait for the success of the submission of the form, turning on the lightbox and using .load() on a page to display the confirmation.

$("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');
          });
        }
      });
    }
  });

Problem:

Although the table created from createTable.cfm IS being built correctly 100% of the time, when the query is called in orderConfirmation.cfm, it's calling that query before it's finished building. So what's being outputted isn't waiting for the table to finish being created.

I know my ajax POST is doing exactly as it should be. It's triggering the success line because although the form data has been successfully sent, the cfm file hasn't finished processing.

Question:

SO, the reason I'm here. How do I make sure that the .load() line waits to execute until after createTable.cfm has finished it's server side processing? As you can see, I did attempt to use a .delay(). I can of course, pop in a number, and make the user wait for the process, but that means someone ordering 1 item is going to wait the same time as someone ordering 2000 unique items.

Because this was asked, here is the code I'm using to create the unique table.

<!--- 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>

Upvotes: 3

Views: 1220

Answers (1)

Tim Howey
Tim Howey

Reputation: 145

I'm going to post what ended up working in the event someone else comes to this page, and also to show my problem has been resolved.

As suggested by Miguel-F, I stripped out the cf on the form.

<form id="refSubmit">

And my jQuery now looks like this.

$("#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;
}

Upvotes: 2

Related Questions