Skip to content
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

form submit fails if content-type is XHTML #4583

Closed
drkhdr opened this Issue Jun 22, 2012 · 8 comments

Comments

Projects
None yet
3 participants
@drkhdr
Copy link
Contributor

drkhdr commented Jun 22, 2012

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

This comment has been minimized.

Copy link
Contributor Author

drkhdr commented Jun 23, 2012

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 Jun 23, 2012

@drkhdr drkhdr reopened this Jun 23, 2012

@agcolom

This comment has been minimized.

Copy link
Member

agcolom commented Jul 4, 2012

@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

This comment has been minimized.

Copy link
Contributor Author

drkhdr commented Jul 6, 2012

@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

This comment has been minimized.

Copy link
Member

agcolom commented Jul 8, 2012

@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

This comment has been minimized.

Copy link
Contributor Author

drkhdr commented Jul 9, 2012

@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

This comment has been minimized.

Copy link
Member

agcolom commented Jul 12, 2012

@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

This comment has been minimized.

Copy link
Contributor Author

drkhdr commented Jul 15, 2012

@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

This comment has been minimized.

Copy link
Member

arschmitz commented Aug 7, 2013

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

@arschmitz arschmitz closed this Aug 7, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.