JQuery append problem

vijdev · January 14, 2011

i have a problem wth the area in processData() area below.

what my code does is...

1. takes input via form

2.gets success from a post

3.displays latest form input that was submitted to the server DB

4. asks for add another

5. as you add another, it goes on appending all recent adds to server (processData()) to show as a cue

problem:

first add is ok

second add, appends the input twice.

3rd add appends the input thrice..etc... and so on.

but it must be once only!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Manager</title>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
<script type="text/javascript" src="../scripts/jquery-1.4.4.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
    var g_ID=$('#in').val();
    $('#div_add').hide();
    $('#res').hide();
    $('#recent').hide();
    $('#action2').hide();
    $('#action3').hide();
    $('#fail').hide();
    $('#errorlist').hide();
    
    $('#action1,#action2').click(
    function(){
        $('#action1,#action2,action3').hide();
        $('#fail').hide();
        $('#errorlist').hide();
        $('#in').val('');
        $('#div_add').show();
        $('#in').focus();
        $('#res').hide();
        $('#recent').hide();
        
        $('#form_add').submit(
        function(){
            
var formData = $(this).serialize();
   $.post('baseload.php',formData,processData);
    function processData(data) {
      if (data==' Added!') {
        if (!$('#result').length) {
         $('#res').prepend('<span id="result">...  Added!!</span>');
         }
        if (!$('#rec').length) {
         [color=red]$('#recent').append("<span id='rec'> Added: ");        $('#rec').append(g_ID);        $('#recent').append("</span>");        }        else{            $('#rec').append(",");            $('#rec').append(g_ID);            $('#rec').append(".");        }[/color]
         $('#errorlist').hide();
         $('#res').show();
         $('#recent').show();
         $('#div_add').hide();
         $('#action1').hide();
         $('#action2').show();
         $('#action3').show();
         $('#fail').hide();
         return false;
         }
       else { 
         if (! $('#fail').length) {
           $('#div_add').prepend('<span id="fail">Incorrect  information. Please try again</span>');
        return false;   }
      
       }return false;
    }
    


//end not empty-redundant brkt
    
return false;}//end submit function
)//end submit
        
        
    }//end click function
    ) //end click action1,action2
var url='home.php';    
$('#action3,#action4').click( function()
{
location.reload();   
}
);

    
}//end doc ready func{}
);//end ready()




</script>
</head>
<body>

<a href="#div_add" class="common" id="action1" title="Add an " accesskey="a">Add !</a>



<div id="div_add" title="Add !">

        <form action="baseload.php" id="form_add" name="form_add" method="post" title="Add  to DB">
            <input type="text" id="in" maxlength="200" size="70" title=" In" name="base" />
            <input type="submit" name="b_info" value="Check-In!" id="b_info" />
        <button class="common" id="action4" title="Home" accesskey="h">Cancel!</button>
        
            
            <span id="errorlist" class="errors"></span>
        </form>
        
        <br />
</div>


<div id="res">
<br />
<button class="common" id="action2" title="Add another " accesskey="a">Add Another </button>
<button class="common" id="action3" title="Home" accesskey="h">Am Done for now!</button>
</div>
<div id="recent" class="recent">

</div>
</body>
</html>

haku · January 14, 2011

Try replacing .append() with .replaceWith().

vijdev · January 15, 2011

Try replacing .append() with .replaceWith().

does not work!

Sign In

JQuery append problem

Recommended Posts

vijdev

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

vijdev

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information