Modal form: jqgrid- hide by default - show on button click

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
publicGenome
Forum Contributor
Posts: 110
Joined: Thu Apr 16, 2015 7:55 am

Modal form: jqgrid- hide by default - show on button click

Post by publicGenome »

Hi There,

I'm trying to create a modal form. I've jqgrid. in Jqgrid, on click of a button a dialog box fires up, with abc details, form.

The form looks like:
That is fiv id - dialog-analysis

Code: Select all

<div id="dialog-analysis" title="Add Analysis">
<form >

<form>
<fieldset>
	  <div>
      <label for="name">Name</label>
      <input type="text" name="name" id="name" value="" class="text ui-widget-content ui-corner-all"></br>
      </div>
       <div>
      <label for="email">Email</label>
      <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all"></br>
      </div>
       <div>
      <label for="password">Password</label>
      
      <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all"></br>
      </div>
 
      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
  </form>

</form>
</div>
My javascript looks like:

Code: Select all


document.getElementById("dialog-analysis").style.display="none";

	$("#grid_illume").navButtonAdd('#pager_illume',{
		caption:"Add Analysis",
		onClickButton: function() 
		{
			var dialog = $("#dialog-analysis").dialog({
			      autoOpen: false,
			      height: 300,
			      width: 350,
			      modal: true,
			      buttons: {
			          'Cancel': function() {
			              dialog.dialog( "close" );
			            },
			            'Confirm': function(){
			            	
			            }
			      }
				
			});
			 dialog.dialog("open");
		}
		
	});
However, I've to write:

document.getElementById("dialog-analysis").style.display="none"; at the top to not to display the form until the button is clicked. Upon clicked, fine windows pops out.

I was wonder if there's any other way to hide?
I used the sample from:

http://jqueryui.com/dialog/#modal-form

And here, the code doesn't use (or similar):
document.getElementById("dialog-analysis").style.display="none";

That is what interests me.

Kindly help.
Post Reply