jQuery.ajax - Duplicate Content After Posting Data Back To The Same Page

Question

Problem 1: My content overlaps itself twice after I post some data back to the same page using jQuery.ajax(). The reason why I'm posting data back to the same page is because I need to pass my JavaScript values to the PHP side.

Question: How do I edit my code such that there will only be 1 copy of my content, before and after posting of data to the same page?

Problem 2: You may have noticed there is a $("#test").html(data); in my bingo function and a <span id="test"></span> in my body. I can't seem to remove them if not the passing of Javascript values to the PHP side would not work as shown by my print_r().

Question: Is there any way I can remove them but still pass my values from JavaScript to PHP using jQuery.ajax()?

bingo.php

<html>
    <head>
            <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
            <?php
            if (!isset($_POST['varA']) && !isset($_POST['varB']))
            {
            ?>
                <script type="text/javascript">
                $(document).ready(bingo);

                function bingo()
                {
                    jQuery.ajax({
                        type: "POST",
                        data:  {varA: "123", varB: "456"},
                        success: function(data)
                        {
                            alert("POST to self is successful!");
                            $("#test").html(data);
                        }
                    });
                }
                </script>
                <?php
            }
            else
            {
                print_r($_POST['varA']);
                echo " - ";
                print_r($_POST['varB']);
            }
            ?>
    </head>
    <body>
        <input type="text" value="meow"/>
        <span id="test"></span>
    </body>
</html>

Ananth · Accepted Answer · 2012-06-15 09:24:46Z

2

Omg that is so messy! Try the following code anyway:

<?php 
if (isset($_POST['varA']) && isset($_POST['varB'])) {
    print_r($_POST['varA']);
    echo " - ";
    print_r($_POST['varB']);
} else {
?>
<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(bingo);

            function bingo()
            {
                jQuery.ajax({
                    type: "POST",
                    data:  {varA: "123", varB: "456", ajax: true},
                    success: function(data)
                    {
                        alert("POST to self is successful!");
                        $("#test").html(data);
                    }
                });
            }
        </script>
    </head>
    <body>
        <input type="text" value="meow"/>
        <span id="test"></span>
    </body>
</html>
<?php
}
?>

answered Jun 15, 2012 at 9:24

Ananth

4,4252 gold badges23 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mysophobe Over a year ago

Oh god, magic! =x By the way, is it all right if I remove that ajax: true?

Ananth Over a year ago

Yeah sorry, forgot to remove when I later realized that no another parameter is required :)

score 1 · Accepted Answer · 2012-06-15 13:48:19Z

1

If you wish to keep your ! in your conditions, you can do it the other way round also.

<?php 
if (!isset($_POST['varA']) && !isset($_POST['varB'])) {
?>
<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(bingo);

            function bingo()
            {
                jQuery.ajax({
                    type: "POST",
                    data:  {varA: "123", varB: "456"},
                    success: function(data)
                    {
                        alert("POST to self is successful!");
                        $("#test").html(data);
                    }
                });
            }
        </script>
    </head>
    <body>
        <input type="text" value="meow"/>
        <span id="test"></span>
    </body>
</html>
<?php
}
else {
    print_r($_POST['varA']);
    echo " - ";
    print_r($_POST['varB']);
}
?>

edited Jun 15, 2012 at 13:48

answered Jun 15, 2012 at 11:48

user1455856

1 Comment

Mysophobe Over a year ago

It seems I can only select 1 answer to a question, thank you for your help too :)

Collectives™ on Stack Overflow

jQuery.ajax - Duplicate Content After Posting Data Back To The Same Page

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related