New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

support for xhtml needed #6699

Closed
ecofi opened this Issue Nov 5, 2013 · 13 comments

Comments

Projects
None yet
2 participants
@ecofi

ecofi commented Nov 5, 2013

To be able to use jquery also in xhtml compliant web page, jqm code should be reviewed and tested.

For example instead of $("<a>") jqm should use $("<a/>").

Furthermore, jqm should not use .html("&nbsp;").

And something like this $( "<div></div>" ) should be optimized to $("<div/>").

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Nov 19, 2013

Contributor

The jQuery constructors you mention all result in a matching pair of tags. See the documentation (look for "When the parameter has a single tag..."). The only remaining problem is our use of &nbsp;.

Contributor

gabrielschulhof commented Nov 19, 2013

The jQuery constructors you mention all result in a matching pair of tags. See the documentation (look for "When the parameter has a single tag..."). The only remaining problem is our use of &nbsp;.

@ghost ghost assigned gabrielschulhof Nov 19, 2013

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Nov 19, 2013

Contributor

I've replaced &nbsp; with &#160;. This will land in 1.4.1.

Contributor

gabrielschulhof commented Nov 19, 2013

I've replaced &nbsp; with &#160;. This will land in 1.4.1.

@ecofi

This comment has been minimized.

Show comment
Hide comment
@ecofi

ecofi Nov 19, 2013

Well, it seems the documentation is not entirely right in this case. I tested a little bit around and received very different results for xhtml document (Google Chrome Browser):

Working

$('body').append($('<div>'));
$('body').append($('<div class="test"/>'));
$('body').html('<div class="test"/>');

Not working with error "Uncaught SyntaxError: An invalid or illegal string was specified."

$('body').append($('<div class="test">'));
$('body').html('<div class="test">');

My conclusion, the jQuery constructors should include the closing slash.

ecofi commented Nov 19, 2013

Well, it seems the documentation is not entirely right in this case. I tested a little bit around and received very different results for xhtml document (Google Chrome Browser):

Working

$('body').append($('<div>'));
$('body').append($('<div class="test"/>'));
$('body').html('<div class="test"/>');

Not working with error "Uncaught SyntaxError: An invalid or illegal string was specified."

$('body').append($('<div class="test">'));
$('body').html('<div class="test">');

My conclusion, the jQuery constructors should include the closing slash.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Nov 20, 2013

Contributor

Your conclusion is correct. You must always pass in valid HTML for jQuery to correctly construct the DOM subtree you request. However, the jQuery constructor also contains a special case which, when encountered, will cause jQuery to construct a single element via document.createElement. The documentation says that this special handling applies to "a single tag", meaning a single tag - no attributes. So, I'm not surprised the latter two failed. If you supply a single tag, it uses createElement for speed. Otherwise it must parse the HTML, which means tags must be closed.

What matters here is not how you pass the HTML to jQuery, because that is done in Javascript, but whether jQuery generates valid XHTML from what you give it. I believe that, if you pass in either valid HTML, or one of the shortcuts that causes document.createElement to be invoked, the result will always be valid XHTML.

Contributor

gabrielschulhof commented Nov 20, 2013

Your conclusion is correct. You must always pass in valid HTML for jQuery to correctly construct the DOM subtree you request. However, the jQuery constructor also contains a special case which, when encountered, will cause jQuery to construct a single element via document.createElement. The documentation says that this special handling applies to "a single tag", meaning a single tag - no attributes. So, I'm not surprised the latter two failed. If you supply a single tag, it uses createElement for speed. Otherwise it must parse the HTML, which means tags must be closed.

What matters here is not how you pass the HTML to jQuery, because that is done in Javascript, but whether jQuery generates valid XHTML from what you give it. I believe that, if you pass in either valid HTML, or one of the shortcuts that causes document.createElement to be invoked, the result will always be valid XHTML.

@ecofi

This comment has been minimized.

Show comment
Hide comment
@ecofi

ecofi Nov 20, 2013

Thank you for the explanation. I would conclude from your answer that code something like this headerTitle = $( "<h1 class='ui-title'>" ).appendTo( header ); should be changed in jquery mobile script because it fails with xhtml valid documents?? I would volunteer to list all the issues if they will be fixed.

ecofi commented Nov 20, 2013

Thank you for the explanation. I would conclude from your answer that code something like this headerTitle = $( "<h1 class='ui-title'>" ).appendTo( header ); should be changed in jquery mobile script because it fails with xhtml valid documents?? I would volunteer to list all the issues if they will be fixed.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Nov 26, 2013

Contributor

Interesting. I'm surprised that code doesn't throw an error, the same way that $('body').append($('<div class="test">')); throws an error for you. What version of jQuery core are you using?

Contributor

gabrielschulhof commented Nov 26, 2013

Interesting. I'm surprised that code doesn't throw an error, the same way that $('body').append($('<div class="test">')); throws an error for you. What version of jQuery core are you using?

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Nov 26, 2013

Contributor

I guess newer versions of jQuery will close tags for you. Even version 1.6.4 of jQuery. http://jsbin.com/ofuhaw/997/

Contributor

gabrielschulhof commented Nov 26, 2013

I guess newer versions of jQuery will close tags for you. Even version 1.6.4 of jQuery. http://jsbin.com/ofuhaw/997/

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Nov 26, 2013

Contributor

Since the line you mention doesn't cause any JS errors with the versions of jQuery core that we support, I don't believe that the code as it stands is wrong, because jQuery takes care of providing the closing tags.

Contributor

gabrielschulhof commented Nov 26, 2013

Since the line you mention doesn't cause any JS errors with the versions of jQuery core that we support, I don't believe that the code as it stands is wrong, because jQuery takes care of providing the closing tags.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Nov 26, 2013

Contributor

Oops! Can't close this until 1.4.1.

Contributor

gabrielschulhof commented Nov 26, 2013

Oops! Can't close this until 1.4.1.

@ecofi

This comment has been minimized.

Show comment
Hide comment
@ecofi

ecofi Nov 26, 2013

I'm afraid your example is not an valid XHTML document. Test this, put the code from below into a file 'test.xhtml' (important the file suffix xhtml is important too) and open the file with Google Chrome or Internet Explorer and see what happen. The error will disappear if you put the closing slash into the code.

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
  lang="en"
  xml:lang="en"
  xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script src="http://code.jquery.com/jquery-1.6.4.js" type="text/javascript" ></script>
    <style type="text/css">
      .test {
          width: 50px;
          height: 50px;
          background: red;
      }</style>
    <script type="text/javascript">
            //<![CDATA[
    $( function() {
      $( "a" ).click( function( event ) {
        try {
          $('body').append($('<div class="test">'));
        } catch( error ) {
          alert( error.message );
        }
        event.preventDefault();
      });
    });
    //]]>
  </script>
  </head>
  <body>
    <a
      href="#">Run code</a>
  </body>
</html>

I think this is a bug in jq(m) and should be fixed.

ecofi commented Nov 26, 2013

I'm afraid your example is not an valid XHTML document. Test this, put the code from below into a file 'test.xhtml' (important the file suffix xhtml is important too) and open the file with Google Chrome or Internet Explorer and see what happen. The error will disappear if you put the closing slash into the code.

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
  lang="en"
  xml:lang="en"
  xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script src="http://code.jquery.com/jquery-1.6.4.js" type="text/javascript" ></script>
    <style type="text/css">
      .test {
          width: 50px;
          height: 50px;
          background: red;
      }</style>
    <script type="text/javascript">
            //<![CDATA[
    $( function() {
      $( "a" ).click( function( event ) {
        try {
          $('body').append($('<div class="test">'));
        } catch( error ) {
          alert( error.message );
        }
        event.preventDefault();
      });
    });
    //]]>
  </script>
  </head>
  <body>
    <a
      href="#">Run code</a>
  </body>
</html>

I think this is a bug in jq(m) and should be fixed.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Nov 26, 2013

Contributor

OK. Reproduced.

Contributor

gabrielschulhof commented Nov 26, 2013

OK. Reproduced.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Nov 26, 2013

Contributor

I have now fixed all instances where we weren't closing the tags we're passing into jQuery. This will land in 1.4.1. Hopefully I haven't missed any.

Contributor

gabrielschulhof commented Nov 26, 2013

I have now fixed all instances where we weren't closing the tags we're passing into jQuery. This will land in 1.4.1. Hopefully I haven't missed any.

@ecofi

This comment has been minimized.

Show comment
Hide comment
@ecofi

ecofi Nov 26, 2013

Great news. Many thanks.

ecofi commented Nov 26, 2013

Great news. Many thanks.

gabrielschulhof added a commit that referenced this issue Dec 21, 2013

Select: Do not inject HTML that is not XHTML compliant
This means insert &#160; instead of &nbsp; and make sure that all $( "<...>" )
that are more than just a single tag have the closing tag.

Fixes #6699

gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Nov 28, 2014

gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Nov 28, 2014

gabrielschulhof added a commit that referenced this issue Dec 29, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment