Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jQuery Dialog and IE...

    Hello all,

    I want to implement the jquey dialog plugin on a site and until know everything works fine no all browsers, except IE ofc.

    The plugin is this one: http://jqueryui.com/demos/dialog/#modal-form
    and you can the code as well.

    The problem is that in IE the pop-up form (#dialog-form) appears directly when I load the page, just above the table, whereas it should be invisible until I click on "create new user"...

    Any ideas?

    Thank you!

  • #2
    New Coder
    Join Date
    Jun 2012
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone?

  • #3
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    It would help if you encapsulated your code between CODE tags. We can't help you troubleshoot without seeing what you've got, so far.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #4
    New Coder
    Join Date
    Jun 2012
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by WolfShade View Post
    It would help if you encapsulated your code between CODE tags. We can't help you troubleshoot without seeing what you've got, so far.
    On the above address, there is a "View Source" link.
    It shows the exact code that I copied as it is.

  • #5
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    All you did was copy/paste, no changes, no modification?
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #6
    New Coder
    Join Date
    Jun 2012
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I did not change anything important.
    All the class/div names, all variables etc. are the same.
    I just wrote instead of "Create new user", "add". Stuff like that.
    But the whole thing works perfectly on chrome, mozilla.
    With autoOpen: false, it works fine on all browsers apart from IE.
    In IE the #dialog-form is always there (not as a pop-up) when the page loads.
    With autoOpen: true, the pop-up shows up on page load on all browsers apart from IE again...

  • #7
    New Coder
    Join Date
    Jun 2012
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I cannot really think of anything to fix this.
    I read somewhere that maybe the doctype declaration could affect IE in this way, but nothing there either.
    At first I had <!DOCTYPE html>, then I tried some others like XHTML, HTML4.01 etc....
    Still nothing.
    Any ideas?

  • #8
    New Coder
    Join Date
    Jun 2012
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the code:


    <meta charset="utf-8">














    <style>
    body { font-size: 62.5%; }
    label, input { display:block; }
    input.text { margin-bottom:12px; width:95%; padding: .4em; }
    fieldset { padding:0; border:0; margin-top:25px; }
    h1 { font-size: 1.2em; margin: .6em 0; }
    div#users-contain { width: 350px; margin: 20px 0; }
    div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
    div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
    .ui-dialog .ui-state-error { padding: .3em; }
    .validateTips { border: 1px solid transparent; padding: 0.3em; }
    </style>
    <script>
    $(function() {
    // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
    $( "#dialog:ui-dialog" ).dialog( "destroy" );

    var name = $( "#name" ),
    email = $( "#email" ),
    password = $( "#password" ),
    allFields = $( [] ).add( name ).add( email ).add( password ),
    tips = $( ".validateTips" );

    function updateTips( t ) {
    tips
    .text( t )
    .addClass( "ui-state-highlight" );
    setTimeout(function() {
    tips.removeClass( "ui-state-highlight", 1500 );
    }, 500 );
    }

    function checkLength( o, n, min, max ) {
    if ( o.val().length > max || o.val().length < min ) {
    o.addClass( "ui-state-error" );
    updateTips( "Length of " + n + " must be between " +
    min + " and " + max + "." );
    return false;
    } else {
    return true;
    }
    }

    function checkRegexp( o, regexp, n ) {
    if ( !( regexp.test( o.val() ) ) ) {
    o.addClass( "ui-state-error" );
    updateTips( n );
    return false;
    } else {
    return true;
    }
    }

    $( "#dialog-form" ).dialog({
    autoOpen: false,
    height: 300,
    width: 350,
    modal: true,
    buttons: {
    "Create an account": function() {
    var bValid = true;
    allFields.removeClass( "ui-state-error" );

    bValid = bValid && checkLength( name, "username", 3, 16 );
    bValid = bValid && checkLength( email, "email", 6, 80 );
    bValid = bValid && checkLength( password, "password", 5, 16 );

    bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
    // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com...ss_validation/
    bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
    bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );

    if ( bValid ) {
    $( "#users tbody" ).append( "<tr>" +
    "<td>" + name.val() + "</td>" +
    "<td>" + email.val() + "</td>" +
    "<td>" + password.val() + "</td>" +
    "</tr>" );
    $( this ).dialog( "close" );
    }
    },
    Cancel: function() {
    $( this ).dialog( "close" );
    }
    },
    close: function() {
    allFields.val( "" ).removeClass( "ui-state-error" );
    }
    });

    $( "#create-user" )
    .button()
    .click(function() {
    $( "#dialog-form" ).dialog( "open" );
    });
    });
    </script>



    <div class="demo">

    <div id="dialog-form" title="Create new user">
    <p class="validateTips">All form fields are required.</p>

    <form>
    <fieldset>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
    <label for="email">Email</label>
    <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
    <label for="password">Password</label>
    <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
    </fieldset>
    </form>
    </div>


    <div id="users-contain" class="ui-widget">
    <h1>Existing Users:</h1>
    <table id="users" class="ui-widget ui-widget-content">
    <thead>
    <tr class="ui-widget-header ">
    <th>Name</th>
    <th>Email</th>
    <th>Password</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>John Doe</td>
    <td>john.doe@example.com</td>
    <td>johndoe1</td>
    </tr>
    </tbody>
    </table>
    </div>
    <button id="create-user">Create new user</button>

    </div><!-- End demo -->

  • #9
    New Coder
    Join Date
    Oct 2009
    Posts
    61
    Thanks
    2
    Thanked 1 Time in 1 Post
    Is that your whole code? What you posted lacks the jQuery file(s)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •