I am trying to display an alert box using Dojo. The alert box behavior will be modeless. All work is done through a Javascript which has functions to addScript/CSS and these functions work fine. Though i am not bale to display alert using Dojo. Here is my code:
//DojoThemes and Libraries
addStylesheet('http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css');
addStylesheet('http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/tundra/tundra.css');
addScript('http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.js');
//dojo.require("dojo.ready");
//dojo.require("dijit.Dialog");
var dojoDialogBox = document.createElement('script');
dojoDialogBox.innerHTML = 'require(["dojo/ready", "dijit/Dialog"], function(ready, Dialog){ ready(function(){ myDialog = new Dialog({ title: "My Dialog", content: "Test content.", style: "width: 300px" }); }); });';
document.getElementsByTagName('head')[0].appendChild(dojoDialogBox);
function myFuncc() {
myDialog.show();
}
<script>
addStylesheet('http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css');
addStylesheet('http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/tundra/tundra.css');
addScript('http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.js');
</script>
<!--
closing script tag here will allow dojo.js script
tag to get written - otherwise
'require' is an undefined
-->
<script>
require(["dijit/Dialog", "dojo/domReady!"], function(Dialog){
myDialog = new Dialog({
title: "My Dialog",
// since we are inside a require(function() {}) closure, lets set an ID
// so that externally (from outside this require function) we can get the dialog
id:'myDialog',
content: "Test content.",
style: "width: 300px"
});
});
function myFuncc() {
dijit.byId('myDialog').show();
}
</script>
Related
I build website with html, css, javascript and jquery.
I added content to sweet alert and add element with id
var share_friends = function(e){
swal({
title: "<i>Title</i>",
content: share_social,
button: "V <u>redu</u>",
});
}
var share_social = document.createElement("div");
share_social.id = 'share'
and I want to add piece of jquery code that when I open the alert it add dynamic content of socials shares
so i added this piece of code
$("#share").jsSocials({
shares: ["email", "twitter", "facebook", "googleplus", "linkedin", "pinterest", "stumbleupon", "whatsapp"]
});
but it's not do nothing.
but when I add into my html code (hard-code) the div with the id share it works fine.
e.g
<div id = "share"></div>
How can I fix it?
I have been trying to create a cellwidget button within gridx that once clicked it will call a javascript function externally. so the set up is i have the file test.html which contains a gridx grid with the following field declared in html
{ field: 'action',
name:'action',
widgetsInCell: true,
navigable: true,
width : '5%',
class:'linkButton',
decorator: function(){
return '<button class="linkButton" baseClass="linkButton" data-dojo-type="dijit.form.Button" iconClass="deleteButtonIcon"></button>'
},
setCellValue: function(gridData, storeData, cellWidget){
var status = cellWidget.cell.row.data()[3];
var id = cellWidget.cell.row.id;
if (status=='abc')
{
cellWidget.domNode.hidden=false;
if(cellWidget.btn._cnnt){
cellWidget.btn._cnnt.remove();
}
cellWidget.btn._cnnt = dojo.connect(cellWidget.btn, 'onClick', function(e){
alert('test');
deleteRecord('');
});
}
}}
The alert happens fine but the problem is that the deleteRecord function can not be found - this function is in a test.js file and is being loaded using the script tag
<script type="text/javascript" charset="utf-8" src="/test.js"></script>
i suppose my questions are
am i do something wrong above?
what is the scope of the cellwidget, can it call external js
scripts?
is there a way to connect the button to an event in
the .js file (dynamically loaded so can't use id)?
how is it done using attach points?
I need to integrate elFinder to CKEditor. I followed this:
https://github.com/Studio-42/elFinder/wiki/Integration-with-CKEditor
It is working but opening pop-up window for image selection is not very nice so I want to open elFinder in modal dialog.
For "modal integration" i followed this thread:
http://bxuulgygd9.tal.ki/20110728/integration-with-ckeditor-759177/
The last post there partially works. It really opens elfinder in modal. BUT:
When I want to insert image URL to URL field in CKFinder I have to know its exact ID. Is also does not fill image resolution and brings some other problems. The best solution would be to run function called in "ordinary popup" integration, which handles everything:
window.opener.CKEDITOR.tools.callFunction(funcNum, file);
But in "popup integration", funcNum callback is registered, in modal integration it is not so I'm unable call it. Do you have any tip to run elfinder (or any other image manager - it would be the same) in modal window? I'm desperate.
I have solved it myself. This code is combination of several tutorials and allows to fully integrate elFinder in modal window. Maybe somebody will consider it useful.
CKEDITOR.on('dialogDefinition', function(event) {
var editor = event.editor;
var dialogDefinition = event.data.definition;
console.log(event.editor);
var dialogName = event.data.name;
var tabCount = dialogDefinition.contents.length;
for (var i = 0; i < tabCount; i++) {
var browseButton = dialogDefinition.contents[i].get('browse');
if (browseButton !== null) {
browseButton.hidden = false;
browseButton.onClick = function(dialog, i) {
editor._.filebrowserSe = this;
jQuery('<div \>').dialog({modal: true, width: "80%", title: "Insert image", zIndex: 99999,
create: function(event, ui) {
jQuery(this).elfinder({
resizable: false,
url: "/path/to/connector.php",
getFileCallback: function(url) {
CKEDITOR.tools.callFunction(editor._.filebrowserFn, url);
jQuery('a.ui-dialog-titlebar-close[role="button"]').click()
}
}).elfinder('instance')
}
})
}
}
}
});
How to create a confirm dialog box in dojo? I would like to have an ok cancel dialog to appear on button click with dojo dialog (no javascript confirm dialog).
So far i can only display a dialog on click event.
Heres my code:
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
var secondDlg;
dojo.ready(function(){
// create the dialog:
secondDlg = new dijit.Dialog({
title: "Programmatic Dialog Creation",
style: "width: 300px",
draggable:false
});
});
showDialogTwo = function(){
// set the content of the dialog:
secondDlg.set("content", "Hey, I wasn't there before, I was added at " + new Date() + "!");
secondDlg.show();
}
</script>
</head>
<body class="claro" style="margin-right:10px;">
<button id="buttonTwo" data-dojo-type="dijit.form.Button" data-dojo-props="onClick:showDialogTwo" type="button">Show me!</button>
</body>
How can i make this ok cancel dialog box?
<script type="dojo/method" event="onClick">
var dialog = new dijit.Dialog({
title: "Delete Switch Type",
style: "width: 400px",
content : "Do you really want to delete ?????<br>"
});
//Creating div element inside dialog
var div = dojo.create('div', {}, dialog.containerNode);
dojo.style(dojo.byId(div), "float", "left");
var noBtn = new dijit.form.Button({
label: "Cancel",
onClick: function(){
dialog.hide();
dojo.destroy(dialog);
}
});
var yesBtn = new dijit.form.Button({
label: "Yes",
style : "width : 60px",
onClick : <your function here>,
dialog.hide();
dojo.destroy(dialog);
}
});
//adding buttons to the div, created inside the dialog
dojo.create(yesBtn.domNode,{}, div);
dojo.create(noBtn.domNode,{}, div);
dialog.show();
</script>
I'm using this code as inline dojo/method - on the click event of the button. you can modify anyway
The Confirm Dialog is supported since Dojo 1.10.
See the release notes and the documentation.
The solution above does not take into account the little cross at the top right of the dialog.
I had done, long ago, a little suite of dialogs, you might find some happiness here, especially ConfirmDialog.js
I just uploaded them on github today so you can take a look at them : http://github.com/PEM-FR/Dojo-Components/tree/master/dojox/dialog
They should be usable "as-is" or with minor changes
I am attempting to create a modal dialog in sharepoint 2010, but I'm getting this error:
TypeError: this.$E_0.getElementsByTagName is not a function
my code is:
var options = SP.UI.$create_DialogOptions();
options.html = '<div class="ExternalClass23FFBC76391C4EA5A86FC05D3D9A1904"><p>RedConnect is now available.</p></div>';
options.width = 700;
options.height = 700;
SP.UI.ModalDialog.showModalDialog(options);
using firebug, i tried simply using the url field instead of the html field and it gave no error.
also related to this, what does SP.UI.$create_DialogOptions() actually do? what is the difference between using it and simply using a dict of values for your options?
options.html requires a HTML DOM element instead of plain HTML code:
<script>
function ShowDialog()
{
var htmlElement = document.createElement('p');
var helloWorldNode = document.createTextNode('Hello world!');
htmlElement.appendChild(helloWorldNode);
var options = {
html: htmlElement,
autoSize:true,
allowMaximize:true,
title: 'Test dialog',
showClose: true,
};
var dialog = SP.UI.ModalDialog.showModalDialog(options);
}
</script>
Boo
Example code taken from the blog post Rendering html in a SharePoint Dialog requires a DOM element and not a String.
also related to this, what does SP.UI.$create_DialogOptions() actually do? what is the difference between using it and simply using a dict of values for your options
When you look at the definition of the SP.UI.DialogOptions "class" in the file SP.UI.Dialog.debug.js you see that its a empty javascript function.
SP.UI.DialogOptions = function() {}
SP.UI.$create_DialogOptions = function() {ULSTYE:;
return new SP.UI.DialogOptions();
}
My guess is that it is there for client diagnostic purpose. Take a look at this SO question: What does this Javascript code do?