Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ Hide modal forum default: jqgrid - pop up

Posted by: publicGenome Nov 13 2015, 04:42 PM

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!

Posted by: 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;'.

Posted by: publicGenome Nov 15 2015, 11:23 AM

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

Posted by: 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.

Posted by: publicGenome Nov 15 2015, 04:03 PM

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.


Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)