I am trying to load external URL into modal AlloyUI dialog in Liferay Portal. If I open dialog at the first time the contents are showing but at the second time the contents are not showing. If refresh the page its showing.
This is my function:
Liferay.provide(
window,
'openModal',
function(title, url) {
var A = AUI();
var width = 800;
var modal = Liferay.Util.Window.getWindow({
dialog: {
centered: true,
constrain2view: true,
modal: true,
resizable: false,
height: 650,
width: width,
//destroyOnClose: true,
destroyOnHide: true,
toolbars: {
footer: [
{
label: 'Close',
cssClass: 'btn-link pull-right',
on: {
click: function() {
modal.hide();
}
}
}
]
}
},
closeOnOutsideClick: true,
id:'test-dialog',
title: title
}).plug(A.Plugin.IO, {
uri: url,
on: {
success: function(event) {
console.log("success");
},
complete: function(event) {
console.log("complete");
},
start: function(event) {
console.log("start");
},
failure: function(event) {
console.log("failure");
}
}
}).render();
}
);
The function is used in this link:
Open dialog
When I open dialog at the second time I get this error:
Cannot read property 'Window' of undefined
Resolved by using A.Plugin.DialogIframe module insted of A.Plugin.IO
Related
Hello i want to add videojs to my magento theme. Structure of directory.
config:
var config = {
paths: {
"videojs": "js/videojs/video.min"
},
shim: {
"videojs": {
deps: []
}
}
};
and inside view block:
<script>
define(['videojs'], function(videojs) {
'use strict';
var player = videojs('my-player', {
controls: true,
autoplay: true,
loop: true,
preload: 'auto'
});
});
</script>
In console i have Uncaught Error: Mismatched anonymous define() module: function(videojs) {
How can i fix this ?
You should change define to require in your block some like:
example.phtml
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="640"
height="264"
data-setup='{"techOrder": ["youtube"], "sources": [{ "type":
"video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}]}'>
</video>
<script>
require(['videojs'], function(videojs) {
'use strict';
var player = videojs('my-video', {
controls: true,
autoplay: true,
loop: true,
preload: 'auto'
});
});
</script>
I am using Vue.js to display json data from a locally stored file in a table on the web page. I also want to update the data in the json file by using data from a form. But I get the error mentioned above
import json from "../assets/data.json";
export default{
json,
data(){
return{
title: '',
date: new Date().toISOString().substr(0, 10),
modal: false,
menu2: false,
dialog: false,
notifications: false,
sound: true,
widgets: false,
task: '',
tasks: {},
}
},
methods: {
submit: function(){
this.tasks = {id: json.length+1, task:this.task,date: this.date, complete: false}
json.push(this.tasks)
var file = require('fs')
file.writeFile('../assets/data.json', json)
}
reset1(){
this.task = '';
this.date = new Date().toISOString().substr(0, 10);
}
},
name: "Form"
};
</script>
i am using highcharts-export-server for export charts and send it to Email in PDF format
while i am trying to export that in localy it was working fine, but on live server when i am trying to export all the charts data-labels disappear.
this is the image from which was exporting from live server.
and here is the image which was exporting locally.
Here is my Code
exports.getPieChartImg = (seriesData, xOrLength, innersize, showLegend, width, height) => {
var chartOpts = {
chart: {
type: 'pie',
width: width,
height: height,
},
plotOptions: {
pie: {
innerSize: innersize || 80,
depth: 25,
allowPointSelect: true,
dataLabels: {
enabled: false,
format: '<b>{point.name}</b>: {point.percentage:.2f} %'
},
showInLegend: showLegend || false,
},
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: '#6f6f6f',
format: '{point.percentage:.2f}',
crop: false,
overflow: "none",
},
pointWidth: 30,
}
},
legend: {
labelFormat: '<b>{name}</b> ({percentage:.2f})%',
useHTML: true,
},
series: [{
data: seriesData
}]
};
var exportSettings = generateExportSettings(chartOpts, 'Pie');
return generateBase64Chart(exportSettings)
}
function generateExportSettings(chartOpts, constr) {
return {
// b64: true,
instr: JSON.stringify(chartOpts),
noDownload: true,
constr,
globalOptions: {
colors: ['#3BB9DA', '#0F89A8', '#0B8F8B', '#1DB1AD', '#68E3DF', '#FFB469', '#F58B1F', '#D16900', '#FC3C3C', '#FF6666', '#FC8D8D', '#FCC0C0'],
lang: {
thousandsSep: ','
}
},
scale: false,
styledMode: false,
type: "image/png",
width: false,
};
}
function generateBase64Chart(exportSettings) {
return new Promise((resolve, reject) => {
highchartsExporter.export(exportSettings, function (err, res) {
if (err) {
return reject({
code: '1',
err,
msg: 'Error in stock chart',
exportSettings
})
}
return resolve({
code: '0',
msg: 'success',
data: 'data:image/png;base64,' + res.data,
})
});
})
}
remove node_module and reInstall it again.
and if not installed libfontconfig then install 'sudo apt-get install libfontconfig'
I have an application using infragistics asp.net web grid. In the main page, Grid is displayed no problem. user can select a row from main grid, from there a dialog box pops up where a second grid is. The second grid just display the details of user-selected grid one's row.
Now I have a problem in the second grid, where user couldn't modify any existing values. I counld't find out anything I did differently in the second grid from first grid. see my code:
<script type="text/javascript">
$(document).ready(function () {
$.ig.loader({
scriptPath: "js/",
cssPath: "css/",
resources: "igGrid.*"
});
$.ajax({
type: "POST",
url: "Default.aspx/LoadA",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
error: function (result) {
alert(result.d); }
});
function OnSuccess(result) {
$.ig.loader(
function () {
var jsonLocal = new $.ig.JSONDataSource({ dataSource: result.d, responseDataKey: "d" });
$("#tblMain").igGrid({
dataSource: jsonLocal,
autoGenerateColumns: false,
renderCheckboxes: true,
width: "100%",
height: "100%",
primaryKey: "ColA",
columns: [
{ key: "ColA", headerText: "ColA", dataType: "number" },
{ key: "ColB", headerText: "ColB",ataType: "string" }],
features: [
{ name: "Updating",
editMode: "row",
columnSettings: [
{ columnKey: "ColA", readOnly: true } ]
},
{ name: "Resizing",
deferredResizing: false,
allowDoubleClickToResize: true
},
{
name: "Filtering",
allowFiltering: true,
caseSensitive: false,
type: "local"
},
{
name: "Selection",
mode: "row",
cellSelectionChanging: igGridCellSelectionChanged
}
] //end feature
}) //end igGrid
} //end function
) //end loader
} //end onSuccess
$("#tblMain").on("iggridselectionrowselectionchanged", igGridCellSelectionChanged);
function igGridCellSelectionChanged(event, ui) {
var ColA = ui.row.element[0].cells[0].innerText;
$.ajax({
type: "POST",
url: "Default.aspx/LoadB",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: '{ColA:"' + ColA+ '"}',
success: OnAttachments,
error: function (result) {
alert(result.d);
}
});
};
function OnAttachments(result) {
$.ig.loader(function () {
$.ig.loader(function () {
var jsonLocal = new $.ig.JSONDataSource({ dataSource: result.d, responseDataKey: "d" });
$("#tblAttachment").igGrid({
dataSource: jsonLocal,
width: "800",
height: "80%",
autoGenerateColumns: false,
primaryKey: "UId",
columns: [
{ key: "Col1", headerText: "Col1", dataType: "number", width: "50px" },
{ key: "Col2", headerText: "Col2", dataType: "string", width: "100px" }
],
fixedHeaders: true,
showHeader: true,
features: [{ name: "Updating"}]
});
});
});
};
$('#dialog').dialog({
modal: true,
autoOpen: false,
closeOnEscape: false,
width: 800,
height: 500,
buttons: [{ text: "OK",
click: function () {
$("#dialog").dialog("close");
}
}] //end buttons
}); //end dialog
})
</script>
<body>
<div class="page">
<table>
<tr><td>
<table id="tblMain" border="1" align="center"></table>
</td></tr>
<tr><td>
<table>
<tr>
<td align="right">
<button id="btnAttach" class="button">
Additional Info</button>
</td>
</tr>
</table>
</td></tr></table>
<div id="dialog" title="Attach Contracts">
<table><tr><td>
<table id="tblAttachment" border="1" align="center">
<tr><td></td></tr>
</table>
</td></tr></table>
</div>
</div>
</body>
I think the problem is caused by changing the focus from input to that dialog. Just set trackFocus property to false.
//Initialize
$(".selector").igDialog({
trackFocus: false
});
I am using jQgrid - and it is great!
I have one problem.
(Oleg are you still around?)
In the search/filter form (were you can choose the coulmn you want to filter and the operation you want do to), the only things that comes up is the "contain" operator.
My colModel looks like this:
var columnModel = [{ name: 'ID', index: 'ID', sortable: true, searchoptions: { sopt: ['eq', 'cn','bw']}},
{ name: 'FirstName', index: 'FirstName', sortable: true},
{ name: 'LastName', index: 'LastName', sortable: true }
];
But it only gives me the contains operator.
The full grid is like this:
myGrid.jqGrid({
url: './ViewNQueryData.asmx/ViewNQueryData',
datatype: 'json',
mtype: 'POST',
postData: {userID:currentUserId, sphereID:currentSphereId},
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData)
{
if (postData.filters === undefined) postData.filters = null;
return JSON.stringify(postData);
},
jsonReader: {
root: function (obj) { return obj.d.rows; },
page: function (obj) { return obj.d.page; },
total: function (obj) { return obj.d.total; },
records: function (obj) { return obj.d.records; }
},
colModel: columnModel,
colNames: columnNames,
rowNum: 10,
rowList: [10, 20, 300],
sortable: true,
pager: "#ViewNQueryPager",
viewrecords: true,
gridview: true,
height: 250,
shrinkToFit: true, //If using frozen coulmns change to false.
gridComplete: function ()
{
$('#totalRecordsFound').html(myGrid.jqGrid('getGridParam', 'records') + " Customers");
},
loadError: function ()
{
alert("Error fetching data");
}
}).jqGrid('navGrid', '#ViewNQueryPager',
{ edit: false, add: false, del: false, search: true, view: true }, //option
{}, // use default settings for edit
{}, // use default settings for add
{}, // delete instead that del:false we need this
{multipleSearch: true, multipleGroup: true, showQuery: true, onSearch: function (response) { showQueryDetails(); } },
{ height: 250, jqModal: false, closeOnEscape: true} // view options
);
Can any one help me with this???
Fixed!
I had a snippet of code on my page that was doing this....