I've worked with JS a lot in school, but we never used libraries. There's so little info online as to how to succesfully add one with all the necessary external resources to a project.
I'm trying to add a library that uses jQuery to have a small window pop-up inside the page (http://jsfiddle.net/55DBx/1/) of a website I'm working on but no matter what I do, it doesn't work as it's supposed to. On jsFiddle, it says the library needs jquery-ui.js and jquery-ui.css which I've both linked to my HTML file as follows:
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
and I've added the sample code from jsFiddle to my project, and it doesn't work. The pop-up window's content just shows up directly on the page.
<button id="btnExample">open the dialog</button>
<div id="dialog" title="Test">
<img src="image.png" />
</div>
<script>$( "#dialog" ).dialog({ autoOpen: false });
$( "#btnExample" ).click(function() {
$( "#dialog" ).dialog( "open" );
});</script>
What am I missing? :(
You may place the library references in wrong places, you should place them within the <head></head> section.
And in your css reference, you are adding the link for rel attribute, which is used for specifies the relationship between the current document and the linked document/resource, you should add the link for href attribute.
$( "#dialog" ).dialog({ autoOpen: false });
$( "#btnExample" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<button id="btnExample">open the dialog</button>
<div id="dialog" title="Randy">
<img src="http://icons.iconarchive.com/icons/sykonist/south-park/256/Randy-Marsh-Jamming-2-icon.png" />
</div>
The entire code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
autoOpen: false
});
$("#btnExample").click(function() {
$("#dialog").dialog("open");
});
});
</script>
</head>
<body>
<button id="btnExample">open the dialog</button>
<div id="dialog" title="Randy">
<img src="http://icons.iconarchive.com/icons/sykonist/south-park/256/Randy-Marsh-Jamming-2-icon.png" />
</div>
</body>
</html>
Related
I try to run some examples from Jquery site and some videos i' ve seen, but it seems like i can't execute them properly. Here's my code :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
$("#btnclick").click(function() {
$("#divpopup").dialog({
title: "blabla",
width: 430,
height: 200,
modal: true,
buttons: {
Close:
function() {
$(this).dialog('close');
}
}
});
});
})
</script>
</head>
<body>
<div id="divpopup" style="display:none">
blablablabla
</div>
<button type="button" id="btnclick">Click me</button>
</body>
</html>
I can't find what's wrong, the only thing it may be is that i haven't input an important library or something. Every one of my explorers shows me the button, but clicking it doesn't trigger the modal window. Any ideas?
Thank you
Jquery library references should be in below order.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
I am using this simple way to submit a form in a pop up window (which need to be done with vanilla JS)
<form onsubmit="CheckoutProducts.onSubmitForm(this);" action="/product/"
method="post" name="paymentForm" id="paymentForm">
and this is my JS code
var CheckoutProducts = CheckoutProducts || {
onSubmitForm: function(form) {
window.open('', 'formpopup','width=400,height=400,resizeable,scrollbars');
form.target = 'formpopup';
document.paymentForm.submit();
}
}
It is working fine in Chrome, but for some reason it is not working in Firefox and IE, it just opens the pop up with the blank page, What am I doing wrong?
Very simple would be to use tested component that works in all major browsers in the same way.
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
<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>
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
I am trying to use the jQuery UI Dialog. But it will not open first time. Consider:
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="dialog.js"></script>
</head>
<body>
<p>Hello</p>
<div id="dialog" title="Alert" style="display: none;"></div>
</body>
</html>
where dialog.js is:
$(document).ready(function(){
showAlert("1");
showAlert("2");
});
function showAlert(str) {
$( "#dialog" ).html(str);
$( "#dialog" ).dialog({
modal: true,
title: "Alert",
buttons: {
"OK": function() {
document.getElementById("submit").value="Submit";
$( this ).dialog( "close" );
}
}
});
}
This will only show the second dialog, the first dialog (with text "1") seems to be simply ignored..
See also jQuery UI Dialog - Won't open the first time.
I'm trying to create a dialog (on click) for feedback. I've tried simple things first.
Here's the fiddle
$("#feed_win").dialog({
autoOpen:false;
});
$("#feedback").click( function() {
$( "#feed_win" ).dialog( "open" );
});
But every time on load the dialog contains are shown before the button click event. Any help will be useful.
So, now i tried this.
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$("#feedback").button().click(function() {
$("#feed_win").dialog("open");
});
$("#feed_win").dialog({
autoOpen: false,
modal: true,
height: 300,
width: 400
});
</script>
</head>
<body>
<button id="feedback">Delete profile</button>
<div id="feed_win">
<h2>This is feedback form</h2>
<p>You can add your feedback here</p>
</div>
</body>
But the dialog div is displayed on page load. why? It should be displayed after clicking button.
You need to include jQuery UI script in the head:
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Here is fiddle: DEMO
Everything else you wrote is good, just add that line
Problem:
The dialog div is displaying without the buttons being pressed, and does not appear as an overlay when I press them. I'm tearing my hair out, so thanks in advance.
Code:
Includes:
<script src="js/jquery-1.5.1.min.js"></script>
<script src="js/ui/jquery.ui.core.js"></script>
<script src="js/ui/jquery.ui.widget.js"></script>
<script src="js/ui/jquery.ui.position.js"></script>
<script src="js/ui/jquery.ui.autocomplete.js"></script>
<script src="js/ui/jquery.ui.dialog.js"></script>
Css:
<link rel="stylesheet" type="text/css" href="css/jquery.ui.autocomplete.
<link rel="stylesheet" type="text/css" href="css/jquery.ui.all.
<link rel="stylesheet" type="text/css" href="css/jquery.ui.theme.
<link rel="stylesheet" type="text/css" href="css/jquery.ui.dialog.css" />
Buttons: <a class="phoneadder">Stuff</a>
Scripts:
<script>
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true
}
);
$( ".phoneadder" ).click(function() {
$( "#dialog-form" ).dialog( "open" );
return false;
});
</script>
Dialog:
<div id="dialog-form" title="Create new phone">
<p>All form fields are required.</p>
<form>
<fieldset>
...some html here
</fieldset>
</form>
</div>
Place the initializer in your document.ready, or as shorthand:
$(function() { $("#dialog-form").dialog(autoOpen... ); } );
Alternatively, make sure your scripts are run after the div is created, so like, in the footer.
Try putting your jQuery code in the $(document).ready function like this:
$(document).ready(function () {
/// your code here
});
Try this,
$(function()
{
$( ".phoneadder" ).click(function() {
$( "#dialog-form" ).dialog({
height: xxx,
width: xxx,
modal: true
});
return false;
});
});
Why don't you just put the dialog function in the click event handler?
<script>
$(function()
{
$( ".phoneadder" ).click(function() {
$( "#dialog-form" ).dialog({
height: 300,
width: 350,
modal: true
});
return false;
});
});
</script>