Member Avatar for reco21

Hi.

I'm making a form with some fields. Once the form is submitted it updates the page with a new div containing the data entered without refreshing. Im using jquery form plugin. What I'd like to achieve is the new div(.record) to .slideDown.

I guess I need to somehow specify the exact div by giving it an id or number. I'm not sure and why im here.

At the moment when i submit all of the divs(.record) are hidden with .hide, then they all slide down with .slide. Best i can understand is to hide the last div then slide down. But again.. I don't know how to specify to only slide down the last div added and not the current .record divs on the page.

Here is what i have.

$(document).ready(function() {
    $('#myForm').ajaxForm({
      beforeSubmit: function() {
       $('.record').hide();},
      target: '#showdata',
      success: function() {
        $('.record').slideDown('slow');
      }
    });
  });

my form

<form id="myForm" action="data.php" method="post">
   
      <div>
        <label>Name*:</label>
        <input type="input" name="name" maxlength="20" />
      
        <label>age*:</label>
        <input type="input" name="age" />
      
        <input type="submit" value="Submit" />
      </div>
  
  </form>

my data action page

<div id="showdata">
  <div class="record">Name:john Age:22</div>
  <div class="record">Name:mike Age:23</div>
  <div class="record">Name:jason Age:24</div>
<div>

This works well when it's the first div added and no other (.record divs) on the page. but when there is currently record divs on the page they all hide and all slide.

Any help please and thanks.

  • 3 Contributors
  • 3 Replies
  • 252 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by reco21

Dani AI

Generated

Good call by and useful follow-up from — the real issue is not the animation itself but how the new node is inserted and targeted. Hiding every .record and then animating them all causes the flicker you saw. Instead, let the server return the new record (or return JSON and build the record on the client), insert that single element hidden into #showdata, then animate only that element. That keeps existing records visible, makes the UI snappier, and avoids ordering bugs that can happen if you rely on DOM position selectors alone.

A robust client-side pattern (server returns JSON) looks like this:

// example: server returns { id: 123, name: "John", age: 22 }
var rec = $('<div/>', {
  "class": "record",
  "data-id": json.id,
  html: 'Name: ' + json.name + ' Age: ' + json.age
}).hide();

$('#showdata').append(rec);
rec.slideDown(300);

If your server returns HTML instead of JSON, create a jQuery object from that response, extract the new record node, hide it, append it, then animate it — that approach avoids selecting ".record" elements globally and is safer than always using a positional selector.

Quick troubleshooting and best-practice notes:

  • Don’t call .hide() on every .record in beforeSubmit; only hide the element you plan to animate.
  • Assign a stable identifier (use a server id in id or data-id) so later delete/edit actions target the exact record; attach handlers via event delegation on the container.
  • If animation looks jumpy, check CSS (display, margins, floats) and images — wait for images to load or animate opacity/height instead.
  • If multiple submissions can happen concurrently, animating the reference you just appended is much more reliable than relying on “last” selectors.

These tweaks make the insert/animate flow deterministic and easier to extend (delete/edit, sorting, pagination) later.

Recommended Answers

All 3 Replies

Member Avatar for ckchaudhary

If all u want to do is to show(slidedown) only the last div then instead of

$('.record').slideDown('slow');

you'll have to use

$('.record:last').slideDown('slow');
commented: thanks that's what i was looking for. +1
Member Avatar for ddymacek

I would add an id to each record div
and put a hidden field on the page containing the last id. and increment as each user is added and you can keep track of what record div you are controlling.

Member Avatar for reco21

Excellent. In my case its record:first but this was my fix. Thanks, ckchaudhary.

id is a good method too. I'll be adding that in order to delete.

Anyhow, thanks very much everyone.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.