document type does not allow element "span" here

Question

In part of a jquery code I have this line of code below:

 var newHtml="<span style='color: green'>"+result.msg+"</span>"

Now the jquery code is displayed in the <body> section but the problem is that I am getting an error in my validation stating:

document type does not allow element "span" here

My question is that is there a way to fix it while keeping the span tag or do I need to use an alternative?

Full code form the View source:

<!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>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>Edit Assessment Date/Start Time</title>
        <link rel="stylesheet" type="text/css" href="edit_sessionadminStyles.css"/>
        <link rel="stylesheet" type="text/css" href="jquery/ui-lightness/jquery-ui-1.8.16.custom.css"/>
        <script type="text/javascript" src="jquery/jquery-1.7.min.js"></script>
        <script type="text/javascript" src="jquery/jquery-ui-1.8.16.custom.min.js"></script>

        <link rel="stylesheet" type="text/css" href="jquery/ui-lightness/jquery.ui.timepicker.css"/>
        <link rel="stylesheet" type="text/css" href="jquery/ui-lightness/jquery-ui-1.8.14.custom.css"/>
        <link rel="stylesheet" type="text/css" href="jquery/ui-lightness/jquery-ui-timepicker-addon.css"/>
        <script type="text/javascript" src="jquery/jquery.ui.timepicker.js"></script>
        <script type="text/javascript" src="jquery/jquery-ui-timepicker-addon.js"></script>

        </head>
        <body>

    <script type="text/javascript">


     function submitform() {    

        $.ajax({
            type: "POST",
            url: "updatedatetime.php",
            data: $('#updateForm').serialize(),
            dataType:'json',  //get response as json
            success: function(result){
                        if(result.errorflag){

           //do your stuff on getting error message
          var newHtml="<span class='red'>"+result.msg+"</span>"; 
          $("#targetdiv").html(newHtml);  //i am displaying the error msg here

        }else{
           //you got success message

           var newHtml="<span class='green'>"+result.msg+"</span>"; 
                $("#targetdiv").html(newHtml);
                //Get and store the new date and time.
                    var newDate = jQuery("#newDate").val();
                    var newTime = jQuery("#newTime").val();

                    //Set your current date and time to your new date and time.
                    jQuery("#currentDate").val(newDate);
                    jQuery("#currentTime").val(newTime);

                    //Find the currently selected session and update it.
                    var selectedOption = jQuery("#sessionsDrop option:selected");
                    var label = selectedOption.text().split(" - ");
                    selectedOption.text(label[0] + " - " + newDate + " - " + newTime);

                    //Clear the new date and time fields.
                    jQuery("#newDate").val("");
                    jQuery("#newTime").val("");

                    $('#targetdiv').show();
            }
        }
      });        
    }



    $('body').on('click', '#updateSubmit', showConfirm);       


    </script>   

   <noscript style='color: red'><img src="Images/warning-2.fw.png" alt="Javascript Warning" id="warningImage" name="warningSymbol"/> In order to use this application without any problems, you must have javascript enabled</noscript>
Please Login to Access this Page | <a href='./adminlogin.php'>Login</a>        
    </body>
</html>

Im using ajax and jquery to navigate to another script where it perform a query and then it displays echo's on success or fail depending on situation, then I use the code above to be able to display the message on the main page. I have always put my ajax and jquery/javascript code in the head section — user1830984, Jan 01 '13 at 10:11
Sorry guys it is in the body section not head section. Sorry bout this — user1830984, Jan 01 '13 at 10:17

score 3 · Accepted Answer · edited May 23 '17 at 12:18

3

Scenario 1 : when span is in <Head> tag

You have to use CDATAlike below.

<script type="text/javascript">
//<![CDATA[
...code...
//]]>
</script>

Check for more information When is a CDATA section necessary within a script tag?

Scenario 2: when span is in <Body> tag

<body>
   <div></div>

<script>
   $("div").html("<span class='red'>Hello <b>Again</b></span>");
</script>

</body>

EDIT

Your problem may be this:you have to put errorflag for msg

Your code (wrong)

if(result.errorflag){

           //do your stuff on getting error message
          var newHtml="<span class='red'>"+result.msg+"</span>"; 
          $("#targetdiv").html(newHtml);  //i am displaying the error msg here

Corrected one:

 if(result.errorflag){

               //do your stuff on getting error message
              var newHtml="<span class='red'>"+result.errorflag+"</span>"; 
              $("#targetdiv").html(newHtml);  //i am displaying the error msg here

I hope this will help you.

edited May 23 '17 at 12:18

Community

1
1

answered Jan 01 '13 at 10:12

Sampath

63,341
64
307
441

Sorry guys it is in the body section not head section. Sorry bout this – user1830984 Jan 01 '13 at 10:18
@user1830984 Try to use like above scenario 2. – Sampath Jan 01 '13 at 10:32
@user1830984 can you check the value of "result.msg" using fire bug?? – Sampath Jan 01 '13 at 10:38
Which tab in firebug to I go on to check this? – user1830984 Jan 01 '13 at 10:44
@user1830984 "script" Tab after that reload the page then put a brake point on the place where you want to debug. – Sampath Jan 01 '13 at 10:46
@user1830984 here are some good articles about java script debugger http://getfirebug.com/javascript and http://www.developerfusion.com/article/139949/debugging-javascript-with-firebug/ – Sampath Jan 01 '13 at 10:55
tested it with firebug, there isn't any errors displayed in firebug, the breakpoint displays a golden arrow after the message appears (well would appear if I did not stop the break point at that point) – user1830984 Jan 01 '13 at 11:02
@user1830984 check my EDIT Part above – Sampath Jan 01 '13 at 11:06
This won't be the problem, the message works well, its just the validation which is the problem, its got to be the tag which is causing the problem – user1830984 Jan 01 '13 at 16:15
@user1830984 But other than that I couldn't see any issue about the span tag.You put that in correct way.That is the way it should be.May be just try to put div element there and check.Then you can identify the real issue.try that.Remove span and as a test put div element there. – Sampath Jan 01 '13 at 16:22
I will mark your answer because of your effort, the javascript is working so I don't think I have to worry about the validator as I think that is only for proper html. – user1830984 Jan 02 '13 at 01:59
@user1830984 what happened when you changed it to div? – Sampath Jan 02 '13 at 06:37

score 0 · Answer 2 · answered Jan 01 '13 at 10:12

0

No, there isn't. The <head> isn't displayed so a visual element like a <span> has no meaning there.

answered Jan 01 '13 at 10:12

Sinetheta

9,189
5
31
52

Sorry guys it is in the body section not head section. Sorry bout this – user1830984 Jan 01 '13 at 10:17

score 0 · Answer 3 · answered Jan 01 '13 at 10:12

0

hey use this code it will help you

var newHtml="<span class='red'>"+result.msg+"<//span>";

answered Jan 01 '13 at 10:12

Manish Nagar

1,038
7
12

score 0 · Answer 4 · answered Jan 01 '13 at 11:11

0

span is an inline element and needs a surrounding block-element. just try to use a div instead of your span. this should fix the validation error.

answered Jan 01 '13 at 11:11

Bastian Rang

2,137
1
19
25

score 0 · Answer 5 · answered Jan 01 '13 at 11:32

By XHTML rules, script element content is parsed for HTML tags, and script elements must not contain any tags. There are various ways around this, including a switch to HTML 4.01 (or HTML5). If you keep using XHTML 1.0, then the recommendation in the spec is: “Use external scripts if your script uses <”. That is, replace the script containing script code by a link element that refers to that code written in an external .js file.

document type does not allow element "span" here

5 Answers5