Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

form submit fails if content-type is XHTML #4583

Closed
drkhdr opened this Issue · 8 comments

3 participants

@drkhdr

If using XHMTL, form submit fails - no request is being triggered.
The very same HTML page works (difference just being the use of the XML namespace).
To reproduce, load the sample XHTML page vs. the HTML version below (tested on Chrome 19.0.1084.56 m)
Clicking "Sign up" causes nothing in XHTML (which is bad),
while clicking "Sign up" in HTML causes an error (which is correct, since the form action is invalid)

Note that a patched version of jquery.mobile.media.js containing pull request #4542 is used.
Without pull request #4542 the XHTML page will fail right away when loading (see issue #4541)

XHTML:

<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <title>xyz</title>
    <meta content='width=device-width, initial-scale=1' name='viewport' />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" media="all" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
    <!-- using a patched version of jquery.mobile.media.js - without pull request #4542 XHTML will fail right away when loading (see issue https://github.com/jquery/jquery-mobile/issues/4541) -->
    <script src="https://raw.github.com/gist/2973903/17bc460e898d816d6040763b3eff2cbb7b659b67/jquery.mobile-1.1.0-pull4542.js"></script>
  </head>
  <body>
    <div data-role='page' id='signup'>
      <div data-role='header' data-theme='d'>
        <a data-icon='home' data-iconpos='notext' data-role='button' data-theme='b' data-transition='slide' href='#home' title='home'></a>
        <h3>Sign up for xyz</h3>
      </div>
      <div data-role='content'>
        <form accept-charset="UTF-8" action="/users?method=post" method="post"><div style="margin:0;padding:0;display:inline"></div>
            <div data-role='fieldcontain'>
              <fieldset data-role='controlgroup'>
                <label for='email'>Email</label>
                <input id='email' placeholder='email' type='email' value='' />
                <label for='password'>Password</label>
                <input id='password' placeholder='password' type='password' value='' />
                <label for='password_confirmation'>Password</label>
                <input id='password_confirmation' placeholder='password confirmation' type='password' value='' />
              </fieldset>
            </div>
            <input data-theme="b" name="commit" type="submit" value="Sign up" />
        </form>
      </div>
    </div>
  </body>
</html>

HTML:

<!DOCTYPE html>
<html lang='en'>
  <head>
    <title>xyz</title>
    <meta content='width=device-width, initial-scale=1' name='viewport' />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" media="all" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
    <!-- using a patched version of jquery.mobile.media.js - without pull request #4542 XHTML will fail right away when loading (see issue https://github.com/jquery/jquery-mobile/issues/4541) -->
    <script src="https://raw.github.com/gist/2973903/17bc460e898d816d6040763b3eff2cbb7b659b67/jquery.mobile-1.1.0-pull4542.js"></script>
  </head>
  <body>
    <div data-role='page' id='signup'>
      <div data-role='header' data-theme='d'>
        <a data-icon='home' data-iconpos='notext' data-role='button' data-theme='b' data-transition='slide' href='#home' title='home'></a>
        <h3>Sign up for xyz</h3>
      </div>
      <div data-role='content'>
        <form accept-charset="UTF-8" action="/users?method=post" method="post"><div style="margin:0;padding:0;display:inline"></div>
            <div data-role='fieldcontain'>
              <fieldset data-role='controlgroup'>
                <label for='email'>Email</label>
                <input id='email' placeholder='email' type='email' value='' />
                <label for='password'>Password</label>
                <input id='password' placeholder='password' type='password' value='' />
                <label for='password_confirmation'>Password</label>
                <input id='password_confirmation' placeholder='password confirmation' type='password' value='' />
              </fieldset>
            </div>
            <input data-theme="b" name="commit" type="submit" value="Sign up" />
        </form>
      </div>
    </div>
  </body>
</html>
@drkhdr

One general thought on XHTML5 support:

This issue and issue #4541 (pull request #4542) indicate that jQuery Mobile tests are not yet covering the use of XHTML5 as per:

<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
...

The rationale for me to use XHTML5 (and not HTML5) is its support for compound documents that contain e.g. inline SVG. Mobile Safari for example requires compound documents to be XHTML5, it does not display inline SVG for HTML5.

The question is: Can explicit support for XHTML be added by means of test coverage?
Please let me know your thoughts and how I may help!

@drkhdr drkhdr closed this
@drkhdr drkhdr reopened this
@agcolom
Collaborator

@drkhdr I've created a jsbin with your xhtml code, and I do get the error: http://jsbin.com/enewuc/ with the latest code, and
http://jsbin.com/enewuc/3/ with the namespace. Is this the expected behaviour? (the latest code has your PR merge incorporated).

Thanks,

Anne

@drkhdr

@agcolom Thanks a lot, that's the expected behaviour, as both the HTML5 and the XHTML5 on jsbin execute the AJAX post request (resulting in an error, which is correct, as the specified URI does not exist).

However, the problem still wasn't solved for the site I was working on. It took some time to figure out why and under which conditions, and it comes down to the xhr post request not working in XHTML5 IF the page is run locally (either from the file system or from localhost), at least on Windows 7. Is this a XHTML(5) feature, or a bug?

To replicate,

  • save your jsbin samples as files locally, make sure you make the HTML5 version's extension "html", and the XHTML5 version's "xhtml". Note: I have provided a valid XHTML5 version, see http://jsbin.com/enewuc/4
  • Now open each local file (or locally served page) in a browser, and you'll see that while the HTML5 version issues an xhr request (leading to an error, which is correct), the XHTML5 version does not execute the xhr request, it does nothing (which is bad). I tested this with FF 12, Chrome 19 and IE 9 under Windows 7 and found the behaviour to be consistent across browsers.

Please let me know if you have questions or trouble replicating the issue.

Best, Dirk

@agcolom
Collaborator

@drkhdr Hi Dirk,

and if you remove JQM, does it work locally? (I would not expect this to work properly when using the file protocol, but I would imagine the localhost should woek as long as the same origin policy isn't broken.... but I may be wrong)

Anne

@drkhdr

@agcolom Hi Anne,

Removing JQM resolves the issue (running on localhost).
In the meantime I found that the issue is not limited to local instances.
Maybe I'm missing something, or I'm doing something terribly wrong...

Hence I've created three test instances for you:

The test result noted in brackets was consistent across FF 12, Chrome 19 and IE 9 on Windows 7 (64 Bit).
I'm still lost... thoughts?

Best, Dirk

@agcolom
Collaborator

@drkhdr Hi Dirk,

The team recommends that you validate your code with w3c markup validation service :http://validator.w3.org/check?uri=http%3A%2F%2Fform-submit-xhtml-jqm.herokuapp.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

it may help....

Regards,

Anne

@drkhdr

@agcolom Hi Anne,

Thanks for the hint, there were indeed a few minor markup issue that have now been fixed:

Despite the (now perfectly valid) polyglot markup, the initial issue remains:

Note that for the XHTML versions, the HTTP response header intentionally sets the correct Content-Type "application/xhtml+xml" if the user agent accepts it, and "text/html" otherwise.

Now things get interesting: For testing, you can force the response header to set the Content-Type to "text/html" for the XHTML versions by adding the request parameter "format=html" like this: http://form-submit-xhtml-jqm.herokuapp.com/?format=html ... and now the submit works - because the (valid!?) content-type "application/xhtml+xml" was changed to "text/html", which yields a fourth scenario:

Is it wrong to expect JQM to work with Content-Type "application/xhtml+xml"?
Anything else you suspect I'm doing wrong?

Best, Dirk

@arschmitz
Owner

closing this as a feature requrst not a bug "A unified, HTML5-based user interface system"

@arschmitz arschmitz closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.