Custom Dialog window, external files to make troubles, works only internal atm

Question

0.00/5 (No votes)

See more:

, +

Hello all,
I recently have been working on a JQuery Dialog message popup window. I have a current timer checking the time of the computer and if it is after 10 A.M. the Dialog window will appear.
I have the window working but I seem to only be able to get it working when I have all the code in the main window on a button click. By saying this I am meaning that the <Script> - Javascript/JQuery code, Style – CSS, and <Div> - HTML code is all in the window where this is going to appear.
I been trying to put the Script code in my external javascript file for the project I have been working on, and same goes with the CSS but when I do this my popup dialog window does not work.
I am looking for suggestions or anything that will help me achieve this. Or do you think I should leave it all in my index.html file? Which is my main page of the site.

Here is what I have for code for internal working and some external tries.

JavaScript

//internal code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>        <style>
            .ui-widget-header, .ui-state-default, .ui-button {
                background: #b9cd6d;
                border: 1px solid #b9cd6d;
                color: #FFFFFF;
                font-weight: bold;
            }
        </style>
<script>
        $(function () { 
            $("#cutoffwindow").dialog({
                autoOpen: false,
                buttons: {
                    OK: function ($this) { $(this).dialog("close"); }//,
                    //Cancel: function ($this) { $(this).dialog("close"); }
                },
                title: "success",
                modal: true,
                position: {
                    my: "center",
                    at: "center"
                }
            });
        });
        </script>

        <div id="cutoffwindow">Past accepted cutoff time</div>
        <!-- test cutoff window-->
        <button id="testcutoff" type="button">Test cutoff!</button>

//external code tries here
//javascript
  	  $('#testCutoff').click(function () { //(jQueryDialog);
  	      $('#cutoffDialog').dialog("open");
  	  });
  	  $('#testCutoff').click(function () {
  	      var $displayIt = $("#cutoffDialog");
  	      $displayIt.css('display', 'block');
  	  });
	function jQueryDialog() { 
	    $('#cutoffDialog').dialog({
	        autoOpen: false,
	        buttons: {
	            OK: function () { alert("You want this tomorrow!"); }
	        },
	        title: "title after cutoff time",
            modal: true,
	        position: {
	            my: "center",
                at: "center"
	        }
	    });
	}
//css
#cutoffDialog {
    display: none; 
}
//html
<button type="button" id="testCutoff">Cutoff Test</button>
        <div id="cutoffDialog">The time is after 10.A.M. <br /> Do you want your sandwich for tomorrow?</div>

//other code tries that seem to work but again I cannot get working in separate files
<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button{
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-1" ).dialog({
               autoOpen: false,  
            });
            $( "#opener" ).click(function() {
               $( "#dialog-1" ).dialog( "open" );
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div id="dialog-1" title="Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id="opener">Open Dialog</button>
   </body>
</html>

Posted 4-Dec-14 6:27am

TheBigBearNow

Add a Solution

Comments

SrikantSahu 4-Dec-14 13:56pm

Hi,
Actually for a normal dialog to load in a page jquery needs all the code to be already existing and downloaded. When a jquery dialog opens up it does not request new resources ( pages, .js, .css etc). What it actually does is some portion of your pages it displays with special properties ( Makes it modal, set gray back ground color, higher z-index) etc.

But if you really want to go with external files, best way would be to follow the below process
1) Create an html file lets say dialog.html
2) That html file should contain all your references to external files (.js & .css)
3) Now in your index page create a div and within that create an iframe.
4) Now set the src property of the iframe to your dialog.html.
5) Now the regular code to show up your dialog .
$('#dialogDiv').dialog({ .... });
6) This should be able to make your div show the iframe in a dialog mode.
7) Downloading the referenced files, iframe will do it for you.

Else you can have them in your index file as well.
Alternatively, you can also check $().load() method which actually fetches .html file. That .html file can be written in such a way to keep your contents of dialog. but here also the external scripts need to present in your index file only.

Thanks
Srikant

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)