I'm trying to modify a web page template which is based on bootstrap and jquery. I tried to add a dialog like in this page but it's not working. (It's the button that's not working on "Open Positions" section)
Below you can download my files. You can check index.html file.
I add this javascript from the link
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
And added following lines for that javascript:
<div id="dialog" title="Contact Us">
<p>info#info.info</p>
</div>
<button id="opener">Open Dialog</button>
Why it's not working?
Another question; instead of using this jquery ui component, how can i jump to content to "Contact Us" section from "Open Positions" section? This also i wonder because they both in same html file.
Did you try show?
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "show" );
});
Got the error in your file: It is incorrect reference to the CSS:
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
There's an extra reference to jQuery twice that caused the issue. Please remove the other version of jQuery and move all the scripts to the bottom.
Related
I am using a jQuery UI dialog. This code here makes the dialog pop up when clicking an HTML button.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
</body>
</html>
This works fine, but I have an if else function here:
if(form.pswrd.value === "password")
{
window.open('page.html')/*opens the target page while Id & password matches*/
}
else
{
//jQuery Dialog opens HERE
}
}
The else function at the bottom is what I want to trigger the jQuery UI dialog. How can I make the else open up the jQuery dialog? I have already tried things like including this part of the script in my else but to no avail:
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );
Your code seems fine, you just need to trigger the dialog open inside the else clause:
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
<script>
$(function() {
$("#dialog").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$("#opener").on("click", function() {
if (form.pswrd.value === "password") {
window.open("page.html");
} else {
$("#dialog").dialog("open");
}
});
});
</script>
You don't need the click listener to open it manually
Just do:
else {
$( "#dialog" ).dialog( "open" );
}
$( "#opener" ).on( "click", function() {
if(form.pswrd.value === "password") {
window.open('page.html'); /*opens the target page while Id & password matches*/
} else {
$( "#dialog" ).dialog( "open" );
}
}
});
I have IE 11 and I am trying to open a dialog box with the click of a button but the dialog box which is opening is not what I want. It doesn't have a close icon and the layout is also very poor.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="//malsup.github.com/jquery.form.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<td class="tdx" bgcolor="#CCCCCC" id="sol" style="background-color:white;border-style:ridge;white-space: pre-wrap">
<div class="dialog">
<p style="white-space: pre-wrap"><%=solution%></p>
</div>
<button class="opener">Open Dialog</button>
</td>
I have added pre-wrap everywhere but the text seems to come in a single line. The text is properly formatted in the database.
JQuery code :
$('.opener').each(function() {
var dialog = $(this).prev('.dialog').dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$(this).click(function () {
dialog.dialog("open");
});
});
});
Ah Ha... I re-read your question and I think I understand the problem you are seeing.
jQuery UI dialogs require (1) the jQuery UI css reference, AS WELL AS (2) the jQuery UI code, AS WELL AS (3) plain ol' jQuery.
Equally important, you need to match the versions. When the versions do not match (especially when jQUI and the css for jQUI are for different versions), buttons will be out of alignment, borders will be missing, the whole appearance is whacked. You have version-itis (note: -itis is Latin suffix for pain).
Suggestion:
Remove all references to jQuery/jQuery UI in your code and add the following lines inside the <head> tags of your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
This will give you a version of jQuery / jQueryUI / css that are known to work together. If it works, you can even stick with it.
Reference:
Matching jQuery and jQuery-UI versions
It dosen't have a close icon and the layout is also very poor
I've just test your example, it's worked perfectly in IE 11.
HTML:
<div class="dialog">
<p style="white-space: pre-wrap">123123123</p>
</div>
<button class="opener">Open Dialog</button>
JS:
$('.opener').each(function(){
var dialog = $(this).prev('.dialog').dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$(this).click(function () {
dialog.dialog("open");
});
});
Here is a code that should work:
<title>jQuery UI Dialog - Animation</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>
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
<body>
<table>
<tr>
<td class="tdx" bgcolor="#CCCCCC" id="sol" style="background-color:white;border-: ;style:ridge;white-space: pre-wrap">
<div id="dialog" title="Basic dialog">
<%=solution%>
</div>
<button id="opener">Open Dialog</button>
</td>
</tr>
</table>
http://fiddle.jshell.net/0n4exLq8/
as for the formatting problem, it looks like you have linebreaks in your DB which html will not be able to render. You will have to format the string on the server side (replace \n with <br />) or better yet convert it to a <ol>
There is a simpler way to work with jQueryUI dialogs.
You only need one dialog, and just re-use it.
First, it is important to understand how a jQUI dialog works. You "assign" an element (a div) to the dialog when you initialize it:
$('#msg').dialog();
Thereafter, whenever you call the dialog's open method
$('#msg').dialog('open');
the dialog is displayed with the contents of that div.
To change the contents of the dialog, just change the contents of that div:
$('#msg').html('<p>Here is some totally new information</p>');
$('#msg').dialog('open');
In your program, all you need to do when a button is pressed is to grab the data (either via ajax, or from the cell next door, or whereever) and stick it into the dialog's div, then open the dialog.
When you close the dialog, it is a good idea to clear the div as well:
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
close: {
effect: "explode",
duration: 1000,
function(){
$('#msg').html('');
}
}
});
jsFiddle Demo
I am trying to open a dialog box in html page on click of a link but its showing me an error like-Object doesn't support property or method 'dialog' on click in ie.
Please check my code below
source files
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Dialog code
$("#link").click(function(c){
e.preventDefault();
var dialog = $('<p>Are you sure?</p>').dialog({
buttons: {
"Yes": function() {alert('you chose yes');},
"No": function() {alert('you chose no');},
"Cancel": function() {
dialog.dialog('close');
}
}
});
});
});
Replace the "c" with an "e" and remove the closing brackets at the end. You had one too many.
$("#link").click(function(e){
e.preventDefault();
var dialog = $('<p>Are you sure?</p>').dialog({
buttons: {
"Yes": function() {alert('you chose yes');},
"No": function() {alert('you chose no');},
"Cancel": function() {
dialog.dialog('close');
}
}
});
});
You need a div set up that will be the dialog, like in this example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Animation</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({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
</body>
</html>
Here's a jsbin with a working example with buttons
I have a problem to integrate a Jquery UI dialog box in an other script. What i want to do is to detect user inactivity and after a certain inactivity time showed a dialog box to ask to continue or close session. My code :
<link href="css/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.js"></script>
</head>
<body>
<div id="dialog-confirm" title="Session expirée">
<p><span style="float:left; margin:0 0px 0px 0;"></span>Session expire, continue ?</p>
</div>
<script>
var theTime;
document.onmousemove=stockTime;
function stockTime() {
currentTime=new Date();
theTime=currentTime.getTime();
}
function verifTime() {
currentTime=new Date();
var timeNow=currentTime.getTime();
if (timeNow-theTime>10000) {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:190,
modal: true,
buttons: {
"Continue": function() {
$( this ).dialog( "close" );
},
"End": function() {
$( this ).dialog( "close" );
}
}
});
}
}
window.setInterval("verifTime()",2500);
</script>
My console send me that message : " TypeError: $(...).dialog is not a function ". I have no idea of where is the problem ...
Thanks for your help, and sorry for my bad english !
Check if all files are loaded in proper order
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Your remaining code is working fine.
Tested in JSBIN
where u added jquery? If u haven't added it, added it above it your script, and if you added it, then I think you added it below your script, move your script after jquery. and after doing this, load your script after dom loads as
$(function(){
//Put your Script here
})
I am trying to play with jQuery UI, dialog in particular. First I tried the sample code and it works fine:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dialog demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
</head>
<body>
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>
</body>
</html>
Now, I am trying to create button and dialog dynamically in the script, so I rewrote the code as:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dialog demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
// Create button
var open_button = document.createElement("button");
open_button.appendChild(document.createTextNode("Open the dialog"));
open_button.setAttribute("id", "opener");
document.body.appendChild(open_button);
// Creating dialog
var my_dialog = document.createElement("div");
my_dialog.setAttribute("title", "Dialog");
my_dialog.setAttribute("id", "dialog");
document.body.appendChild(my_dialog);
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>
</head>
<body>
</body>
</html>
And now it fails with the error "body is null". Why is that?
But even if I create dummmy DOM inside the body:
<div id="dummy_div"></div>
... and then, inside the script, append both the button and the dialog to it instead of body it still does not work.
$("#dummy_div").append(open_button);
$("#dummy_div").append(my_dialog);
I am probably missing some HTML basics, I would appreciate any explanation.
Thanks.
You are attempting to create the element before your HTML is rendered.
Use this:
$(function() {
$("#dummy_div").append(open_button);
$("#dummy_div").append(my_dialog);
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
Good luck
Note
$(function() { ... }); is the same thing as $(document).ready()
Read about document.ready() here
Read that for more information about DOM ready.
JavaScript is executed immediately when it is encountered in the page. So in your second case, you are trying to write to the <body> element before the browser has created it. Hence why it is null.
Wrap the script in a window.load() or a $(document).ready() function and you should have everything working.
This will have the JavaScript wait until the entire DOM has been rendered before trying to do your stuff.
This is your code on jsfiddle. It's work
http://jsfiddle.net/abdennour/795Yp/
If you want to embedded it in web page you should call it in the following function :
$(function(){
})
so :
$(function(){
// Create button
var open_button = document.createElement("button");
open_button.appendChild(document.createTextNode("Open the dialog"));
open_button.setAttribute("id", "opener");
document.body.appendChild(open_button);
// Creating dialog
var my_dialog = document.createElement("div");
my_dialog.setAttribute("title", "Dialog");
my_dialog.setAttribute("id", "dialog");
document.body.appendChild(my_dialog);
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
})