I'm trying to create a simpleDialog2 using the code below:
function deleteItem(itemID) {
$('<div>').simpledialog2({
mode: 'button',
headerText: 'Are you sure?',
headerClose: true,
// buttonPrompt: 'Please Choose One',
buttons : {
'Delete': {
click: function () {
//$('#buttonoutput').text('OK');
}
},
icon: "delete",
'Cancel': {
click: function () {
// $('#buttonoutput').text('Cancel');
},
theme: "c"
}
}
})
}
And I get this error every time TypeError: 'undefined' is not a function (evaluating '$('<div>').simpledialog2') And help you can provide would be most appreciated.
My issue was actually that I hadn't imported the simpleDialog2 statements in the correct order, as this page outlines.
Related
I am using Highcharts v4.0.3 with exporting.js in my web app, and I want to be able to just provide the end user with the following download options:
Download Chart as JPG
Download Chart as PNG
However, the standard options are:
Print Chart
Download Chart as JPG
Download Chart as PNG
Download Chart as PDF
Download Chart as SVG Vector Graphic
How can I customise it so that it just gives the user JPG and PNG options?
You can manually set exporting.buttons.contextButton.menuItems (API) to contain whatever buttons you want.
You'll want to set it to only contain JPG and PNG like this (short form, textKey only):
menuItems: ['downloadPNG','downloadJPEG']
Or for more explicit function calls (long form with objects and onclick):
menuItems: [{
textKey: 'downloadPNG',
onclick: function () {
this.exportChart();
}
}, {
textKey: 'downloadJPEG',
onclick: function () {
this.exportChart({
type: 'image/jpeg'
});
}
}]
As in these JSFiddle demonstrations: short form and long form.
The default for exporting.js is:
menuItems: [{
textKey: 'printChart',
onclick: function () {
this.print();
}
}, {
separator: true
}, {
textKey: 'downloadPNG',
onclick: function () {
this.exportChart();
}
}, {
textKey: 'downloadJPEG',
onclick: function () {
this.exportChart({
type: 'image/jpeg'
});
}
}, {
textKey: 'downloadPDF',
onclick: function () {
this.exportChart({
type: 'application/pdf'
});
}
}, {
textKey: 'downloadSVG',
onclick: function () {
this.exportChart({
type: 'image/svg+xml'
});
}
}]
The additional ones for export-data.js are:
menuItems: [{
textKey: 'downloadCSV',
onclick: function () {
this.downloadCSV();
}
}, {
textKey: 'downloadXLS',
onclick: function () {
this.downloadXLS();
}
},{
textKey: 'viewData',
onclick: function () {
this.viewData();
}
},{
textKey: 'openInCloud',
onclick: function () {
this.openInCloud();
}
}]
You can remove unnecessary options the following way:
if (Highcharts.getOptions().exporting) {
let contextButton = Highcharts.getOptions().exporting.buttons.contextButton;
contextButton.menuItems = contextButton.menuItems.filter((item) => {
return item.textKey === 'downloadJPEG' || item.textKey === 'downloadPNG';
});
}
In chatOptions we can write customize options in the high-charts menu we can customize the dropdown options.
In chart options, we can write like:
exporting: {
buttons: {
contextButton: {
menuItems: ['downloadPNG', 'downloadJPEG', 'downloadPDF', 'downloadSVG'],
},
},
}
Example: click here
Reference: click here
I am working in extjs4 MVC.I am getting stuck at a point where I have to catch event click of hyperlink in extjs4.I want to catch that event in controllers 'control' method.I tried a lot but not get solved please some one give some suggestion to how to solve this problem.
1)Here is my some view code :--
Ext.define('AM.view.user.linkView', {
extend:'Ext.form.Panel',
alias:'widget.Link',
title:'hyper link',
items:[
{
xtype: 'box',
autoEl: {tag: 'a', href: '#', html: 'Click on this button',id:'link'}
}]
});// End of login class
2)Here is my controller code: ---
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
views: ['user.linkView'],
init: function() {
this.control({
'Link box[tag: a]':
click:this.linkClicked
});
},
linkClicked:function()
{
console.log("clicked on link");
}
});
I tried a lot on it.but not get solved this problem.How can I solve this this please give some suggestion...
Ext.define('AM.view.user.linkView', {
extend:'Ext.form.Panel',
alias:'widget.Link',
name:'linkPanel',
title:'hyper link',
items:[
{
xtype: 'box',
autoEl: {tag: 'a', href: '#', html: 'Click on this button',id:'link'}
}]
});// End of login class
Use below code in controller
var controller = this;
controller.control({
'linkPanel': {
afterrender: function() {
Ext.get('link').on('click', function() {
controller.linkClicked();
});
}
}
});
This will work !!!!
Thanks
I am having a Jquery dialog with two buttons Add and Cancel. User will input few fields and on pressing Add button, I am doing UI modifications and validations. After all the operations are done, I am closing the dialog. But issue is, even though I am closing the dialog after save and other operations, but the dialog is getting closed before the operations gets completed.
Below is my Jquery dialog code,
dlg.dialog({
height:300,
width:600,
modal:true,
autoOpen:true,
title: "Add Property",
closeOnEscape:true,
buttons: {
"Cancel": function() {
$(this).dialog("close");
},
"Create Property": function() {
//Validate Property
// Save Property
$(this).dialog("close");
}
}
}
});
function save() {
$.ajax({
type: 'POST',
url: ServiceUrl,
data: parameter,
success : function(data) {
// Convert the response text to JSON format
var jsonData = eval('(' + data + ')');
if (jsonData.results) {
// success
}
}
});
};
In above code I am executing $(this).dialog("close"); after validate and save function but my dialog is getting closed , before these function finishes. This behavior doesn't happen if I execute line by line by keeping breakpoints in firebug. Please help in resolving and help me in understanding. Thanks in advance.
Since the .ajax() call(s) are asynchronous, the $(this).dialog("close"); does not wait for the .ajax() call to finish. Put the dlg.dialog("close"); inside the success of the .ajax() call after you see that the save/validations were successful.
dlg.dialog({
height:300,
width:600,
modal:true,
autoOpen:true,
title: "Add Property",
closeOnEscape:true,
buttons: {
"Cancel": function() {
$(this).dialog("close");
},
"Create Property": function() {
//Validate Property
// Save Property
$.ajax({
success: function (response) {
//test to see if the response is successful...then
dlg.dialog("close");
},
error: function (xhr, status, error) {
//code for error condition - not sure if $(this).dialog("close"); would be here.
}
})
}
}
}
});
Your logic should look something like:
dlg.dialog({
height:300,
width:600,
modal:true,
autoOpen:true,
title: "Add Property",
closeOnEscape:true,
buttons: {
"Cancel": function() {
$(this).dialog("close");
},
"Create Property": function() {
$.ajax({//Validate request
...
success:function(response){
$.ajax({//Save request
...
success:function(response){
//close the dialog here
}
});
}
});
}
}
}
});
Either you can chain your ajax calls like this, or you can make them asynchronous by passing an async:false option.
I understand the need for a global "save" function, as it eliminates the need to write the same script over and over again.
Try doing something like this:
dlg.dialog({
height: 300,
width: 600,
modal: true,
autoOpen: true,
title: "Add Property",
closeOnEscape: true,
buttons: {
"Cancel": function () {
$(this).dialog("close");
},
"Create Property": function () {
save(true); //!!!
}
}
});
And then:
function save() {
$.ajax({
type: 'POST',
url: ServiceUrl,
data: parameter,
success: function (data) {
// Convert the response text to JSON format
var jsonData = eval('(' + data + ')');
if (jsonData.results) {
//!!!! Then close the dialog
dlg.dialog("close") //!!!!
}
}
});
}
This way, your close function is not called until the AJAX response is received.
EDIT: I would also set the dlg variable and the save() function-name as globals by attaching them to the window object like so:
window.dlg = $("#myDialogElement");
window.save = function () {
//function stuff here
}
This will ensure they're always available.
I want to use a jQuery zClip plugin in jQuery UI dialog button, but I don't know how to adapt in this case. Anyone can help me?
Thank you in advance!
$.ajax({
url: '/music/lyrics/' + hash,
success: function (data) {
data = jQuery.parseJSON(data);
$('#dialog-modal').html(data.lyrics);
$('#dialog:ui-dialog').dialog('destroy');
$('#dialog-modal').dialog({
modal: true,
resizable: false,
title: 'Lyric: ' + data.song,
width: 500,
height: 400,
buttons: {
'Copy' : function () {
// use zClip to copy $('#dialog-modal').text() here
}
}
});
},
error: function (msg) {
alert(msg);
}
});
I would ignore the normal way dialog buttons handle actions, and separately use the way zClip handles actions. Something like this:
$.ajax({
url: '/music/lyrics/' + hash,
success: function (data) {
data = jQuery.parseJSON(data);
$('#dialog-modal').html(data.lyrics);
$('#dialog:ui-dialog').dialog('destroy');
$('#dialog-modal').dialog({
modal: true,
resizable: false,
title: 'Lyric: ' + data.song,
width: 500,
height: 400,
buttons: {
'Copy' : function () { return true; }
}
});
$('#dialog-modal ui-button:contains(Copy)').zclip({
path:'../whatever/ZeroClipboard.swf',
copy:$('#dialog-modal').text()
});
},
error: function (msg) {
alert(msg);
}
});
Assuming you are using jQuery 1.8+, you can specifiy your buttons in a different way to add IDs to them:
$("#mydialog").dialog({
...
buttons : [{
text: "Close",
click: function() {
$(this).dialog("close");
}
},{
text: "Copy to clipboard",
id: "copyButton", // here is your ID
click : function() {
alert("Sorry, copy not supported in your browser, please copy manually.");
}
}]
...
});
//after .dialog("open");
$("#copyButton").zclip({
...
clickAfter: false // dont propagate click: will suppress unsupported warning
...
});
The only issue I have is that it seem you can only mount zclip on visible buttons, so I do the zclip() call inside the handler for the button that opens the dialog
I am using jEditable to update a value on my MVC model and back to the database successfully. The updated value appears on the webpage which is exactly what I want. I also want to update another control on the page (as it is a calculated value using the updated field). What is the best way to do this? Is there a hook into a successful jEditable update that I can add some jQuery into to refresh the other control?
My jEditable call :
$(function () {
$(".editable_textarea").editable("#Url.Action("UpdateSharePrice","Home")", {
indicator: "<span style='color:#FF0000;'>Saving...</span>",
type: 'text',
submitdata: { _method: "put" },
select: true,
submit: 'OK',
cancel: 'X',
width: '40',
cssclass: "editable",
tooltip: 'click to edit...',
onblur: "submit"
});
});
Thanks
Colin.
Well, I figured it out in the end
You can use the JEditable callback method to get the parameters used to call the controller method:
$(function () {
$(".editable_textarea").editable("#Url.Action("UpdateSharePrice","Home")", {
indicator: "<span style='color:#FF0000;'>Saving...</span>",
type: 'text',
select: true,
submit: 'OK',
cancel: 'X',
width: '40',
cssclass: "editable",
tooltip: 'click to edit...',
onblur: "submit",
callback: function(value, settings)
{
var fundId = this.id;
$.ajax({
url: '#Url.Action("GetMarketValue", "Home")',
type: 'POST',
data: { id : fundId },
success: function (data) {
$('#marketValueDiv_' + fundId).html(data);
}
});
}
});
});
This parameter can then be used to do an ajax post to another action method that returns the calculated field from the model:
public ActionResult GetMarketValue(int id)
{
if (ModelState.IsValid && id > 0)
{
BaseFund targetFund = _context.Funds.Find(id);
return PartialView("GetMarketValue", targetFund);
}
else
{
return PartialView("0.00");
}
}
The success callback on the ajax call is then used to update the appropriate div html content