Editable form fields?

[__]

Could you just listen for the textarea to lose focus? or maybe a hotkey like ctrl+enter?

[chrisburton]

Could you just listen for the textarea to lose focus?

Exactly. Do you or @TheDoc have any particular favorite documentation (tutorials) on using AJAX with databases?

[__]

I imagine updating on keyup would be too much for the DB…

Also, I am of the firm belief that everything-I-type is not necessarily what-I-want-to-save. I prefer saving to be a deliberate action.

[chrisburton]

@TheDoc @traq This is for my own personal use. I’m not worried about UX here.

@TheDoc I have not tried your example just yet. I was looking for documentation to which I could learn rather than copy/paste.

[__]

Well, if you don’t want to rely on blur, you could listen to keyup but, instead of updating right away, start a timer and then update if there are no further keypresses within 5 seconds or so (or, of course, if the textarea does blur).

As for tutorials, what are you looking for? event listeners? ajax? Are you using jQuery or plain js?

[chrisburton]

As for tutorials, what are you looking for?

Using AJAX with database queries. Preferably one that isn’t over my head. I’ll do my own research but just wanted to know if there were any that you have used in the past that you like.

Are you using jQuery or plain js?

Currently not using jQuery for anything but since jQuery is easier for me, I would probably go with that for AJAX.

P.S. What does blur do in jQuery?

Edit: found this:

The onBlur event handler is fired when the focus is moved away from that particular text area.

[__]

TheDoc’s example was basically it.

(it looks like this after you convert it to javascript)

var request;

request = $.ajax({
  type: "POST",
  url: "payment.php",
  dataType: "json",
  async: true,
  data: {
    stripeToken: token.id,
    email: token.email,
    name: args.billing_name,
    address: args.shipping_address_line1,
    city: args.shipping_address_city,
    state: args.shipping_address_state,
    zip: args.shipping_address_zip,
    country: args.shipping_address_country
  }
});

request.done(function(customer) {
  return console.log(customer);
});

request.fail(function(jqXHR, textStatus) {
  console.log(jqXHR);
  return console.log(textStatus);
});

Once you understand how to send the POST, and that PHP’s response needs to be in a particular format (e.g., json), it’s no more complicated than any other form submission+processing.

[chrisburton]

I’ll have to study this in a few days. I’m traveling on Friday until early next week. A lot of things to do before then. Thanks, guys!

[chrisburton]

So I keep getting the following error

Uncaught ReferenceError: client is not defined

$('textarea').blur(function(){

  var request;

  request = $.ajax({
    type: "POST",
    dataType: "json",
    async: true,
    data: {
      id: client.id,
      name: client.name,
      address: client.address,
      phone: client.phone,
      day: client.day,
      paid: client.paid,
      owe: client.owe,
      completed: client.completed
    }
  });

  request.done(function(customer) {
    return console.log(customer);
  });

  request.fail(function(jqXHR, textStatus) {
    console.log(jqXHR);
    return console.log(textStatus);
  });

});

I know we’ve touched on this being a solution but I’m not really understanding this script. Wouldn’t I need to POST to the session and then update the database with the new session data? This doesn’t seem like it does that but rather posts data to a URL (which I stripped from the script).

[__]

Uncaught ReferenceError: client is not defined

Well, that means that client (where you’re getting the id, name, and so forth from) isn’t available. Are you sure that object is available by the time the ajax call is made? are you sure client is the right name?

Wouldn’t I need to POST to the session and then update the database with the new session data? This doesn’t seem like it does that but rather posts data to a URL (which I stripped from the script).

The url you should POST to is whatever php script you have that updates the database. It’s exactly like a normal form submission in that regard. If you want to put the data in the session as well, I suppose that’s fine, but I don’t see the need.

[chrisburton]

@traq

Just in case we’re both not on the same page, I have a form where I submit the data to the database. Then, I output that data inside textarea elements. This data needs to be updated from time to time so I figured I could just change the values inside the textarea elements when needed and it could update inside the database.

CodePen.
Gist.

Oh and the textarea elements do not have name attributes. I think this may be why I’m having issues?

The url you should POST to is whatever php script you have that updates the database.

You mean INSERT? If I need to create an UPDATE, I can do that. This may be making a bit more sense now.

[__]

crap… I just spent an hour on a response and then spelled “jQuery” with ctrl+q instead of shift+q.

You’re going to need to make some organizational changes for your code. For example, the PHP that you use to INSERT to the database is wrapped up with your HTML output —which makes it difficult to access it via AJAX. This is analogous to the problems with “inline” javascript: it’s easy to write, but it only works in one way, in one particular process. Instead, you need a plugin, in an external file. So, we should take all of your PHP that “does stuff” and put them into functions that can be called selectively.

On the front-end of things, you’re going to need a way for javascript to actually retrieve the values you want to send in the ajax call.

To get us on the same page, are we talking about updating old data, inserting new data, or both?

Let me type up some things. I’ll post again soon.

[chrisburton]

@traq

crap… I just spent an hour on a response and then spelled “jQuery” with ctrl+q instead of shift+q

Damn! On Windows, does that exit the browser?

So, we should take all of your PHP that “does stuff” and put them into functions that can be called selectively.

Not a problem! Let me take some time to learn about PHP functions so that I can do what is necessary. I’ve never worked with them but it’s a great way to start.

To get us on the same page, are we talking about updating old data, inserting new data, or both?

Uh. Good question. What I want to do is take what is already in the database that is outputted on the page and update it once the user changes a value and clicks out of the textarea. Does that make sense?

[__]

Damn! On Windows, does that exit the browser?

Dunno. Chrome on Linux, it exits the browser.

PHP functions … I’ve never worked with them but it’s a great way to start.

syntax is basically like javascript, but scoping is different. Variables are always local to the function, and global variables are not accessible inside the function. (There is the global keyword, but you shouldn’t ever use it.)

What I want to do is take what is already in the database that is outputted on the page and update it once the user changes a value and clicks out of the textarea. Does that make sense?

Absolutely. So, for now, we’re dealing with updating your existing records, not creating new ones.

[chrisburton]

syntax is basically like javascript, but scoping is different. Variables are always local to the function, and global variables are not accessible inside the function. (There is the global keyword, but you shouldn’t ever use it.)

I’m only familiar with a tiny bit of jQuery, unfortunately. I’ve been watching tutorials on the very basic aspects of what you can do with functions and at this point what I know about functions is that I can set it up and call it later. However, I’m not quite sure how or why using a function would suffice in my situation. Not that I disagree with you, I’m just trying to figure out the logic in using it.

Absolutely. So, for now, we’re dealing with updating your existing records, not creating new ones.

Yes, exactly.

[Author]

Posts