.html() and .detach() fire too soon - before .slideUp() even starts, how can I control the order?
Code below controls the form validation output: shows the "error String" right under the input element that didn't validate. My plan was:
1. Check if there is an element I'm about to create. (e.g. <p class=".alert">First Name is required</p>)
2. If it exists:
-slide it up
-edit it with new information
-detach it
If it doesn't:
-create it
-apply display:none
3. Insert where it is needed
4. Slide it down.
That's the idea. First run (creation) is ok. On the other hand, when information changes it runs in that order:
- edits information
- detaches and gets inserted
- slidesUp
- slidesDown
It really pisses me off... Do you have any idea how to solve it?
- function ErrObj() {
- this.create = create_p_alert;
- this.edit = edit_p_alert;
- this.insert = insert_after;
- };
- function create_p_alert (errStr, giveClas) { //errStr comes from validating func, giveClass is for later use - for finding and editing the element
- var parag = $(document.createElement('p'));
- parag.html(errStr);
- if (giveClas || !giveClas.lenght==0){
- parag.addClass(giveClas).css('display','none');
- }
- return parag;
- }
- function edit_p_alert (errStr, findClas) { //if p.findClass exsists i don't create another one - i need only one at the time - i edit the existing one.
- var slctrStr = '.'+findClas,
- parag = $(slctrStr);
- return parag.slideUp().html(errStr).detach();
- }
- function insert_after (obj, after) {
- $(obj).insertAfter(after).slideDown();
- }
- if ($('.'+clas).size()>0) {
- p = errAlert.edit(strError, clas);
- } else {
- p = errAlert.create(strError, clas);
- };
- errAlert.insert(p, objValue);
- return false;