I need few customisation in confirm box in jsp which were not possible using javascript but after a bit research found that Jquery would be useful to accomplish this requirement.
Tried below code but when button click action was performed confirm box was not getting displayed, Confused and unable to understand the issue.
Below is my code:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
<body>
<script type="text/javascript" >
$(document).ready(function(){
$("#docs").click(function(){
ConfirmDialog();
});
});
function ConfirmDialog(){
$('<div></div>').appendTo('body')
.html('<div><h6>'+"Do you want to export or open the document"+'?</h6></div>')
.dialog({
modal: true, title: '', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
Export: function () {
$(this).dialog("close");
alert("your document is being saved");
},
Open: function () {
//
$(this).dialog("close");
alert("your document will open in another window");
}
},
close: function (event, ui) {
$(this).remove();
}
});
};
</script>
<button id="docs">xxx docs</button>
</body>
</html>
Depending on the comments.
make sure that you are importing the following script
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
and they should be called before you call ConfirmDialog
You need to include the jQuery UI library.
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
Related
I am trying to initialize, tui-image-editor on my local host. I have downloaded this famous image editor from https://github.com/nhn/tui.image-editor
Here is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TUI Image Editor</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
<link rel="stylesheet" href="http://localhost/imageEditor/dist/tui-image-editor.css">
<script src="http://localhost/imageEditor/dist/tui-image-editor.js"></script>
<script>
var ImageEditor = require('tui-image-editor');
var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
includeUI: {
loadImage: {
path: 'jp.jpg',
name: 'SampleImage'
},
theme: blackTheme, // or whiteTheme
initMenu: 'filter',
menuBarPosition: 'bottom'
},
cssMaxWidth: 700,
cssMaxHeight: 500,
selectionStyle: {
cornerSize: 20,
rotatingPointOffset: 70
}
});
</script>
</head>
<body>
<div id="tui-image-editor" style="height: 200px">
<canvas></canvas>
</div>
</body>
</html>
In result, I am getting blank page, No error no warning
I am not getting way out of this situation, could you please identify where I am doing bad ?
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
When i add same code in jsp itself its working for me
like
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link href="<c:url value="/resources/css/jquery.dataTables.css" />"
rel="stylesheet">
<link href="<c:url value="/resources/demo.css" />" rel="stylesheet">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript"
src="http://code.jquery.com/jquery-1.12.0.min.js">
</script>
<script type="text/javascript" language="javascript"
src="<c:url value="/resources/js/jquery.dataTables.js" />">
</script>
<script type="text/javascript" language="javascript"
src="<c:url value="/resources/demo.js" />">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
/* "ajax": '<c:url value="/resources/data/arrays.txt" />' */
"ajax": "http://localhost:8080/SpringRestExample-1.0.0-BUILD-SNAPSHOT/rest/emp/draw",
"processing": true,
"serverSide": true,
"columns": [
{ "data": "id" },
{ "data": "name" },
{ "data": "createdDate" }
]
} );
} );
</script>
</head>
<body>
When i remove that ajax code and put it in js file its not working
Please give me some idea why its not getting called.
Error i got at java script level is, url got 404 error
From your question ajax is working. Problem is the URL(Since response code is 404). I think this should solve your problem.
instead of
"ajax": "http://localhost:8080/SpringRestExample-1.0.0-BUILD-SNAPSHOT/rest/emp/draw",
simply use
"ajax": "/SpringRestExample-1.0.0-BUILD-SNAPSHOT/rest/emp/draw",
Domain name added automatically.
We can create a button component on the fly by using the following code,
var $page = '<div/>'
$("<a>", {text: "Button"}).
buttonMarkup({
inline: false,
mini: true,
icon: "check"
}).on("click", function () {
//Click Function
}
).appendTo($page);
Like this how to create other JQM components/widgets or suggest me where to find that methods/events in the JQuery Mobile Docs.
Question updated on 10-12-13
Please check the following code
<!DOCTYPE html >
<head>
<title>:::: DYNAMIC JQM PAGE ::::: </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css"/>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
$(function () {
var page = $("<div/>", {
"data-role":"page"
}).append($("<h1/>")
.text("This is Header"))
.appendTo($.mobile.container);
})
</script>
</head>
<body>
</body>
</html>
above code is not working while creating a mobile page in the document body. How do i achieve this?...
I'm trying to get a popup to appear from a link in an MVC page, but the popup isn't popping up. The partial view is just replacing the current page in the browser. Why isn't is just leaving my current page in place and giving me a popup? My partial view just has a few words of text in it.
#Ajax.ActionLink(
"Open popup",
"GetNotes",
new { id = "5" },
new AjaxOptions
{
HttpMethod = "GET",
UpdateTargetId = "result",
InsertionMode = InsertionMode.Replace,
OnSuccess = "openPopup"
})
<br />
<div id="result" style="display:none;"></div>
<script type="text/javascript">
$("#result").dialog({
autoOpen: false,
title: 'Title',
width: 500,
height: 'auto',
modal: true
});
function openPopup() {
$("#result").dialog("open");
}
</script>
UPDATE:
Here's the complete source (from "View Source") I'm currently trying. When I click the link, nothing happens. What's going on? Am I missing a js file or something?
By the way, this URL is returning my partial view (currently just a couple words of plain text):
http://localhost:40353/Quote/GetNotes/5
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
<script src="/Scripts/people.js" type="text/javascript"></script>
<script src="/Scripts/kendo.web.min.js" type="text/javascript"></script>
<script src="/Scripts/console.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<link href="/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="/Styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="/Styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="result" style="display:none;"></div>
open popup
<script type="text/javascript">
$("#result").dialog({
autoOpen: false,
title: 'Title',
width: 500,
height: 'auto',
modal: true
});
$("#OpenPopup").click(function () {
$("#result").dialog("open");
$("#result").load("Quote/GetNotes/5");
});
</script>
</body>
</html>
I think you are missing reference to "jquery.unobtrusive-ajax.min.js" script file in the <head> section of your Layout (Master) Page.
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
The reason the partial view replaces your view in the browsers is #Ajax.ActionLink renders as a formed tag in the browser. So when your click on the link your actually.
What I presume you want to do is open the popup and place the partial's contents into the popup?
There is a few ways to achieve this.
Change your actionlink to a normal open popup
open popup
And add this function
$("#OpenPopup").click(function() {
$("#result").dialog("open");
// This is a neat wrapper that does a get request to the url specified and loads the html into the target div
$("#result").load("/GetNotes/5");
});
Check as well in your _Layout at the bottom:
</div>
</div>
</footer>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
Remove
#Scripts.Render("~/bundles/jquery")
and the modal pop up will run.