CODEWITHSUNDEEP
jquery
Joppo
Joppo

Reputation: 729

jquery html() erases webcontent

On my webpage below some code within the CalcModule.func2() function writes error messages to a div element with id=errorbox. My problem is that when I place this div element above the form (myForm), the entire page is erased when CalcModule.func2() function writes an error message. Only when I place the div errorbox element below the form (see code) the page is not erased.

Where do I go wrong? 

<head>
    <title></title>

    <script>
        function CalcModule(){};
        //some vars
        CalcModule.var_a;
        CalcModule.var_b;
        //etc.

        //some functions
        CalcModule.func1 = function(msg){ 
        }

        CalcModule.func2 = function(){
            if(!selected){ //no checkbox selected?
                $("#errorbox").removeClass("success");
                $("#errorbox").addClass("error");
                $("#errorbox").html("errormessage");
             }
             else{
                $("#errorbox").removeClass("error");
                $("#errorbox").html("");
             }
        }
        //etc.

        $(document).ready(function(){
            $("#myForm").validate({})

            $.get("process.php", //ajax call
                function(msg) {
                    var form = Getform(msg);
                    $("#wrapper").append(form);
                }
            )

        }//$(document).ready(function

    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <!-- ideally the '<div id="errorbox"><div>' should be at this location, but that does not work-->
    <form id="myForm" name="myForm" action="" method="post" autocomplete="on">
        <!--some table html code here-->
        <div id="wrapper"></div> <!--anchor point for adding set of form fields -->        
        <input type="submit" name="submitForm" value="Submit Form">
    </form>
    <div id="errorbox"><div> <!--this seems the only location for this div on the page where the page is not erased-->
</body>

Upvotes: 0

Views: 56

Answers (2)

Sohil Desai
Sohil Desai

Reputation: 2988

try this instead of .html()

$("#errorbox").empty();
$("#errorbox").append("Error Message");

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

It has to be: <div id="errorbox"></div>

Using DIV closing tag! Otherwise, browser will automatically close it just before closing parent's TAG which makes html() method replaces all parent's content.

Upvotes: 4

Related Questions