I'm building a cross-platform desktop application. I'm using electronjs framework for my desktop app development.And I want to add a functionality of taking screenshot every 5 minutes when my app starts!
help will be appreciated
my main.js
// Modules to control application life and create native browser window
const {app, BrowserWindow,Tray,Menu} = require('electron')
const path = require('path')
const iconz = path.join(__dirname,'/img/download.png')
const fs = require('fs')
var config = require('./login.json');
const shell = require('electron').shell
let tray = null
function createWindow () {
tray = new Tray(iconz)
const contextMenu = Menu.buildFromTemplate([
{ label: 'User:'+ config.username, type: 'radio',enabled:false},
{type:'separator'},
{ label: 'Show DeskTime', type: 'radio',
click() {
shell.openExternal('http://coinmarketcap.com')
}
},
{type:'separator'},
{ label: 'Private Time', type: 'radio',
click() {
checked:true
}
},
{type:'separator'},
{ label: 'LogOut', type: 'radio' },
{type:'separator'},
{ label: 'Quit', type: 'radio',
click() {
app.quit()
}
}
])
tray.setToolTip('This is my application.')
tray.setContextMenu(contextMenu)
console.log(config.username + ' ' + config.password);
if(config.username == ""){
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
}
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') app.quit()
})
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
my index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 12px 0 6px 0;
}
img.avatar {
width: 20%;
border-radius: 40%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Login Form</h2>
<form action="/action_page.php" method="post">
<div class="imgcontainer">
<img src="login_logo.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<span class="psw">Forgot password?</span>
</div>
</form>
<label id="screenshot-path">Path:</label>
<button id="screen-shot" type="button" class="cancelbtn">Singup</button>
</body>
<script src="./renderer.js"></script>
</html>
My codes are given above, please go through this and help me to take screenshot on a certain interval.And also how to save in screen shots in predefined folder.
You can use contents.capturePage([rect]) on your main process. if you omits rect args it will capture the whole window. This will return a promise with native image .
To capture it on every 5 minute, you can set a setInterval(<function>,<time in millis>)
To save on specific folder you can use path module
ex:
const path = require('path')
const myFolderPath = path.join(__dirname, "myfolderinsideProject")
fs.writeFile(path.join(myFolderPath,`test${count}.png`), ....)
example code to save Captured window on current project folder:
// Modules to control application life and create native browser window
const {app, BrowserWindow } = require('electron')
const path = require('path')
const fs = require('fs')
let mainWindow, count=0;
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') app.quit()
})
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
//starting when the app is ready
app.on('ready', () => {
//setting the time interval for 3 second (3000 in millis)
setInterval(()=>{
console.log(`Capturing Count: ${count}`)
//start capturing the window
mainWindow.webContents.capturePage().then(image =>
{
//writing image to the disk
fs.writeFile(`test${count}.png`, image.toPNG(), (err) => {
if (err) throw err
console.log('Image Saved')
count++
})
})
}, 3000); //tome in millis
});
or you can use this npm package on renderer process
Related
Some of my Vimeo videos rendered in the iOS web view show the quality settings to toggle between different qualities. But in other videos, I can only see 360p quality. Is there any specific reason for this behavior?
I can toggle between qualities inside the Android Web view.
I'm using a React Native Web View to render the Vimeo player.
My web view template
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1 user-scalable=0 minimum-scale=1">
</head>
<body style="width: 100%; height: 100%; margin: 0;">
<div style="width: 100%; height: 100%;">
<div id="video" style="width: 100%; height: 100%; display: flex; justify-content: center;">
</div>
</div>
<script id="vimeo" async src="https://player.vimeo.com/api/player.js"></script>
<script>
function webViewBridge() {
const sendEvent = (evt, data = null) => {
// Passes events through the bridge
var payload = {
name: evt,
data: data
};
window.ReactNativeWebView.postMessage(JSON.stringify(payload));
}
var options = { id: '${VIDEO_ID}' }
const player = new Vimeo.Player('video', options)
player.ready().then(function () {
player.on('play', function () {
sendEvent('play');
})
player.on('ended', function () {
sendEvent('finish');
})
player.on('error', function () {
sendEvent('error', "Player error");
})
sendEvent('ready');
}).catch((e) => {
sendEvent('error', e.message);
})
}
let script = document.querySelector('#vimeo');
script.addEventListener('load', function () {
webViewBridge();
});
</script>
</body>
</html>
I have created a video call application using Nodejs & Twilio CLI. And using this in my both mobile app Android & iOS. On Android is working perfectly. But on iOS, there is an issue, when users reach the video call page, it's showing preview but as the user clicks on the Join Room button, then his/her video stops and just showing a black screen. While he can talk with other users and can see the video of them. And the Second user also can see his/her video perfectly. Only the issue he/she can't see his/her video on that call.
My html code
<!DOCTYPE html>
<html>
<head>
<style>
.joinbtn {
border: none;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
background-color: #2b96cc;
color: #fff;
}
.stvbtn {
border: none;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
background-color: #2b96cc;
color: #fff;
}
.endbtn {
float:right;
border: none;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
background-color: #dc3545;
color: #fff;
}
#media screen and (max-width: 820px) {
video {
object-fit: cover;
width: 100%;
height: 47vh;
}
}
#media screen and (min-width: 821px){
video {
object-fit: contain;
}
}
.connect_btn{
display: flex;
justify-content: center;
align-content: space-around;
margin-top: -50px;
opacity: 0.8;
padding-bottom:8px;
}
button.endbtn:disabled, button.joinbtn:disabled {
background-color: #607d8b;
color: #ffffff;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/6.4.0/adapter.js" type="text/javascript"></script>
<script src="webrtc.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Clifix Video Chat</title>
</head>
<body>
<div id="room-controls">
<video id="video" autoplay muted playsinline loop width="100%"></video>
<div class="connect_btn">
<label for="passcode"></label>
<input id="passcode" type="hidden" value="8514"/>
<!--button class="stvbtn" id="start-video" onclick="viplay()">On/Off</button-->
<button class="joinbtn" id="button-join">Join Room</button>
<button class="endbtn" id="button-leave" disabled="disabled">End Call</button>
</div>
</div>
<!-- EDIT_CODE -->
<script src="//media.twiliocdn.com/sdk/js/video/releases/2.3.0/twilio-video.min.js"></script>
<script src="index.js"></script>
</body>
</html>
My nodejs code:
'use strict';
(() => {
//const ROOM_NAME = 'demo';
var urltemp = location.search;
var array = urltemp.split('?');
var array1 = array[1];
var array2 = array1.split('=');
var id = array2[1];
const ROOM_NAME = id;
const Video = Twilio.Video;
let videoRoom, localStream;
const video = document.getElementById('video');
// preview screen
navigator.mediaDevices
.getUserMedia({ video: true, audio: true })
.then((vid) => {
video.srcObject = vid;
localStream = vid;
});
// buttons
const joinRoomButton = document.getElementById('button-join');
const leaveRoomButton = document.getElementById('button-leave');
joinRoomButton.onclick = () => {
//video.play();
// get access token
fetch(`video-token?passcode=${getPasscode()}&room=${ROOM_NAME}`)
.then((resp) => {
if (resp.ok) {
var url=window.location.href,
separator = (url.indexOf("?")===-1)?"?":"&",
newParam=separator + "join=true";
var newUrl=url.replace(newParam,"");
newUrl+=newParam;
window.history.replaceState(null,null,newUrl);
return resp.json();
} else {
console.error(resp);
if (resp.status === 401) {
throw new Error('Go Back & Join Again');
} else {
throw new Error('Unexpected error. Open dev tools for logs');
}
}
})
.then((body) => {
const token = body.token;
//console.log(token);
//connect to room
return Video.connect(token, { name: ROOM_NAME });
})
.then((room) => {
//console.log(`Connected to Room ${room.name}`);
videoRoom = room;
room.participants.forEach(participantConnected);
room.on('participantConnected', participantConnected);
room.on('participantDisconnected', participantDisconnected);
room.once('disconnected', (error) =>
room.participants.forEach(participantDisconnected)
);
joinRoomButton.disabled = true;
leaveRoomButton.disabled = false;
})
.catch((err) => {
alert(err.message);
});
};
// leave room
leaveRoomButton.onclick = () => {
var url=window.location.href,
separator = (url.indexOf("?")===-1)?"?":"&",
newParam=separator + "end=true";
var newUrl=url.replace(newParam,"");
newUrl+=newParam;
window.history.replaceState(null,null,newUrl);
videoRoom.disconnect();
//console.log(`Disconnected from Room ${videoRoom.name}`);
joinRoomButton.disabled = false;
leaveRoomButton.disabled = true;
};
})();
const getPasscode = () => {
const passcodeInput = document.getElementById('passcode') || {};
const passcode = passcodeInput.value;
passcodeInput.value = '';
return passcode;
};
// connect participant
const participantConnected = (participant) => {
//console.log(`Participant ${participant.identity} connected'`);
const div = document.createElement('div'); //create div for new participant
div.id = participant.sid;
participant.on('trackSubscribed', (track) => trackSubscribed(div, track));
participant.on('trackUnsubscribed', trackUnsubscribed);
participant.tracks.forEach((publication) => {
if (publication.isSubscribed) {
trackSubscribed(div, publication.track);
}
});
document.body.appendChild(div);
};
const participantDisconnected = (participant) => {
//console.log(`Participant ${participant.identity} disconnected.`);
document.getElementById(participant.sid).remove();
};
const trackSubscribed = (div, track) => {
div.appendChild(track.attach());
};
const trackUnsubscribed = (track) => {
track.detach().forEach((element) => element.remove());
};
As per my understanding, before this my video was not working on iOS safari then I have done modifications in my HTML video code.
From this:
<video id="video" autoplay muted width="100%"></video>
To:
<video id="video" autoplay muted playsinline loop width="100%"></video>
Then it starts working as having video freezing at the iOS User side when he/she start calling.
Twilio developer evangelist here.
When you call Video.connect the Video SDK will ask for permission to use your microphone and camera. Safari does not like giving access to the microphone and camera more than once at a time and since you also ask for media access to show the preview, it drops the preview tracks and creates new tracks for the video call. This is why the preview goes dark, but other participants can see and hear the video/audio.
Instead, you should reuse the tracks that you got for the preview by storing a reference to them and then passing them to Video.connect as the tracks property in the ConnectOptions. You already store a reference to the localStream so you can use that when you get to connect, like this:
return Video.connect(token, {
name: ROOM_NAME,
tracks: localStream.getTracks()
});
That way the tracks for the preview will be re-used for the video call and nothing should go dark.
I have an ag-Grid in a Svelte file.
One of the column definitions is for a floating point number displayed to 2 places of decimals, like this:
const columnDefinitions = [
...
{
field: fixedScr,
headerName: "Fixed SCR",
cellClass: numberCellClassSelector,
type: "rightAligned",
width: 150,
editable: true,
valueFormatter: numberFormatterFactory(2),
valueParser: numberParser,
},
...
];
I have chosen the ag-Grid as a convenient means of displaying and editing a column of these values. However, my Product Owner wants the web page to challenge the user every time they make a change to a cell with an "Are you sure?" prompt.
A bit heavy-handed, perhaps, as it will make editing with the ag-Grid somewhat slower. But these values will be change infrequently, and changes should be made with care.
How would I define a simple cell editor, just for this column, which prompts the user to confirm a change before the grid is updated?
I would propose binding into an ag-grid event which is triggered once a value is updated. on the callback (which should by an async function).
my implementation will go as follow create a Popup.svelte component.
you will also create a store, which i will call popup in a global js file for example store.js.
you will then import popup from store.js in Popup.svelte. then you will set the value of the popup store to an async function which will interact with the HTML of Popup.svelte. this async function will return a promise which you will await in your other svelte components while using the popup store.
in this Promise you will await all previous popups to close to show your current popup, you will supply the title, and the return values of the buttons which will be shown in the popup
here is an example of the implementation of the code i made
<style>
.u-overlay {
min-height: 100vh;
max-height: 100vh;
width: 100%;
position: fixed;
display: flex;
background-color: rgba(0, 0, 0, 0.5);
z-index: 50000;
}
.u-box {
width: 500px;
background-color: white;
min-height: 100px;
margin: auto;
padding: 20px;
border-radius: 4px;
}
.u-title {
width: 100%;
text-align: center;
font-size: 22px;
}
.u-desc {
padding: 20px 20px;
text-align: center;
margin: 0;
}
.u-buttons {
width: 100%;
display: flex;
padding: 10px 0;
justify-content: space-evenly;
}
.u-over-button {
width: 150px;
border: 1px solid transparent;
border-radius: 4px;
color: white;
text-align: center;
padding: 8px 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
</style>
<script>
import { popup } from "../utils.js";
import { fade } from "svelte/transition";
let overlay;
let template = {
title: "Write title",
desc: "Please select",
buttons: [
{ name: "OK", value: true, color: "#F0F0F0" },
{ name: "Decline", value: false, color: "red" },
],
};
let popData = undefined;
let promises = [];
let colorsConver = {
ok: "#46b978",
danger: "#d23149",
};
popup.set(async (data) => {
/* we got a new sub*/
/* start the promise for the future click */
let pro = new Promise(async (resolve, reject) => {
/* make sure all promises before this one are done */
await Promise.all(promises);
/* when they are done start the overlay for this sub */
/* convert text to appropriate hex */
for (let btn of data.buttons) {
if (colorsConver[btn.color]) {
btn.color = colorsConver[btn.color];
}
}
popData = data;
setTimeout(() => {
overlay.addEventListener(
"click",
(event) => {
if (event.target !== event.currentTarget) return;
event.stopPropagation();
console.log("from overlay");
resolve(data.buttons[data.buttons.length - 1].value);
popData = undefined;
},
{
once: true,
capture: true,
}
);
for (let b of [
...document.querySelectorAll(".u-overlay .u-buttons"),
]) {
b.addEventListener(
"click",
(event) => {
event.stopPropagation();
console.log("ending button");
resolve(event.target.dataset.res);
popData = undefined;
},
{
once: true,
capture: true,
}
);
}
}, 130);
});
/* add this promise so the future ones wait it*/
promises.push(pro);
return pro;
});
import { popup } from "path/to/store.js";
const someFunction = () => {
let resp = await $popup({
title: "Write title",
desc: "Please select",
buttons: [
{ name: "OK", value: true, color: "#F0F0F0" },
{ name: "Decline", value: false, color: "red" },
],
});
};
</script>
{#if popData}
<div
bind:this={overlay}
transition:fade={{ duration: 150 }}
class="u-overlay"
>
<div on:click|stopPropagation|preventDefault class="u-box">
<div class="u-title">{popData.title}</div>
<p class="u-desc">{popData.desc}</p>
<div class="u-buttons">
{#each popData.buttons as b}
<div
data-res={b.value}
class="u-over-button"
style={"background-color:" + b.color}
>
{b.name}
</div>
{/each}
</div>
</div>
</div>
{/if}
in other components
<script>
import { popup } from "path/to/store.js";
const someFunction = () => {
let resp = await $popup({
title: "Write title",
desc: "Please select",
buttons: [
{ name: "OK", value: true, color: "#F0F0F0" },
{ name: "Decline", value: false, color: "red" },
],
});
};
</script>
In my electron app, a user can select one or more images for printing. To do this, I create a BrowserView which is not visible, load html into it and print it before destroying the view. This worked ok up to Electron 5. But after upgrading my app to electron 10, the printing still occurs but the image is broken (not visible). Any ideas?
Here is a sample of the HTML used to initialize my browser view:
<!DOCTYPE html>
<html>
<head>
<style>#media print { #page { margin: 0; padding: 0;} html, body { margin: 0; padding: 0; height: 100%; width: 100%; } html body *:not(.tempPrinterPaper) {display: none; visibility: hidden; z-index: -5000; } .tempPrinterPaper { display: flex; align-items: center; justify-content: center; position: relative; page-break-after: always; page-break-inside: avoid; overflow: hidden; height: 100%; width: 100%; border: none; margin: 0; padding: 0; background-color: #FFFFFF; text-align: center; align-self: stretch; } .tempPrinterPaper img.tempPrinterPaperImage { display: flex; position: relative; height: auto; max-height: 100%; max-width: 100%; margin: 0; padding: 0; z-index: 500000000000; visibility: visible; } }</style>
</head>
<body>
<div class="tempPrinterPaper"><img class="tempPrinterPaperImage" src="C:\Users\igweo\OneDrive\Pictures\rts9nzl-e1526310385107.jpg" /></div>
</body>
</html>
Here is the code for printing:
// now initialize browser window
printerWindow = new remote.BrowserView( {webPreferences: {webSecurity: false}} );
// load url
printerWindow.webContents.loadURL('data:text/html;charset=utf-8,' + encodeURIComponent(printerHTML));
// after contents have been loaded
printerWindow.webContents.on('did-finish-load', function() {
printerWindow.webContents.print({silent: false, printBackground: false}, function(res) {
// if printing is successful, show a notification
if (res) {
//let printNotification = new Notification('Image' + ((currentPrintList.length > 1) ? 's' : '') + ' successfully sent to printer', {icon: 'static/icons/logoFilledBlue.png'});
let printNotification = new Notification('Image' + ((currentPrintList.length > 1) ? 's' : '') + ' successfully sent to printer', {body: app_name});
}
// clean up print list
//currentPrintList.length = 0;
// after printing is done, destroy browser window
printerWindow.destroy();
// just to be sure :-)
printerWindow = null;
});
});
Unfortunately in electron 10, the old ways no longer seem to work. What I have now done is to create a file called print.html, then write my html contents to the file and print it from the main process.
In app.js
function showPrintDialog() {
// build html string to be printed
let printHTML = '<!DOCTYPE html><html><head><style>#media print { #page { margin: 0; padding: 0;} }</style></head><body>HELLO WORLD</body></html>';
// save file in the userdata directory
let printFilePath = app.getPath('userData') + "\\print.html";
// write to file using powershell (THIS IS ONLY FOR WINDOWS)
let cmd = ['"' + printerHTML + '" | Set-Content -Path "' + printFilePath + '"'];
let cx = cp.spawn('powershell.exe', cmd);
// wait for completion
cx.stdout.on('close', function(data) {
(async function() {
// invoke ipc function to display a dialog box and send the required parameters
let printResult = await ipcRenderer.invoke('show-print-dialog', { printFilePath: printFilePath, successMessage: 'Successfully sent to printer'});
}) ();
});
}
Also, in app.js, we need a function to show notifications when printing is completed:
ipcRenderer.on('show-notification', function(event, args) {
// show a notification
showNotification(args);
});
Now, in our main.js, we will create a browserview with the written file and call the print command. When it is done, request a notification be shown.
// show printing dialog and handle printing
ipcMain.handle('show-print-dialog', async(event, args) => {
// create a browser view
try {
// now initialize browser window
let printerWindow = new BrowserView( {webPreferences: {worldSafeExecuteJavaScript: true, contextIsolation: true}});
// At this point, there should be a file called print.html in the local app path for the user
// This should be to C:\Users\username\AppData\Roaming\Photo Viewer Classic\print.html
printerWindow.webContents.loadURL(args.printFilePath);
// after contents have been loaded
printerWindow.webContents.on('did-finish-load', async function() {
// show print dialog
printerWindow.webContents.print({silent: false, printBackground: false}, function(res) {
// if printing is successful, res will return true
if (res) {
// show notification
event.sender.send('show-notification', args.successMessage);
}
// after printing is done, destroy browser window
printerWindow.destroy();
// just to be sure :-)
printerWindow = null;
});
});
} catch (e) { console.log(e); }
// If failed, simply return false
});
I want to know where to put javascript file in ruby on rails.
I am using jQuery dialogue box in my app. All jQuery and CSS files I put under assets/javascripts and assets/stylesheets.
Now I have some JavaScript code in my view page that is "my_event". Where to put this JavaScript code?
I googled for this and found something that suggested to make a my_event.js file and put this file inside the views/useraccount directory.
Seeking your valuable suggestion.
Controller useraccount.rb
View my_event.html.erb
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header : {
left : 'prev,next today',
center : 'title',
right : 'month,agendaWeek,agendaDay'
},
// US Holidays
events : '/useraccount/my_event',
eventClick : function(event) {
// alert (JSON.stringify(event,null,4)); return false;
if (event.description) {
var a = '<button onclick="addToMycal(' + event.id + ')">UnJoin</button>'
$("#Successmes").empty();
$('#event-desc').html(event.description);
$('#add-to-my-cal').html(a)
$("#dialog-modal").dialog({
height : 350,
width : 600,
modal : true,
buttons : {
Ok : function() {
$(this).dialog("close");
}
}
});
} else {
$('#event-desc').html("<h4>Oops!</h4> No Data Available");
$("#dialog-modal").dialog({
height : 300,
width : 363,
modal : true,
buttons : {
Ok : function() {
$(this).dialog("close");
}
}
// alert (event.description);
});
}
},
});
});
</script>
<script>
function addToMycal(val) {
$.getJSON("/useraccount/delete_event?d=" + val, function(data) {
// alert (JSON.stringify(data,null,4)); return false;
$("#Successmes").empty();
$("#event-desc").html(data.msg)
$("#add-to-my-cal").remove();
});
}
</script>
<style>
#calendarbody {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
background-color: #E7EAF6;
}
</style>
<div id="calendarbody">
<div id='calendar'></div>
</div>
<div id="dialog-modal" title=" Event Description">
<p id="event-desc"></p>
<div id="add-to-my-cal"></div>
<p id="Successmes"></p>
</div>
Keep it in assets/javascripts folder and cross check for if you have written "require_tree ." That's it.
This will be available on every page...
Put it in assets/javascripts folder, and require it in your application.js file. If your application.js file has require_tree ., no need to require your js file again.