I have a kendo modal window, In which i have a form, so before closing I want to alert the user that there might be changes for that you have not saved. the problem is, kendo modal window seems to have only close event, so if I preventDefault on close event then it is difficult to close, and If I try to add custom 'X' button then it doesn't seem to be seating on the top right corner. any help/direction is appreciated. thanks
Try this:
function onClose(e) {
if (e.userTriggered) {
e.preventDefault();
if (window.confirm('Are you sure?')) {
dialog.data("kendoDialog").close();
}
}
}
Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="https://demos.telerik.com/kendo-ui/dialog/events">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.510/styles/kendo.default-ocean-blue.min.css" />
<script src="https://kendo.cdn.telerik.com/2022.2.510/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.510/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
<script src="../content/shared/js/console.js"></script>
</head>
<body>
<div id="example">
<span id="show" style="display:none" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md hidden-on-narrow">Click here to open the dialog.</span>
<div id="dialog"></div>
<div class="responsive-message"></div>
<script>
var dialog = $("#dialog");
var show = $("#show");
dialog.kendoDialog({
width: "400px",
title: "Software Update",
closable: true,
modal: false,
content: "<p>A new version of <strong>Kendo UI</strong> is available. Would you like to download and install it now?<p>",
actions: [
{ text: 'Close', action: onClose },
{ text: 'OK', primary: true }
],
close: onClose
});
function onClose(e) {
if (e.userTriggered) {
e.preventDefault();
if (window.confirm('Are you sure?')) {
dialog.data("kendoDialog").close();
}
}
show.fadeIn();
}
show.click(function () {
dialog.data("kendoDialog").open();
show.fadeOut();
});
</script>
<style>
#example {
min-height: 370px;
}
#example .box {
margin: 0;
}
#show {
text-align: center;
position: absolute;
white-space: nowrap;
padding: 1em;
cursor: pointer;
margin-top: 30px;
}
</style>
</div>
<div class="kd-example-console">
<div class="header">
<span class="title">CONSOLE LOG</span>
<span class="clear kd-text-secondary">Clear log</span>
</div>
<div class="console"></div>
</div>
</body>
</html>
Dojo
Related
Total newb here. Buttons that insert text into a word document no longer work after implementing a drop down menu that hides buttons based on selection. It worked at first when I just had several buttons inserting text snippets but now that I have added a drop down menu to change what buttons are shown and accessible to be clicked, the buttons no longer work. I have been banging my head against the wall all day and cannot figure out what I messed up.
I was generally following Microsofts tutorial HERE and THIS youtube video on the dropdown box.
I am sure this is a really novice question but any help is appreciated. Thank you!
'use strict';
(function () {
Office.onReady(function () {
// Office is ready.
$(document).ready(function () {
// The document is ready.
// Use this to check whether the API is supported in the Word client.
if (Office.context.requirements.isSetSupported('WordApi', '1.1')) {
// Do something that is only available via the new APIs.
$('#rogincorporate').click(insertRogIncorporate);
$('#supportedVersion').html('This code is using Word 2016 or later.');
}
else {
// Just letting you know that this code will not work with your version of Word.
$('#supportedVersion').html('This code requires Word 2016 or later.');
}
});
});
async function insertRogIncorporate() {
await Word.run(async (context) => {
// Create a proxy object for the document.
const thisDocument = context.document;
// Queue a command to get the current selection.
// Create a proxy range object for the selection.
const range = thisDocument.getSelection();
// Queue a command to replace the selected text.
range.insertText('"Responding Party adopts and incorporates the General Response and Objections above in response to this interrogatory as though separately set forth herein. "\n', Word.InsertLocation.replace);
// Synchronize the document state by executing the queued commands,
// and return a promise to indicate task completion.
await context.sync();
console.log('Added a incorporate text.');
})
.catch(function (error) {
console.log('Error: ' + JSON.stringify(error));
if (error instanceof OfficeExtension.Error) {
console.log('Debug info: ' + JSON.stringify(error.debugInfo));
}
});
}
})();
/* Page-specific styling */
#content-header {
background: #2a8dd4;
color: #fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80px;
overflow: hidden;
}
#content-main {
background: #fff;
position: fixed;
top: 80px;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.padding {
padding: 15px;
}
.hide {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Word Add-In with Commands Sample</title>
<script src="Scripts/jquery-3.6.0.js" type="text/javascript"></script>
<script src="Scripts/MessageBanner.js" type="text/javascript"></script>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<!-- To enable offline debugging using a local reference to Office.js, use: -->
<!-- <script src="Scripts/Office/MicrosoftAjax.js" type="text/javascript"></script> -->
<!-- <script src="Scripts/Office/1/office.js" type="text/javascript"></script> -->
<script src="Home.js" type="text/javascript"></script>
<link href="Home.css" rel="stylesheet" type="text/css" />
<link href="../Content/Button.css" rel="stylesheet" type="text/css" />
<link href="../Content/MessageBanner.css" rel="stylesheet" type="text/css" />
<!-- For Office UI Fabric Core, go to https://aka.ms/office-ui-fabric to learn more. -->
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.0/css/fabric.min.css">
<!-- To enable the offline use of Office UI Fabric Core, use: -->
<!-- link rel="stylesheet" href="Content/fabric.min.css" -->
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
outline: none;
}
body {
font-family: 'Times New Roman', sans-serif;
}
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 70px 0;
max-width: 400px;
margin: 0 auto;
}
.menu,
.content {
width: 100%;
}
select {
width: 100%;
padding: 15px;
font-size: 16px;
font-weight: 700;
font-family: 'Times New Roman', sans-serif;
border: none;
border-radius: 8px;
border: 2px solid #3f51b5;
box-shadow: 0 15px 15px #efefef;
background: #e8eaf6;
}
.padding {
justify-content: center;
}
.data {
display: none;
}
</style>
</head>
<body>
<div id="content-header">
<div class="padding">
<h1>Discovery Toolkit</h1>
</div>
</div>
<div class="wrapper">
<div class="menu">
<br />
<h2>Type of Discovery:</h2>
<br />
<select id="name">
<option value="rog">Interrogatories</option>
<option value="rfp">Requests for Production</option>
<option value="rfa">Requests for Admission</option>
</select>
<br />
<br />
</div>
<div class="content">
<div id="rog" class="data">
<h3>Interrogatory Objections</h3>
<p>Click the appropriate button to insert an objection.</p>
<br />
<button id="rogincorporate">Incorporate General Response and Objections</button>
<br /><br />
</div>
<div id="rfp" class="data">
</div>
<div id="rfa" class="data">
</div>
</div>
</div>
<div id="supportedVersion" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#name").on('change', function () {
$(".data").hide();
$("#" + $(this).val()).fadeIn(700);
}).change();
});
</script>
</body>
</html>
remove this from your html
<script>
$(document).ready(function () {
$("#name").on('change', function () {
$(".data").hide();
$("#" + $(this).val()).fadeIn(700);
}).change();
});
</script>
this function is hiding your HTML element that has class data
I am brand new to coding and cannot figure out why this is not working. In brief, I want to make a Word add-in where I can click a button and it will insert a sentence into the Word document at the currently selected location. I had it working but broke it when I followed a tutorial on adding a dropdown box to change what buttons were shown to click. I was generally following Microsofts tutorial HERE and THIS youtube video on the dropdown box.
I am sure this is a really novice question but any help is appreciated. Thank you!
'use strict';
(function () {
Office.onReady(function () {
// Office is ready.
$(document).ready(function () {
// The document is ready.
// Use this to check whether the API is supported in the Word client.
if (Office.context.requirements.isSetSupported('WordApi', '1.1')) {
// Do something that is only available via the new APIs.
$('#rogincorporate').click(insertRogIncorporate);
$('#supportedVersion').html('This code is using Word 2016 or later.');
}
else {
// Just letting you know that this code will not work with your version of Word.
$('#supportedVersion').html('This code requires Word 2016 or later.');
}
});
});
async function insertRogIncorporate() {
await Word.run(async (context) => {
// Create a proxy object for the document.
const thisDocument = context.document;
// Queue a command to get the current selection.
// Create a proxy range object for the selection.
const range = thisDocument.getSelection();
// Queue a command to replace the selected text.
range.insertText('"Responding Party adopts and incorporates the General Response and Objections above in response to this interrogatory as though separately set forth herein. "\n', Word.InsertLocation.replace);
// Synchronize the document state by executing the queued commands,
// and return a promise to indicate task completion.
await context.sync();
console.log('Added a incorporate text.');
})
.catch(function (error) {
console.log('Error: ' + JSON.stringify(error));
if (error instanceof OfficeExtension.Error) {
console.log('Debug info: ' + JSON.stringify(error.debugInfo));
}
});
}
})();
/* Page-specific styling */
#content-header {
background: #2a8dd4;
color: #fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80px;
overflow: hidden;
}
#content-main {
background: #fff;
position: fixed;
top: 80px;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.padding {
padding: 15px;
}
.hide {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Word Add-In with Commands Sample</title>
<script src="Scripts/jquery-3.6.0.js" type="text/javascript"></script>
<script src="Scripts/MessageBanner.js" type="text/javascript"></script>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<!-- To enable offline debugging using a local reference to Office.js, use: -->
<!-- <script src="Scripts/Office/MicrosoftAjax.js" type="text/javascript"></script> -->
<!-- <script src="Scripts/Office/1/office.js" type="text/javascript"></script> -->
<script src="Home.js" type="text/javascript"></script>
<link href="Home.css" rel="stylesheet" type="text/css" />
<link href="../Content/Button.css" rel="stylesheet" type="text/css" />
<link href="../Content/MessageBanner.css" rel="stylesheet" type="text/css" />
<!-- For Office UI Fabric Core, go to https://aka.ms/office-ui-fabric to learn more. -->
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.0/css/fabric.min.css">
<!-- To enable the offline use of Office UI Fabric Core, use: -->
<!-- link rel="stylesheet" href="Content/fabric.min.css" -->
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
outline: none;
}
body {
font-family: 'Times New Roman', sans-serif;
}
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 70px 0;
max-width: 400px;
margin: 0 auto;
}
.menu,
.content {
width: 100%;
}
select {
width: 100%;
padding: 15px;
font-size: 16px;
font-weight: 700;
font-family: 'Times New Roman', sans-serif;
border: none;
border-radius: 8px;
border: 2px solid #3f51b5;
box-shadow: 0 15px 15px #efefef;
background: #e8eaf6;
}
.padding {
justify-content: center;
}
.data {
display: none;
}
</style>
</head>
<body>
<div id="content-header">
<div class="padding">
<h1>Discovery Toolkit</h1>
</div>
</div>
<div class="wrapper">
<div class="menu">
<br />
<h2>Type of Discovery:</h2>
<br />
<select id="name">
<option value="rog">Interrogatories</option>
<option value="rfp">Requests for Production</option>
<option value="rfa">Requests for Admission</option>
</select>
<br />
<br />
</div>
<div class="content">
<div id="rog" class="data">
<h3>Interrogatory Objections</h3>
<p>Click the appropriate button to insert an objection.</p>
<br />
<button id="rogincorporate">Incorporate General Response and Objections</button>
<br /><br />
</div>
<div id="rfp" class="data">
</div>
<div id="rfa" class="data">
</div>
</div>
</div>
<div id="supportedVersion" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#name").on('change', function () {
$(".data").hide();
$("#" + $(this).val()).fadeIn(700);
}).change();
});
</script>
</body>
</html>
I have base tag in my html page, and there is links that actually references to this base url, but, when i want to put a url that not references to the base url- it's not working!!
the urls that not references to the base url is:
imageUrl: "images/like.png",
contentUrl: "controls/small-pie-chart.html"
this is the code:
<base href="http://demos.telerik.com/kendo-ui/tabstrip/right-to-left-support" >
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.metroblack.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css" />
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
<div id="example">
<div class="k-rtl">
<div class="demo-section k-content">
<div id="tabstrip-images"></div>
</div>
<script>
$("#tabstrip-images").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
},
dataTextField: "text",
dataImageUrlField: "imageUrl",
dataContentUrlField: "contentUrl",
dataSource: [
{
text: "נתונים כלליים",
imageUrl: "images/like.png",
contentUrl: "controls/small-pie-chart.html"
},
{
text: "מוכנות ביצוע",
imageUrl: "images/like.png",
contentUrl: "controls/small-pie-chart.html"
}
]
}).data("kendoTabStrip").select(0);
</script>
</div>
</div>
<style>
html,
body{
position: fixed;
height: 100%;
width:100%;
margin: 0;
padding: 0;
border-width: 0;
}
#tabstrip-parent,
#tabstrip {
margin: 0;
padding: 0;
border-width: 0; }
.k-tabstrip .k-content {
position: fixed;
height: 100%;
width:100%;
}
</style>
Try with "/" at end of base URL
<base href="http://demos.telerik.com/kendo-ui/tabstrip/right-to-left-support/" >
I would like to qtip some links but not all,
each link is different
here is a example of the NON Working code,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>qTip2 - My test case - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="/css/result-light.css"/>
<script type='text/javascript' src="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.js"></script>
<link rel="stylesheet" type="text/css" href="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.css"/>
<style type='text/css'>
body{
padding: 50px;
}
.qtip-wiki{
max-width: 385px;
}
.qtip-wiki p{
margin: 0 0 6px;
}
.qtip-wiki h1{
font-size: 20px;
line-height: 1.1;
margin: 0 0 5px;
}
.qtip-wiki img{
float: left;
margin: 10px 10px 10px 0;
}
.qtip-wiki .info{
overflow: hidden;
}
.qtip-wiki p.note{
font-weight: 700;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
// Create the tooltips only when document ready
$(document).ready(function()
{
// MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
$('a').each(function() {
$(this).qtip({
content: {
text: 'Loading...',
ajax: {
url: 'http://qtip2.com/demos/data/snowyowl',
loading: false
}
},
position: {
viewport: $(window)
},
style: 'qtip-wiki'
});
});
});
});//]]>
</script>
</head>
<body>
<a href='non_QTip_Link.php' target='_blank'>Snowy Owl 0</a>
<br><br>
<a href='qtip_link_Yes1.php' onclick=$qTIPThisLink>Snowy Owl 1</a>
<a href='non_QTip_Link.php'>Snowy Owl 00</a>
<br><br>
<a href='qtip_link_Yes2.php' onclick=$qTIPThisLink>Snowy Owl 2</a>
</body>
</html>
I would like to replace: url: 'http://qtip2.com/demos/data/snowyowl',
with the URL that was clicked and place it here and if the onclick was not fired then Qtip would not trigger as well.
I found a example at http://jsfiddle.net/craga89/L6yq3/ but it loads only one link using the same URL and it looks as if it will qTip all of the 'A' href's on the page I don't want it to do that and it also fires on mouseover I want it onclick only because I don't want to load the page until the user clicks the link.
You can give the a tags that you want to have qtip a class like:
<a href='....' class='qtip-link'> LINK </a>
Then you can add the following javascript:
<script type='text/javascript'>
$(document).ready(function() {
$('.qtip-link').each(function() {
$(this).click(function() {
return false; //disables the the link from redirecting
});
var linkUrl = $(this).attr("href"); //gets the url from the link
$(this).qtip({
content: {
text: 'Loading...',
ajax: {
url: linkUrl,
loading: false
}
},
position: {
viewport: $(window)
},
style: 'qtip-wiki',
show: 'click' //this will let the qtip only show when the link is clicked
});
});
});
});
</script>
Hope this is what you wanted :)
I want my custom dialog box to load on button click but that's not happening.I am using the dialog box on this webpage.
http://jqueryui.com/dialog/#default
here is my code..
function click(){
$(function() {
$( "#dialog" ).dialog({
width : 250,
height: 180,
modal : true
});
});
}
<div>
<button type="button" id="put" onclick="click()">Insert data</button>
</div>
The above code is not working..Please help...
It works fine there is prooflink
HTML:
<div id="dialog">
<p>THIS IS DIALOG!!!</p>
</div>
<button id="opener">Open Dialog</button>
And Jquery:
$(function() {
$( "#dialog" ).dialog({
autoOpen: false
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
The selector is trying to find an element with the id dialog but it looks like you don't have one. Try this:
Javascript:
$(document).ready(function ()
{
function click()
{
$('#dialog').dialog({
autoOpen: false,
width: 250,
height: 180,
modal : true
});
}
});
HTML:
<div id="dialog">
Your dialog message.
</div>
<button type="button" id="put" onclick="click()">Insert data</button>
function click(){
$( "#dialog" ).dialog({
width : 250,
height: 180,
modal : true
});
}
I am using jquery-2.1.0.min.js and jquery.ui-1.10.4.
Here is my full source code:
(For the jquery-ui.css link tag, change: href="path_to_your_jquery-ui/themes/base/jquery-ui.css")
(For the jquery script tag, change: src="path_to_your_jquery/jquery-2.1.0.min.js")
(For the jquery-ui script tag, change: src="path_to_your_jquery-ui/ui/jquery-ui.js")
(For your demos.css link tag, change: href="path_to_your_jquery-ui/demos/demos.css")
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="add-ons/jui/themes/base/jquery-ui.css"/>
<script src="add-ons/jquery-2.1.0.min.js"></script>
<script src="add-ons/jui/ui/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="add-ons/jui/demos/demos.css"/>
<!-- this in-file styling is used to hide the #dialog element initially -->
<style>
#dialog {
display: none;
}
</style>
<script>
$(document).ready(function() {
$("#put").on("click", function(evnt) {
$(function() {
$("#dialog").dialog({
width:250,
height: 180,
modal:true
});
});
evnt.preventDefault();
});
});
</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>
<div>
<button type="button" id="put">Insert data</button>
</div>
</body>
</html>
Be sure to pass an event parameter to your callback function in your 'on click' function and call the preventDefault() method on it. Read more about event.preventDefault() Also, here's an good read on event.preventDefault() vs. return false
<html>
<head>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 40%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.button11
{
background: #47bb7c;
border-radius: 2px;
border-bottom: solid 2px #489368;
border-left: 0 none;
border-right: 0 none;
border-top: 0 none;
padding: 4px 8px;
color: #fff;
font-size: 13px;
}
</style>
</head>
<body>
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<center>
<p>Green Card</p>
<input type="button" class="button11" name="submit" id="submit" value="Print"/>
<center>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>