The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Hide modal forum default: jqgrid - pop up
publicGenome
post Nov 13 2015, 04:42 PM
Post #1





Group: Members
Posts: 8
Joined: 13-November 15
Member No.: 23,739



Hi HTML-ers,

Thanks for the forum. I'm a noob in HTML, and web development. Pardon my naive questions, and apologies should I violated any forum rule.

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.

That is div id - dialog-analysis
CODE

<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 java script looks like:

CODE


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.
Again, thank you for your help in advance!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Nov 13 2015, 08:46 PM
Post #2


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



I'm not sure I understand the question. What does this mean: 'Upon clicked, fine windows pops out.'? Or do you mean five windows open up? I also see you are defining a form inside a form. You don't need to do that, only 1 form is needed.

To make the form hidden upon page load you need to use CSS. You can create a CSS rule for 'dialog-analysis' which has 'display: none;' in it. Or you can use the style attribute if you don't want to use a CSS rule. This will make the div, which contains the form, hidden when loaded. Then your button click only needs to show the div when clicked, 'display: block;'.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
publicGenome
post Nov 15 2015, 11:23 AM
Post #3





Group: Members
Posts: 8
Joined: 13-November 15
Member No.: 23,739



QUOTE(CharlesEF @ Nov 13 2015, 08:46 PM) *

I'm not sure I understand the question. What does this mean: 'Upon clicked, fine windows pops out.'? Or do you mean five windows open up? I also see you are defining a form inside a form. You don't need to do that, only 1 form is needed.

To make the form hidden upon page load you need to use CSS. You can create a CSS rule for 'dialog-analysis' which has 'display: none;' in it. Or you can use the style attribute if you don't want to use a CSS rule. This will make the div, which contains the form, hidden when loaded. Then your button click only needs to show the div when clicked, 'display: block;'.

Hi Charles,
Thank you for your reply.
My apologies, a typo in

QUOTE
Upon clicked, fine windows pops out.

It is
QUOTE
Upon clicked, window pops out.
That is, it works fine.

QUOTE

I also see you are defining a form inside a form.

Sorry, I did that by mistake.

If I'm not wrong, the below is what you're referring to:

CODE

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

To use for 'none' and 'block'?

Thanks again for your help, and reply.

Best,
pG

This post has been edited by publicGenome: Nov 15 2015, 12:12 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Nov 15 2015, 04:00 PM
Post #4


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



I thought you wanted the form hidden when the page loads without using javascript? That is what I was recommending, using CSS. Did I not understand your question? Yes, you need 'display: block;' in javascript to show the hidden form. But 'display: none;' can be used in the CSS section to hide the form when the page is loaded. No need for javascript to hide the form.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
publicGenome
post Nov 15 2015, 04:03 PM
Post #5





Group: Members
Posts: 8
Joined: 13-November 15
Member No.: 23,739



QUOTE(CharlesEF @ Nov 15 2015, 04:00 PM) *

I thought you wanted the form hidden when the page loads without using javascript? That is what I was recommending, using CSS. Did I not understand your question? Yes, you need 'display: block;' in javascript to show the hidden form. But 'display: none;' can be used in the CSS section to hide the form when the page is loaded. No need for javascript to hide the form.

Hi Charles,
You understood my question properly. smile.gif

I didn't know if form can be hidden in JS as well as CSS.
Thank you much for your reply. I'll go ahead with CSS.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 05:19 AM