Tutorial :ASP.NET,jQuery UI Dialog showing in page for 1-2 seconds



Question:

I have an ASP.NET page where i will check whether the user has logged in to the system (by checking the session value) in the page load and if not logged in,it will show a jQueryUI dialog for login.

My ASPX page contains these script in the head tag

<style type="text/css">      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-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none;  !important; cursor:pointer; position: relative; text-align: center; }      .ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em;  }      </style>  <script type="text/javascript">  $(function() {        var name = $("#name"),          email = $("#email"),          password = $("#password"),          allFields = $([]).add(name).add(email).add(password),          tips = $("#validateTips");        function updateTips(t) {          tips.text(t).effect("highlight",{},1500);      }          function checkRegexp(o,regexp,n) {            if ( !( regexp.test( o.val() ) ) ) {              o.addClass('ui-state-error');              updateTips(n);              return false;          } else {              return true;          }        }        $("#dialog").dialog({          bgiframe: true,          autoOpen: false,          height: 250,          modal: true,          buttons: {                  Cancel: function() {                  $(this).dialog('close');                  },                                                    NewUser: function() {                   $(this).dialog('close');                   window.location.href="Register.aspx";                  },                  'Sign in': function() {                  var bValid = true;                  allFields.removeClass('ui-state-error');                      bValid=true;                  isValidationFails=false;                  if (bValid)                  {                                                        // Go to another page                        }                   }              }          },          close: function() {              allFields.val('').removeClass('ui-state-error');          }      });            $('#create-user').click(function() {           $(this).dialog('close');           window.location.href="Register.aspx"      })      .hover(          function(){               $(this).addClass("ui-state-hover");           },          function(){               $(this).removeClass("ui-state-hover");           }      ).mousedown(function(){          $(this).addClass("ui-state-active");       })      .mouseup(function(){              $(this).removeClass("ui-state-active");      });    //});  var isAuthenticated = $("#isAuthenticated").val();  if (isAuthenticated && isAuthenticated == "false")  {    $("#dialog").dialog("open");  }  

});

</script>  

SErver side code (in Page_Load)

 if (Session["trCustomerId"] != null)          {              Response.Write("Logged in user");              ClientScript.RegisterHiddenField("isAuthenticated", "true");          }          else          {              ClientScript.RegisterHiddenField("isAuthenticated", "false");          }  

The program is working fine now . But the problem is when the page is loading,it is showing the UIDialog div for 1-2 seconds in the screen and then disappearing. I dont want to show like this.Can any one tell me how to solve this ?


Solution:1

Try setting the style on your dialog markup to display:none;

#dialog{     display: none;  }  

You can then show it if the dialog.open doesn't do it for you.

$('#dialog').show()  


Solution:2

try this, in html code type style="display:none;" for #dialog browser load html first


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »