I am using jQuery UI.Dialog. I'm having a small problem, when I click the link to show dialog box the text from #Test disappears and the modal overlay is shown but the actual modal box is not displayed.
Using FireBug the dialog box is created but has Display:None so is not shown. Also, if I change this in firebug to Display:Block the dialog is shown but it is on the left hand side of my page... any suggestions?
My code is very simple:
<head>
<link href="Vader/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css">
<script src="javascripts/jquery.js" type="text/javascript"></script>
<script src="javascripts/ui.core.js" type="text/javascript"></script>
<script src="javascripts/ui.draggable.js" type="text/javascript"></script>
<script src="javascripts/ui.resizable.js" type="text/javascript"></script>
<script src="javascripts/ui.dialog.js" type="text/javascript"></script>
<script type='text/javascript'>
$(function() {
$("a").click(function(){
$('#Test').css('display','inline');
$("#Test").dialog({modal: true});
});
});
</script>
</head>
<body>
Test
<div id="Test" title="Test Title">Bla bla bla</div>
</body>
You might want to add to the click is e.preventDefault(); so it doesn't try to load the # which may refresh the page.
$("a").click(function(e){
e.preventDefault();
$('#Test').css('display','inline');
$("#Test").dialog({modal: true});
});
My guess would be it's not picking up your css file, have you confirmed it actually is?
There's nothing wrong with your code as far as I can tell, the following test works in my sandbox file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!-- Above Doctype should provide S mode in Moz, Safari, Opera, IE8 and A (almost standards) in IE6/7 -->
<head>
<meta http-equiv="Content-Type" content="application/text+html;utf-8"/>
<title>Sandbox</title>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.0");
</script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function(){
$('#Test').css('display','inline');
$("#Test").dialog({modal: true});
});
});
</script>
</head>
<body>
<div id="container">
Test
<div id="Test" title="Test Title">Bla bla bla</div>
</div>
</body>
</html>
<A> is not a block-level structure, that might be causing some trouble.
Try wrapping it up in a DIV, then make that div in the dialog instead.
I had the same problem and it turned out that the CSS file was not being found. Use firebug to load the css file. You might find that what shows up in Firebug is a "404 Not found".
Related
So I was trying a little loading bar but my JQuery doesn't load when I try this in FireFox & Chrome, it only loads on Safari.
this is my code:
<html>
<head>
<title>Mijn eerste spel</title>
<link href="opmaak.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="code.js"></script>
</head>
<body>
<div id="knop">
<div id="textknop">Gooi Steen</div>
<div id="laadbalk"></div>
</div>
<h1 id="money">$0</h1>
</body>
</html>
and my jq code is:
$(Document).ready(function(){
alert("test")
});
In Safari it produces the popup but any other browser just ignores my code.
Very simple, just change Document to document in javascript code.
With this code I want to show a jQuery UI dialog when I click on a button. However, the text of the dialog is shown for a brief time when the page loads. What is the right way to implement this?
My html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
.. html code ..
<button id="helpbutton" title="">Help</button>
<div id="helpdialog" title="Help dialog">
<p>Text in the dialog will be visible for a short time when the page loads</p>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script type="text/javascript" src="myJsFile.js"></script>
</body>
</html>
as you can see, I call my external scripts just before the end of the for performance reasons.
myJsFile.js:
//Fire up the help dialog when the help button is pressed
jQuery(function() {
jQuery( "#helpdialog" ).dialog({
autoOpen: false
});
jQuery( "#helpbutton" ).click(function() {
jQuery( "#helpdialog" ).dialog( "open" );
});
});
Solution (thanks to krzmig): Use this CSS code in the CSS file or in the section
#helpdialog {
display: none;
}
Did you load UI jQuery JS and CSS? Like in this example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
source: https://jqueryui.com/dialog/
edit:
For not showing dialog box when site is loading put to your CSS file code:
#helpdialog {
display: none;
}
or add to <head> section if you don't have external CSS.
<style>
#helpdialog {
display: none;
}
</style>
First include jquery as well.
Second place your scripts before your dialog in html so that it loads and hides the dialog before it could show up itself on your page. Here's the code (keep your myJsFile.js intact):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="helpbutton" title="">Help</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="myJsFile.js"></script>
<div id="helpdialog" title="Help dialog">
<p>Text in the dialog will NOT! be visible for a short time when the page loads</p>
</div>
</body>
</html>
You also need to include jquery main library. The required includes are jquery library, jquery ui js, and jquery ui css.
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script type="text/javascript" src="myJsFile.js"></script
I am new to javascript and am trying to make a simple dialog open when the page opens, but it simply just displays the text of the dialog as if its a normal paragraph, no dialog. Here's my index.html:
<html xmlns=\ "http://www.w3.org/1999/xhtml\" xml:lang=\"en\">
<head>
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<script type='text/javascript' src='js/jquery.js'></script>
<title>Welcome to Jetty-9</title>
<style type="text/css" title="maincss">
#import url(maincss.css);
</style>
<script type="text/javascript">
$(function() {
$("#dialog").dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
And my maincss.css simply puts a background image in for the body nothing else, and the js/jquery.js file is the latest version of jquery, and I ensured it is linked right by loading the page, viewing page source, then opening the js file by clicking it
You need to include jQuery UI to take advantage of the dialog.
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
You are missing jQuery UI. Include the below code in head of your page.
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css' rel='stylesheet' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js'></script>
Visit here for more CDN links of various versions of jquery ui & its themes.
you have to import the JQuery UI's api's AFTER the JQuery main file
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
This way is should work:
<html xmlns=\ "http://www.w3.org/1999/xhtml\" xml:lang=\"en\">
<head>
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<script type='text/javascript' src='js/jquery.js'></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<title>Welcome to Jetty-9</title>
<style type="text/css" title="maincss">
#import url(maincss.css);
</style>
<script type="text/javascript">
$(function() {
$("#dialog").dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
I'll assume you're trying to use jquery-ui dialog, if this is the case, you need to include jquery-ui files
These are latest versions from CDN
http://code.jquery.com/ui/1.10.3/jquery-ui.js
http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css
You could pick a different theme if required
Your code looks good and it is working. My guess is you're not properly importing the jQuery or jQuery UI.
Updated with reference to MaVRoSCy comments and take a look at this fiddle, working good.
The system at JSFiddler seems to think this is Ok too, but won't display the alert either. http://jsfiddle.net/dmafackler/zEEpB/3/
<!doctype html>
<html>
<head>
<title>foobar</title>
<script type="text/javascript" src="jquery.js" />
<script type="text/javascript">
$(document).ready(function() { alert("Is anybody home?"); });
</script>
</head>
<body>
<p>Copasetic.</p>
</body>
</html>
<script> tags aren't self-closing. You need to provide a closing tag:
<script type="text/javascript" src="jquery.js"></script>
If you don't, the HTML isn't parsed correctly:
I have a problem with Jquery load in dialog box.
I spent all night trying to figure out why the dialog box shifts to the right side of the screen when I loaded another file. Apparently loading different pages can affect it randomly. It can be center but at the very bottom, but I don't know why it is happening. All I know is the loading another page into a dialog box displaces the dialog box from the center.
This is the code i have:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.1.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
<script src="ProfilePage/jqueries.js"></script>
<script type="text/javascript">
$(
function()
{
$("#box").load("jquery1.html").dialog({modal:true,height:400,width:400});
}
)
</script>
</head>
<body>
<div id="parent" style="background-color:red;height:800px;width:800px;">
<div id="circle" style="position:relative;left:0px;height:800px;width:400px;background-color:green;float:left;">
</div>
<div id="box">
I want milk
</div>
<div id="sds" style="position:relative;float:left;left:5px;height:800px;width:399px;background-color:yellow;">
</div>
</div>
</body>
</html>
If I remove the load and just put a normal text in the div it works fine.
Can someone suggest an idea? Thanks!
just try to add it to the new line
$("#box").load("jquery1.html")
$("#box").dialog({modal:true,height:400,width:400});