Announcement

Collapse
No announcement yet.

Modal Form from Control Form

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Modal Form from Control Form

    Hi.

    How to I can call a Modal Form from a Control From. Or how to include jquery in a Control Form to call a Modal Form.

    Thanks!

  • #2
    Re: Modal Form from Control Form

    I have been working on this myself. You have to keep in mind that since since most of your form actions are PHP (server based) and jQuery is client based, it is a bit tricky if you are tying to call the dialog on a PHP event. If you are trying to create a button that loads a dialog, then you can do something as:

    In a blank form, on Execute:
    (will show a dialog)

    You can add this as a library, and then create PHP button to execute and run your code and then display a notice dialog. Do not confuse this with a prompt dialog to prompt the user to execute the PHP as the php will execute regardless due to the server/client issues.

    Code:
    ?>
    
    <!doctype html>
    <html lang="en">
    <head>
    	<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
    	<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
    	<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
        <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>
    	<script type="text/javascript">
    	$(function() {
    		$("#dialog").dialog({
    			bgiframe: true,
    			modal: true,
    			buttons: {
    				Ok: function() {
    					$(this).dialog('close');
    				}
    			}
    		});
    	});
    	</script>
    </head>
    <body>
    
    <div id="dialog" title="Download complete">
    	<p>
    		This is my message</b>.
    	</p>
    
    </div>
    
    </body>
    </html>
    
    <?php
    In looking at the online samples, you can see how to use the includes that are provided with SC5 instead of online:
    http://www.scriptcase.net/siteen/sam...pplication.php

    Regards,
    Scott.

    Comment


    • #3
      Re: Modal Form from Control Form

      Thanks so much scott! I will trying your solution.

      Comment


      • #4
        Re: Modal Form from Control Form

        Hi,

        Is anybody can help to create a Modal form that Captures some value and returns to the Parent (Calling) form..?

        I have a Control which would ask for PIN number from users. It verifies it and returns TRUE or FALSE to the Form(Parent)

        Thanks in advance

        Dhana

        Comment


        • #5
          Re: Modal Form from Control Form

          Hey Scott and others -

          Is there a trick to getting jQuery to run inside SC and/or getting the initial function to launch? I have had this issue with jQuery in the past, yet when I ran the accordion sample from SC it works fine. But this one above just outputs "This is my message." right on-screen as if the jQuery is not getting instantiated. And I have been trying to do other stuff in a blank application and can't get anything to execute jQuery wise. Scripts and libraries are linked right, the problem is in the execution of the initial jQuery initiator...

          Weird how the SC accordion sample works...

          thanks,

          David

          Comment


          • #6
            Re: Modal Form from Control Form

            I suppose those links are out of date ;-) to start...

            duh on my part... will check that first...

            Comment


            • #7
              Re: Modal Form from Control Form

              You can also download the jquery apps and reference the local files (preferred). I just referenced the online version to allow anyone to test.

              Depending on your requirements, SC5 also has some jquery included (/var/www/sc5/prod/third)

              Regards,
              Scott.

              Comment


              • #8
                Re: Modal Form from Control Form

                But like this doesn't work, it acts like it doesn't see the js files at all, yet image files I have used some notation for the src for instance and it worked...

                Code:
                <!doctype html>
                <html lang="en">
                <head>
                	<link type="text/css" href="../_lib/css/ui.all.css" rel="stylesheet" />
                	<script type="text/javascript" src="../_lib/js/jquery-1.4.2.min.js"></script>
                	<script type="text/javascript" src="../_lib/js/ui.core.js"></script>
                    <script type="text/javascript" src="../_lib/js/ui.dialog.js"></script>
                	<script type="text/javascript">
                	$(document).ready(function(){
                		$("#dialog").dialog({
                			bgiframe: true,
                			modal: true,
                			buttons: {
                				Ok: function() {
                					$(this).dialog('close');
                				}
                			}
                		});
                	});
                	</script>
                </head>
                <body>
                
                <div id="dialog" title="Download complete">
                	<p>
                		This is my message</b>.
                	</p>
                
                </div>
                
                </body>
                Yet, an example like this works, jquery does its thing:

                Code:
                ?>
                
                 <!DOCTYPE html>
                 <html lang="en">
                 <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                  <script src="http://ajax.googleapis.com/ajax/libs...jquery.min.js" type="text/javascript"></script>
                  <script type="text/javascript">
                   $(document).ready(function(){
                    $("a").click(function(event){
                     alert("As you can see, the link no longer took you to jquery.com");
                     event.preventDefault();
                    });
                   });
                   
                  </script>
                 </head>
                 <body>
                  <a href="http://jquery.com/">jQuery</a>
                 </body>
                 </html>
                
                
                <?php

                Comment


                • #9
                  Re: Modal Form from Control Form

                  Oddly, and I don't know what the solution was, but maybe others who read this read will have similar jQuery related issues. Though, I tested this outside of SC using same local application directory and url refs etc. so really had nothing to do with SC, so, sorry to hijack this thread... But, this code works in SC, for jQuery modal dialog, and has right linking for /lib within in SC etc.

                  I grabbed one of the stock CSS jquery themes and the jquery ui package, and works like a charm.

                  Code:
                  ?>
                  <!doctype html>
                  <html>
                  <head>
                  	<meta charset="utf-8">
                  	<title>Basic usage of the jQuery UI dialog</title>
                  
                  	<link rel="stylesheet" type="text/css" href="../_lib/css/ui-lightness/jquery.ui.all.css">
                  
                  	<script type="text/javascript" src="../_lib/js/jquery-1.4.2.min.js"></script>
                  	<script type="text/javascript" src="../_lib/js/jquery-ui.min.js"></script>
                  
                  	<script type="text/javascript">
                  	$(document).ready(function() {
                  		var $dialog = $('<div></div>')
                  			.html('this is the content of the dialog')
                  			.dialog({
                  			  	autoOpen: true,
                          		modal: true,
                  				title: 'Basic Dialog'
                  			});
                  
                  		$('#opener').click(function() {
                  			$dialog.dialog('open');
                  			// prevent the default action, e.g., following a link
                  			return false;
                  		});
                  	});
                  	</script>
                  </head>
                  <body>
                  
                  <button id="opener">Open the dialog</button>
                  
                  
                  </body>
                  </html>
                  
                  
                  <?php

                  As you can see, this also has the option for autoOpen which you can set to TRUE or FALSE and launch the dialog automatically or off of a button, as well as modal option etc.


                  Best regards,

                  David

                  Comment


                  • #10
                    Re: Modal Form from Control Form

                    Glad to hear you got it working. It's always the 5 minute problem that turns into a 5 hour headache.

                    Regards,
                    Scott.

                    Comment


                    • #11
                      good morning
                      the above modal form please an example with motion

                      like this http://www.karpodinis.gr/test.html


                      thanks

                      Comment

                      Working...
                      X