Forums

Board index » YUI 3.x: » Using YUI 3.x Components

Page 1 of 1   [ 6 posts ]
New Topic | Post Reply | Print view

Hi-Tae Shin

  • Username: hs2212
  • Joined: Thu Jul 19, 2012 10:51 am
  • Posts: 4
  • Offline
  • Profile
Tags:

Form submit inside table in YUI tabview not working on IE

Post Posted: Thu Jul 19, 2012 11:19 am
+0-
Hi everyone,

I started using YUI3 a few days ago. Everything seems to be working fine until I ran into this issue. I am trying to set up a tabview with existing several forms (as markups). I was able to get this working fine on FF, Chrome, but not on IE. On IE, the tabview is rendered correctly but the form submission is not working.

Briefly, the structure of the simplified code looks as follows:

Code:
<script type="text/javascript">
    YUI().use('tabview', function(Y) {
        var tabview = new Y.TabView({srcNode: '#tabName'});
        tabview.render();});
</script>

<div id="tabName">
    <ul>
        <li><a href='#a'>A</a></li>
        <li><a href='#b'>B</a></li>
        <li><a href='#c'>C</a></li>
    </ul>
    <div id='a'>
<!-- this is the part that is not working. It shows up fine but submission of the form does not work. Once I remove the table element, then it starts working. -->
<form>
<table><tr><td><input name='submit' value='Submit' type='submit' /></td></tr></table>
</form>
    </div>
    <div id='b'><p>test</p>
    </div>
    <div id='c'><p>test</p>
    </div>
</div>


Is there any reason that this shouldn't work on IE?

Thank you so much for your help!

-- Hi-Tae

Marco Asbreuk

YUI Contributor

  • Username: itsasbreuk
  • Joined: Mon Nov 16, 2009 5:14 am
  • Posts: 457
  • Location: Netherlands
  • Twitter: itsasbreuk
  • GitHub: ItsAsbreuk
  • Gists: ItsAsbreuk
  • IRC: Marco Asbreuk
  • Offline
  • Profile

Re: Form submit inside table in YUI tabview not working on I

Post Posted: Thu Jul 19, 2012 2:39 pm
+0-
Hey Hi-Tae,

Could you perhaps show the whole code?
It seems very unlikely it has to do with tabview.
More like you have html-errors: IE is very sticky to that while other browser correct some html-errors. That might be a reason. But I've got to see the whole code.

Regards,
Marco.

Hi-Tae Shin

  • Username: hs2212
  • Joined: Thu Jul 19, 2012 10:51 am
  • Posts: 4
  • Offline
  • Profile
Tags:

Re: Form submit inside table in YUI tabview not working on I

Post Posted: Fri Jul 20, 2012 7:33 am
+0-
Dear Marco,

Thank you for looking into the problem.

I created a test file as follows:

Code:
<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <link rel="stylesheet" href="/yui/build/tabview/assets/tabview.css" type="text/css">
    <script type="text/javascript" src="/yui/build/yui/yui-min.js"></script>
</head>
<body>
<script type="text/javascript">
    YUI().use('tabview', function(Y) {
        var tabview = new Y.TabView({srcNode: '#tabName'});
        tabview.render();});
</script>

<div class='yui3-skin-sam'>
    <div id='tabName'>
        <ul>
            <li><a href='#A'>A</a></li>
            <li><a href='#B'>B</a></li>
            <li><a href='#C'>C</a></li>
        </ul>

        <div>
            <div id='A'><p>
                <form action="work.php">
                <table><tr><td>
                        <input name="test" value="Submit" type="submit" />
                </td></tr></table>
                </form>
            </p></div>
            <div id='B'><p>test</p></div>
            <div id='C'><p>test</p></div>
        </div>
    </div>
</div>
</body>
</html>


It still doesn't work on IE. :(

Again, thank you for looking into the problem.

Regards,
Hi-Tae

Hi-Tae Shin

  • Username: hs2212
  • Joined: Thu Jul 19, 2012 10:51 am
  • Posts: 4
  • Offline
  • Profile
Tags:

Re: Form submit inside table in YUI tabview not working on I

Post Posted: Fri Jul 20, 2012 12:17 pm
+0-
Dear Marco,

Thank you for looking into the problem.

I created a test file as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<link rel="stylesheet" href="/yui/build/tabview/assets/tabview.css" type="text/css">
<script type="text/javascript" src="/yui/build/yui/yui-min.js"></script>
</head>
<body>
<script type="text/javascript">
YUI().use('tabview', function(Y) {
var tabview = new Y.TabView({srcNode: '#tabName'});
tabview.render();});
</script>

<div class='yui3-skin-sam'>
<div id='tabName'>
<ul>
<li><a href='#A'>A</a></li>
<li><a href='#B'>B</a></li>
<li><a href='#C'>C</a></li>
</ul>

<div>
<div id='A'><p>
<form action="work.php">
<table><tr><td>
<input name="test" value="Submit" type="submit" />
</td></tr></table>
</form>
</p></div>
<div id='B'><p>test</p></div>
<div id='C'><p>test</p></div>
</div>
</div>
</div>
</body>
</html>


It still doesn't work on IE.

Again, thank you for looking into the problem.

Regards,
Hi-Tae

p.s. just realized I can reply to your post...sorry if you have already read my response.

Marco Asbreuk

YUI Contributor

  • Username: itsasbreuk
  • Joined: Mon Nov 16, 2009 5:14 am
  • Posts: 457
  • Location: Netherlands
  • Twitter: itsasbreuk
  • GitHub: ItsAsbreuk
  • Gists: ItsAsbreuk
  • IRC: Marco Asbreuk
  • Offline
  • Profile
Tags:

Re: Form submit inside table in YUI tabview not working on I

Post Posted: Sun Jul 22, 2012 12:50 am
+0-
Hey Hi-Tae,

You embeded your <form> within <p>-elements.
When you remove these, it should work.

IE is very strict in using html-code the right way. You can check your html at http://validator.w3.org/. What happens in other browsers, is that the <p> tage before the <form> tag is replaced by <p></p> automaticly. Same for </p> after the </form>, which is replaced by <p></p> as well. This way those browsers manage to get it worked even if the html isn't right.

This code should work:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<link rel="stylesheet" href="/yui/build/tabview/assets/tabview.css" type="text/css">
<script type="text/javascript" src="/yui/build/yui/yui-min.js"></script>
</head>
<body>
<script type="text/javascript">
YUI().use('tabview', function(Y) {
var tabview = new Y.TabView({srcNode: '#tabName'});
tabview.render();});
</script>

<div class='yui3-skin-sam'>
<div id='tabName'>
<ul>
<li><a href='#A'>A</a></li>
<li><a href='#B'>B</a></li>
<li><a href='#C'>C</a></li>
</ul>

<div>
<div id='A'>
<form action="work.php">
<table><tr><td>
<input name="test" value="Submit" type="submit" />
</td></tr></table>
</form>
</div>
<div id='B'><p>test</p></div>
<div id='C'><p>test</p></div>
</div>
</div>
</div>
</body>
</html>

Hi-Tae Shin

  • Username: hs2212
  • Joined: Thu Jul 19, 2012 10:51 am
  • Posts: 4
  • Offline
  • Profile
Tags:

Re: Form submit inside table in YUI tabview not working on I

Post Posted: Mon Jul 23, 2012 6:29 am
+0-
Thank you so much!

That solved my problem! :)

Regards,
Hi-Tae
Page 1 of 1   [ 6 posts ]
New Topic | Post Reply | Print view
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Recent Forums Posts

Recent YUI Blog Posts

Online Users

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info

Powered by phpBB® Forum Software © phpBB Group