0

JSFiddle

Please check above JSFiddle link for running code.

I am having issue in JQuery Dialog in IE.

My guess is the issue is because of multiple forms or divs. I have my code as per below:

<div>
     <form>
           <table> ..... </table>

           <div id='dialog-form'>
             <form> </form>
           </div>

            <div>
                <table> .... </table>
            </div>
      </form>
</div>

The JSFiddle code works fine in Firefox and Chrome. But it shows error in IE

Message: cannot call methods on dialog prior to initialization; attempted to call method 'open'

Any help appreciated. Thank you.

heemaniroberts
  • 57
  • 2
  • 10

1 Answers1

1

Why do you have nested forms? This isn't legal HTML and doesn't even make sense. Figure out how to remove the nested form and your code will work.

Why not try the following?

<div>
     <form>
           <table> ..... </table>
            <div>
                <table> .... </table>
            </div>
      </form>
</div>
<div id='dialog-form'>
    <form> </form>
</div>
Spencer Ruport
  • 34,865
  • 12
  • 85
  • 147
  • 1
    I'm pretty sure nested forms are legal in HTML5, but that's besides the point. Once the dialog is initialized, it won't actually be inside the other form anyway because jQuery moves it to the body. – Kevin B Jun 10 '13 at 17:44
  • @KevinB - No HTML5 doesn't allow nested forms but it does have some new features that make this "limitation" easier to handle. See here: http://stackoverflow.com/a/8380229/52551 And even though jQuery moves the form elsewhere IE's DOM gets turned around with the existence of nested forms which causes undocumented behavior. – Spencer Ruport Jun 10 '13 at 17:51
  • @user2414851 - That should be fairly easy to troubleshoot. – Spencer Ruport Jun 10 '13 at 17:52
  • @SpencerRuport You are correct... Not sure where i picked that up, i remember reading it from the spec. http://www.w3.org/TR/html5/forms.html#the-form-element – Kevin B Jun 10 '13 at 17:58
  • @SpencerRuport - your help resolving this issue would be appreciated. I am new to JQuery and I tried this code updating the tutorial. need to make it work in IE 9. – heemaniroberts Jun 10 '13 at 18:01
  • @user2414851 simply remove the top level form or move the dialog html outside of it. he already explained that in his answer... – Kevin B Jun 10 '13 at 18:02
  • @KevinB I already did it and its not showing the dialog form. check [link](http://jsfiddle.net/MzA4q/6/) – heemaniroberts Jun 10 '13 at 18:07
  • @user2414851 but it IS showing the dialog form. you just aren't stopping the click event from reloading the page. – Kevin B Jun 10 '13 at 18:11
  • @KevinB - See the bottom of point 5 here: http://www.w3.org/TR/html5/forms.html#association-of-controls-and-forms – Spencer Ruport Jun 10 '13 at 18:14
  • @user2414851 - The real problem is that you seem to be trying to create a page that is beyond your current level of understanding. If you're using jQuery there's really no good reason to use form tags at all. Users don't like page reloads and AJAX is easier than ever to set up. With something this complex troubleshooting why the dialog doesn't appear should be trivial to you. – Spencer Ruport Jun 10 '13 at 18:18
  • Spencer, I have been searching for a day trying to determine why IE9 was creating a duplicate dialog box that was, of course, nonresponsive to my code. On my cshtml view I had one pair of form tags, but when I looked in IE debugging script, there was another set of form tags being recognized by IE. I removed the form tags in my view--Problem solved! Thank you. Erica – Erica Jan 15 '14 at 17:24