Im trying to implement generic dojo confirmation dialog. I found great resource in stackoverflow on how to do it in link: Dojo Dialog with confirmation button
The sample which is mentioned in the above link works absolutely fine as in http://jsfiddle.net/phusick/wkydY/ .
Now that i wanted to extend this to support more complicated widget containing dojo data type and dojo attach points inside this dialog. I try to achieve this by setting the message of the dialog.
i.e.
message: "<div data-dojo-attach-point='myAttachPoint'><button data-dojo-type='dijit/form/Button' type='button'>Click me</button></div>";
(see this code at here : http://jsfiddle.net/wkydY/304/)
When I do that and clicking on MessageBox.Confirm' button doesnt bring up the dialog box as it would in the original version. What exactly am i doing wrong or missing a step in here?
(edited : based on comment)
You have a syntax error here
var confirmDialog = new ConfirmDialog({
title: "My Title",
message: "<div data-dojo-attach-point='myAttachPoint'><button data-dojo-type='dijit/form/Button' type='button'>Click me</button></div>";
});
as there should not be a semicolon in an object definition, i.e. after message: '...';
Also, as you are using non-AMD Dojo, you should put type="dijit.form.Button" into the message.
So the correct version of the lines above is:
var confirmDialog = new ConfirmDialog({
title: "My Title",
message: "<div data-dojo-attach-point='myAttachPoint'><button data-dojo-type='dijit.form.Button' type='button'>Click me</button></div>"
});
See it in action: http://jsfiddle.net/phusick/wkydY/305/
Related
I want to open a dialog box when clicking on a cell.I am using dgrid/editor.
editor({field: "column1",label: "col1",editor: "text",editOn: "click"})
I am getting text box when using the above code.I want a dialog box.Please tell me how to get a dialog box.I am using OndemandGrid with JSONReststore to display the grid.
You don't need use editor to trigger a dialog, use click event on a cell is ok:
var grid = new declare([OnDemandGrid,Keyboard, Selection])({
store: Observable(new Memory({data: []}))
}, yourGridConatiner);
grid.on(".dgrid-content .dgrid-cell:click", function (evt) {
var cell = grid.cell(evt);
var data = cell.row.data;
/* your dialog creation at here, for example like below */
var dlg = new Dialog({
title: "Dialog",
className:"dialogclass",
content: dlgDiv //you need create this div using dojo.create or put-selector
});
dlg.show();
});
If you want show a pointer while mouse over that cell, you can style it at renderCell method with "cursor:pointer"
From the wiki:
editor - The type of component to use for editors in this column; either a string specifying a type of standard HTML input to create, or a Dijit widget constructor to instantiate.
You could provide (to editor) a button that pops up a dialog when clicked, but that would probably mean two clicks to edit a cell: one to focus or enter edit mode or otherwise get the button to appear and one to actually click the button.
You could also not bother with the editor plugin and attach a click event handler to the cell and pop up a dialog from there. You would have to manually save the changes back to your store if you went that route.
If I understand you right - you could try something like this:
function cellFormatter1(value) {
//output html-code to open your popup - ie. using value (of cell)
}
......
{field: "column1",label: "col1", formatter: cellFormatter1 }
I am building a Safari extension.
On the manual, at the page about "Adding Contextual Menu Items", at the paragraph "Adding Contextual Menu Items Programmatically", it says:
You can add menu items to the contextual menu by responding to the
extension version of the "contextmenu" event in your global page or an
extension bar. If you stored information on the event by calling
setContextEventUserInfo() in your injected script, you can use that
information to help you decide what menu items to add.
Source:
https://developer.apple.com/library/archive/documentation/Tools/Conceptual/SafariExtensionGuide/AddingContextualMenuItems/AddingContextualMenuItems.html#//apple_ref/doc/uid/TP40009977-CH4-SW1
Now, I have this code on my injected script (as I am trying to pass the selected text to the background script):
function handleContextMenu(event) {
var htmlClip = getHtmlClip(event);
setContextEventUserInfo(htmlClip);
}
Unfortunately that generates this error:
ReferenceError: Can't find variable: setContextEventUserInfo
Unfortunately when I searched setContextEventUserInfo on Google, the only result was the page of the Safari manual!
Can please anybody explain to me how I am supposed to use the setContextEventUserInfo method?
This is what you need:
function handleContextMenu(event) {
var htmlClip = getHtmlClip(event);
safari.self.tab.setContextEventUserInfo(event, htmlClip);
}
As the Title says, I am invoking a Prompt-box of very-flexible Javascript by the below command in my Silverlight application.
string input = System.Windows.Browser.HtmlPage.Window.Invoke("prompt", new string[] { "YOUR QUESTION GOES HERE", "THE ANSWER INPUT GOES HERE.." }) as string;
But what i want is to customize the prompt box in terms of resizing, alignment, and Prompt-box header content. How can i pass such parameters in the above code, without breaking its core Functionality ??
Jquery Plugins are available....you can use
http://theinfiniteloopblog.com/programming/jscript/custom-javascript-alert-and-confirm-dialog-boxes/
In my project, I want to re-open a new tab using ruby code. When user clicks at attachment link, then that pdf should be open in new tab of same window. I tried a lot but I am not getting the way to solve it. Please guide me.
I am not sure if this is possible using Ruby since it deals with the UI part. It is indeed very much possible using HTML and Jquery.
You could simply set the target attribute as blank in the hyperlink redirecting to the PDF and it will open the file in a new tab. Something similar to this :
<a href="http://www.mysite.com/files/xyz.pdf" target="_blank">
If you want to use JQuery for this, you can try something like this :
$(document).ready(function() {
$("a").click(function() {
link_host = this.href.split("/")[2];
document_host = document.location.href.split("/")[2];
if (link_host != document_host) {
window.open(this.href);
return false;
}
});
});
i have a module. I need it to be able to display a modal dialog.
Seems like I need to inject a div into the main DOM and then parse it. Is this the right approach. Are there samples (or even a util- seems like this would not be that uncommon)
There are samples for almost everything in DojoCampus and in the tests directory:
var pane = dojo.byId('thirdDialog');
thirdDlg = new dijit.Dialog({
id: "dialog3",
refocus:false,
title: "Programatic Dialog Creation"
},pane);
Note that this particular widget doesn't need to be inserted to the DOM manually - it appends itself to the end of the page. Here the second parameter to the Dialog constructor - pane - is a reference to the node whose content should be displayed inside the Dialog.
UPDATE: Based on the new information you should try this:
dojo.require("dijit.Dialog");
dojo.addOnLoad(function() {
secondDlg = new dijit.Dialog({
title: "Programatic Dialog Creation",
style: "width: 300px",
content: "Insert text here"
});
secondDlg.show()
});
As shown here, you can pass Dialog content in the content attribute. (This sample is executable in FireBug on any page that includes Dojo.)
UPDATE: So, you want to have a form inside the Dialog? Nothing special here. Hey, you can even have a dijit form over there! Be sure to check out that DojoCampus article on Dialogs to learn how Dialog can communicate with a dijit form.
dojo.require("dijit.Dialog");
dojo.require("dijit.form.TextBox");
dojo.addOnLoad(function() {
secondDlg = new dijit.Dialog({
title: "Programatic Dialog Creation",
style: "width: 300px",
content: "<h2>Sample Form</h2>" +
"name: <input dojoType='dijit.form.TextBox' type='text' name='name' id='name'>"
});
secondDlg.show()
});
(Again this sample is executable in FireBug on any page that includes Dojo.)