Allowing time for Airtable to create record within jQuery script

[Dan_Peck]

Newbie trying to get my feet wet using a custom form to create new records. I am following the samples provided with the API documentation but the script completes before Airtable is able to finish it’s create function. I didn’t realize that was the problem until I threw in an alert() command to help me debug. That’s when the record would appear in my table.
Looking forward to smacking my forehead when someone shows me some simple thing I am overlooking to stay in the script until Airtable is ready.
Mahalo. (Hawaiian thank you )

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="js/airtable.browser.js"></script>
			
<script>

$(document).ready(function(){
	  
  var Airtable = require('airtable');
  var base = new Airtable({apiKey: 'keyXXXXXXXXXXXXXXX'}).base('appt4hr3kqdqXXXXX');
       
$('button#submit-bin').click(function() {

     base('Parchment').create(
       {
        "Tag": "3333",
        "bin#": 1
       }, 
       function(err, record)
       {
         if (err)
         {
           console.error(err);
           return;
         }
         console.log(record.getId());
        });  
});  
}); 
</script>

[Bill_French]

Hi Dan and Aloha! (kama’aina here - married Waimea Falls 38 yrs ago last week)…

Dan_Peck:

some simple thing I am overlooking to stay in the script until Airtable is ready.

The simple thing you’re missing is a promise - specifically of the JQuery flavour. I don’t work in JQuery much but I think the solution is to look at some HTTP POST examples where JQuery is used with APIs. I believe a JQuery POST already supports promises.

And actually, as I study your code, it may just be as simple as adding a promise to the button.

[Dan_Peck]

Aloha Bill,

Thank you for the reply. I had been experimenting with placements of .when() & .then() methods in various places, and now I have done the same with the promise/done methods. Obviously I’m not applying them correctly, and haven’t come across an example anywhere yet that looks close enough to copy. I’ll keep trying, but hopefully someone will be able to add some more specificity to my code that can help get me over the hurdle here. Such as, do I need to add method=“post” in my ?
(Kaua’i)

[Bill_French]

Dan_Peck:

I had been experimenting with placements of .when() & .then() methods in various places, and now I have done the same with the promise/done methods. Obviously I’m not applying them correctly

@kuovonne, I’m totally slammed on a project. Can you step in on this promises question which I know you can answer in your sleep. :winking_face:

@Dan_Peck, you’re in good hands with @kuovonne and be sure to mark it resolved by her when you get your answer running.

[kuovonne]

I don’t think it is an issue with promises. If it were just an issue with promises, I would expect the record to be created in Airtable, even if the response weren’t logged to the console.

Is the code that you included in your post the entire code, or is there more?
Where did you put the alert() command?
Do you get any other messages in the console?
Could you have a bug somewhere else in the code that prevents the event handler from being attached to the button? If you have the button also log a message to the console, does that message appear?
If you try to create the record immediately after var base = new Airtable ..., does it work?

[Dan_Peck]

@kuovonne, thank you for injecting those questions. I realized that nothing had been appearing in console, even when it falls outside of the .create() function. So I tried a couple of things and I put the script and the rudimentary form code below. I made a stand alone button id=“other-button” and it’s function logged to the console. Then I had #other-button invoke the create record function, and it worked! So now I think the question is, what is it about the #submit-bin button within the form that prevents it from working properly? I don’t really need it to be there, I can still retrieve the values from it to create the records.

<script>

$(document).ready(function(){
	  
  var Airtable = require('airtable');
  var base = new Airtable({apiKey: 'keyLtUUCaXXXXXXXXX'}).base('appt4hr3kqdqMSpu0');
  
  var myAddBin = document.addbin; 
    
$('button#submit-bin').click(function() {

     base('Parchment').create(
       {
        "Tag": "3333",
        "bin#": 1
       }, 
       function(err, record)
       {
         if (err)
         {
           console.error(err);
           return;
         }
         console.log(record.getId());
        });  
//    alert('#submit-bin');
    console.log('#submit-bin');        
});  
 
$('button#other-button').click(function() {

  console.log('#other-button');
});

}); // end of $(document).ready 


</script>
<style>
	
	.my-form{
	  padding:40px 60px;
	 }
	 
	</style>
  </head>
  <body>

<div class="my-form">
<form method="post" class="pure-form pure-form-stacked">
    <fieldset>
        <div class="pure-g">
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="tag">Bin Tag #</label>
                <input type="text" id="tag" class="pure-u-23-24" />
            </div>
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="row">ROW</label>
                <input type="number" id="row" class="pure-u-23-24" />
            </div>
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="spot">SPOT</label>
                <input type="number" id="spot" class="pure-u-23-24" />
            </div>
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="elev">ELEV</label>
                <input type="number" id="elev" class="pure-input-23-24" />
            </div>
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="elev">Bin No.</label>
                <input type="number" id="bin" class="pure-input-23-24" />
            </div>        
        </div>
        <button  id="submit-bin" class="submit-bin pure-button pure-button-primary">#submit-bin</button>
    </fieldset>
</form>
</div>

<div id="bins">
<button id="other-button" class="pure-button pure-button-primary">#other-button</button>

</div>

I should be able to start building the more sophisticated form, but I still would like to understand why the original button wasn’t working. Thank you.

[Bill_French]

kuovonne:

I don’t think it is an issue with promises. If it were just an issue with promises, I would expect the record to be created in Airtable, even if the response weren’t logged to the console.

Pretty sure he said that It did create a record after adding an alert() test - ergo, a script blocking issue.

… the script completes before Airtable is able to finish it’s create function. I didn’t realize that was the problem until I threw in an alert() command to help me debug.

[kuovonne · Accepted solution]

Thank you for coming back with more information, and a larger piece of code. What browser are you using and what do the browser and console display after you click the #submit-bin button?

Since .create() works for #other-button, the problem is not related to promises or how .create() is used. The problem is with the button in the form.

Notice that you do not specify a button type for #button-bin. Because the #submit-bin button is in a form, it defaults to the type submit. Clicking the submit button sends the form data the server and navigates away from the page (possibly back to the same page). This submit action is conflicting with the create call. The exact nature of the conflict is a bit browser dependent.

If you change the code to react to a different action (that does not also submit the form), the code should run okay. If you change the button to explicitly be a “button” type, instead of a submit button, the code should run okay.

I also recommend testing in different browsers.

---

If this answers your question, please mark this post as the solution. Otherwise, could you please give a bit more details?

[Dan_Peck]

Thank you @kuovonne for helping to clear this up! I have been working in Chrome, which did not report anything to the console. I ran the #submit-button in Firefox and it generated this error msg:

which I bet is meaningful to some of you. I am looking forward to proceeding on with just using a plain button type.
And mahalo @Bill.French for geting the juices flowing!