I have a problem. When i load external data and i will use jquery events on that data - this is not working because the DOM does not know this. The event-delegation works perfect. I only want to know how to make the <div class="dialog"> original </div> loaded from source.txt known to the DOM or another solution to access the external data through the jquery Event. When I use the line div class="dialog"> original </div> in the Main document all works fine.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Animation</title>
<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>
<style>
iframe{
overflow:hidden;
}
</style>
<script>
$( function() {
$( ".dialog" ).dialog({
autoOpen: false,
width:700,
height:700,
show: {
},
hide: {
}
});
$(document).on("click","#link",function(){
$("#include").load("http://www.damago.de/dev/source.txt");
});
$(document).on( "click","#opener", function() {
$( ".dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="include"></div>
<a id="link" href="#">Include the source.txt with the code</a>
</body>
</html>
source.txt
<div class="dialog"> original </div>
<button id="opener">This is the text of the dialog</button>
Related
I have been experimenting with this for a couple of hours and I remain confused.
I am attempting to open a JQuery UI dialog (modal) when a link ([a] tag) is clicked, getting the content of the dialog window from the href of the link.
So far I have (gleaned from various places) where testb.html is a simple html fragment:
<div><p>Some text</p><p>more text</p</div>
The idea is that when anchor (link) is click the content of testb.html appears in the dialog.
Why doesn't this work???
David (70-year-old pre-Alzheimers ex-programmer with little HTML experience)s
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$("a.modal").click(function(e) {
e.preventDefault();
$(".container").load(this.href).dialog("open");
});
</script>
</head>
<body>
<div class="container"></div>
<p>Click!</p>
</body>
</html>
you can use this code:
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
</head>
<body>
<div class="container">
<p>Click!</p>
</div>
<div id="dialog" title="Basic dialog"></div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$('.modal').on('click', function () {
var data = $(this).attr('data-get')
$('#dialog').html(data)
$("#dialog").dialog()
});
</script>
</body>
</html>
You run the assignment before the element exists on the page. Wrap it in a load handler
$(function() { // on page load
$("a.modal").click(function(e) {
e.preventDefault();
$(".container").load(this.href)
});
})
You cannot open the container as a dialog the way you try it. You need something like
$(function() { // on page load
$(".container").dialog({
autoOpen: false,
width: 750,
modal: true
});
$("a.modal").click(function(e) {
e.preventDefault();
$(".container").load(this.href)
$(".container").dialog('open');
});
})
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#modal" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#modal" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="modal">This my first jQuery UI Dialog!</div>
<p>Click!</p>
</body>
</html>
This opens a jquery dialog modal when the anchor tag is clicked.
Combining bits from the previous answers, I got this, which works!
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
</head>
<body>
<p>Click!</p>
<div id="dialog" title="Basic dialog"></div>
<script>
$('.modal').on('click', function (e) {
e.preventDefault();
$('#dialog').load(this.href)
$("#dialog").dialog()
});
</script>
</body>
</html>
With codeangler's answer, the dialog appeared,but didn't have the content of testb.html, instead had the content of the div.
With mplungjan's answer... Well, I couldn't get it to work.
With Sepehr Pourjozi's answer, the dialog appeared but contained the literal text "testb.html", not the content of testb.html.
Taking hints from all three answers, I got it to work. And now I understand JQuery dialogs a little bit better.
Thanks, all.
David
I have .main-container DIV inside which there are 2 child DIV and I want to make these DIV's draggable.
I'm making use of jquery-ui for acheiving this. I'm able to drag if I write the below code :
index.js
$( function() {
$( ".text1" ).draggable({containment: 'parent'});
} )
$( function() {
$( ".text2" ).draggable({containment: 'parent'});
} )
Now I want to make the above code dynamic i.e I want to create a function which will receive class name as a parameter.
Like this:
function drag(val){
console.log("here", val)
$(val).draggable({containment: 'parent'});
}
However when I create a function it's not working. Someone let me know what is wrong over here.
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>New POC</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="main-container">
<div class="text1" ondrag="drag('.test1')">Text 1</div>
<div class="text2" ondrag="drag('.test2')">Text 2</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="./index.js"></script>
</body>
</html>
You need to include an additional attribute which is draggable='true' to the tags:
<div class="text1" draggable='true' ondrag="drag('.test1')">Text 1</div>
<div class="text2" draggable='true' ondrag="drag('.test2')">Text 2</div>
I know, this problem is postet here already in 236 variants. But even when I try to use those I understand, I don't get the correct behavior with my script. I have the following code (HTML and JS):
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal form</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 type="text/javascript">
$(function() {
var dialog, form
dialog = $('div#infoDialog').dialog({
autoOpen: false,
height: 600,
width: 500,
modal: true
});
$('#showInfos').click(function(e) {
e.preventDefault();
dialog.dialog('open');
});
});
</script>
</head>
<body>
<div id="infoDialog" title="Eventinfos">
Testeintrag
</div>
<button id="showInfos"><img src="images/apoa.gif" /></button>
<img src="images/apoa.gif" />
</body>
</html>
The button works fine as intended, but the "a href..." doesn't work at all. I already tried all alternatives I could think of, like dont use img's or try a # instead of the javascript: void(0) or like not use a variable dialog but always name it directly, but none worked. In the examples nearly the same code should worked fine. What did I do wrong?
I believe the problem is that both "buttons" are using the same ID. Either change the ID of one of them or switch them both to use classes (or some other selector).
IDs must be unique.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal form</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 type="text/javascript">
$(function() {
var dialog, form
dialog = $('div#infoDialog').dialog({
autoOpen: false,
height: 600,
width: 500,
modal: true
});
$('.showInfos').click(function(e){
e.preventDefault();
dialog.dialog('open');
});
});
</script>
</head>
<body>
<div id="infoDialog" title="Eventinfos">
Testeintrag
</div>
<button class="showInfos"><img src="images/apoa.gif" /></button>
<img src="images/apoa.gif" />
</body>
</html>
use class="showInfos" instead id="showInfos" and in js
$('.showInfos').click(function(e) {
e.preventDefault();
dialog.dialog('open');
});
find the jsbin here
In this fiddle a dialog is displayed :
http://jsfiddle.net/6M5g4/
Fiddle code :
<!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.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.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>
Is there a listener I can add which fires if the 'X' button is clicked or if the dialog is closed by a button on the dialog?
Sure, use the dialog's close event.
$(function () {
$("#dialog").dialog({
close: function (event, ui) {
alert('Closed!')
}
});
});
jsFiddle example
I have a rather simple page currently, and for some reason the maincss.css isn't being applied, which simply sets the background to an image. I know that it works because it was working before I added another css file for jquery styling. What about this is wrong?
<html xmlns=\ "http://www.w3.org/1999/xhtml\" xml:lang=\"en\">
<head>
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<title>Welcome to Jetty-9</title>
<link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<link href="css/maincss.css" rel="stylesheet">
<script type='text/javascript' src='js/jquery.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$( "#dialog" ).dialog({
width: 400,
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
});
</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>
It seems you might face problem because:
In CSS file the image path you have not given properly. (you should be giving a relative path from your CSS file and not to html)
In your new CSS file the body{} tag was overwritten to nothing.
For resolution:
Try checking the CSS by configuring the background-color to some color and test it. So this way you can make sure the CSS is working fine and try other options as well.
Try this
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Script-Type" CONTENT="text/javascript">
<title>Welcome to Jetty-9</title>
<link type="text/css" href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<link type="text/css" href="css/maincss.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
width: 400,
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
});
</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>