I have this code to add an image in dialog box. When I click on button it adds the image to the dialog box the first time, but when I click the button second time the image is not displayed in dialog box. What is the problem?
<!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() {
//Button function
$("#button").click(function(){
$('<div id="dialog" title="title">Imageselected</div>').dialog({
resizable:false,
buttons: {"Enrol": function(){
$(this).dialog('close');
},
"CancelEnrol": function()
{
$(this).dialog('close');
}
}
});
$('#dialog').append('<img src="https://www.google.co.in/logos/doodles/2014/world-cup-2014-1-6584893165273088-res.png"/><br/>').append($(this).html());
});
});
</script>
</head>
<body>
<input type="button" id="button" value="Reset"/>
</body>
</html>
it happens because you are creating the dialog on every click and after it you are making the .append
You can make the append before create the dialog:
$(function() {
//Button function
$("#button").click(function(){
$('<div id="dialog" title="title">Imageselected</div>').append('<img src="https://www.google.co.in/logos/doodles/2014/world-cup-2014-1-6584893165273088-res.png"/><br/>').append($(this).html()).dialog({
resizable:false,
buttons: {"Enrol": function(){
$(this).dialog('close');
},
"CancelEnrol": function()
{
$(this).dialog('close');
}
}
});
});
});
the fiddle:
http://jsfiddle.net/nfhLjkv7/
If you does not need create the dialog on every click , just open the dialog on the click function
Related
I have a button with :hover and :focus css property. While hovering on it the color changes to red.
Now when i click on it a Alertify confirm box appears and then i press ok or cancel the color changes to red again because of :focus property.
How can i unbind :focus when clicked on ok or cancel.
<html>
<head>
<script src="https://cdn.jsdelivr.net/alertifyjs/1.8.0/alertify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/alertifyjs/1.8.0/css/alertify.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/alertifyjs/1.8.0/css/themes/default.min.css"/>
</head>
<style>
.btn-test:hover,.btn-test:focus{
background-color:red;
}
</style>
<body>
<button class="btn-test">Click Me</button>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(".btn-test").click(function(){
alertify.confirm('Confirmation', 'You clicked', function () {
//do nothing
}
, function () {
//do nothing
});
});
</script>
</html>
you have to just add this code in js file $(".btn-test").blur(); like this:
$(".btn-test").click(function(){
$(".btn-test").blur();
alertify.confirm('Confirmation', 'You clicked', function () {
//do nothing
}
, function () {
//do nothing
});
});
.btn-test:hover,.btn-test:focus{
background-color:red;
}
<html>
<head>
<script src="https://cdn.jsdelivr.net/alertifyjs/1.8.0/alertify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/alertifyjs/1.8.0/css/alertify.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/alertifyjs/1.8.0/css/themes/default.min.css"/>
</head>
<body>
<button class="btn-test">Click Me</button>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</html>
I want to click a button on my page then another div toggle on and load in that div another page, but it doesn't work.
HTML:
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.2.min_1.js"></script>
<script>
$(document).ready(function() {
$('#clickme').click(function() {
$('#me').animate({
height: 'toggle'
}, 1000
);
$("#me").load("page2.html")
});
});
</script>
</head>
<body>
<div id="clickme" style="color: #FFFFFF;">
Click here
</div>
<div id="me" style="border:1px solid #000; width:900px; height:300px;">
</div>
</body>
</html>
I believe your function can be simplified to use the normal callback of toggle or slidetoggle
$(function() {
$('#clickme').on("click",function() {
$('#me').toggle(function() {
$(this).load("page2.html");
});
});
});
But you might want to load before toggling:
$(function() {
$('#clickme').on("click",function() {
$('#me').load("page2.html",function() {
$('#me').slideToggle();
});
});
});
I want to show the div with id #flower when clicking on the link with id #button but it doesnt work. Heres is the code i wrote.. i made also a jsbin page to show you
any suggestions?
http://jsbin.com/xefanaji/3/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="front">
<div><p>Button</p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});
});
</script>
</body>
</html>
css
#button{
position:relative;
height:30px;
width:60px;
background-color:lightyellow;
left:40px;
top:40px;
}
#flower{
display:none;
position:relative;
top:-600px;
left:50px;
z-index:0;
}
#front {
z-index:1;
position:relative;
top:100px;
height:600px;
width:100%;
background-color:lightblue;
}
if i am not wrong.. you need to add id to your button ,if (<a ..>Button</a>) is the element you are talking about.
<div><p>Button</p></div>
//-^^^^^^^^^^----here
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
with CSS you have, i am sure you forget to add id to that a link
well few more thing,
always load script in your <head> section, and you don't need to add src in script tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
..
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
....
....
<script>
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});
});
</script>
Try this
<div id="front">
<div><p><a id="button" href="">Button</a></p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(
function(){
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
});
</script>
DEMO
Put the jQuery library in the head section of your document like below
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
If you need button you can use span instead of anchor e.g.
<span class="button">Button</span>
then add a little styling
.button {
font-size: 12px;
color: #333;
}
.button:hover {
color: #ddd;
}
and then put this script just before </body> tag
<script>
$(function() {
$(".button").click(function () {
$("#flower").show("slow");
});
});
</script>
You could use the revised jQuery below to accomplish this, the reason your code isnt working is because your link doesnt have the id button set.
$('#front a:first').on('click',function(e){
e.preventDefault();
$('#flower').show();
})
You are missing id #button for that link.
<a id="button" href="">Button</a>
I am learning how to use jQuery dialog. One link I found helpful is http://imperavi.com/redactor/examples/uidialog/. The code is listed below, but I don't know why it does not work.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Dialog</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<p>Open</p>
<div id="dialog-modal" title="Basic modal dialog" style="display: none;"></div>
<script type="text/javascript">
function showDialog()
{
$("#dialog-modal").dialog(
{
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
autoresize: false,
initCallback: function()
{
this.set('<p>Lorem...</p>');
}
});
}
});
}
</script>
</body>
</html>
The dialog appears after adding jquery-ui and css, but "Lorem..." does not show.
One more thing... Is it possible to pass a string to "showDialog" such that it can show different content based on different link? For example, adding "Open 1" and "Open 2" to show different string?
I think, you forgot to add jquery UI.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Dialog</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="path_to_jq_ui"></script>
</head>
<body>
<p>Open</p>
<div id="dialog-modal" title="Basic modal dialog" style="display: none;"></div>
<script type="text/javascript">
function showDialog(text)
{
$("#dialog-modal").html(text)
$("#dialog-modal").dialog(
{
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
autoresize: false,
initCallback: function()
{
this.set('<p>Lorem...</p>');
}
});
}
});
}
</script>
</body>
</html>
Here is working fiddle: http://jsfiddle.net/bY3F4/3/
Download JqueryUI from here
Edit: Dynamic dialog content added to code
Dialog is a part of jQuery UI. You have to include it as well.
the Dialog is in the JQuery UI, you only required the JQuery.
insert this in the beginning:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
Add jQuery UI Stylesheet
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" />
Add jQuery + jQuery UI
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
I want to show a message using bootstraps tooltip when the user enters more than 50 000 in an input.
Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"/>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(this).tooltip("hide");
$("#myInput").on("keyup", function() {
console.log(this.value);
if (this.value > 5000) {
$(this).tooltip("show");
$(this).val(50000);
} else {
$(this).tooltip("hide");
}
}).tooltip({
placement: "right",
trigger: "focus"
});
});
</script>
</head>
<body>
<input id="myInput" title="You cannot enter more than 50 000" />
</body>
</html>
or see http://jsfiddle.net/Ljxz2/
The problem is that tooltip is triggering the message on focus (I think), so the message is shown when the user clicks (or focuses) the input. How do I turn that off?
Just change the value of "trigger" in the options sent in the tooltip function call to "manual".
tooltip({
placement: "right",
trigger: "manual"
};
http://jsfiddle.net/YcQat/