so right now I'm trying to load a fancybox modal with a javascript string I got back from an Ajax call. What ends up happening is the modal opens up with this code inside rather than converting them to the appropriate images/thumbnails.
[{ src : 'e2121a1caf564e92be14cfb38d094901/9234b96c09_640.jpg', opts : { thumb: 'e2121a1caf564e92be14cfb38d094901/9234b96c09_640.jpg' } }]
It is not clear what version are you using, here is an example for v3:
$.fancybox.open([
{
src : 'https://source.unsplash.com/i-FqQIkJMqg/1536x2304',
thumb : 'https://source.unsplash.com/i-FqQIkJMqg/200x200'
},
{
src : 'https://source.unsplash.com/z55CR_d0ayg/1279x853',
thumb : 'https://source.unsplash.com/z55CR_d0ayg/200x200'
}
]);
Related
I have two apps. The first app has a view. There I push a button and then it should change to the second application. I don't want to navigate to the first view, but to the second with a parameter.
I use this:
oCrossAppNavigator.toExternal({
target : {
semanticObject : "Z_APP2",
action : "onPress"
},
params : {
param1 : param1
}
In APP2 I write this in the Component.js:
var oRouter = this.getRouter().initialize();
var oComponentData = this.getComponentData();
if (oComponentData.startupParameters) {
oRouter.navTo("Detail", {
param1 : oComponentData.startupParameters.param1[0],
}, false);
It doesn't switch to the other app. Which action should I write here ?
Do I have to implement something else in App2?
The answer is:
window.location.replace("-- url with parameters here --")
The right system is : window.location.host
I have a same issue.
SAPUI5 provide sap.m.URLHelper which contains redirect method :
sap.m.URLHelper.redirect(sURL, bNewWindow?)
I think SAPUI5 do the same thing than window.location.replace() but more SAPUI5-friendly.
In view
var oData = {
"SavedSearch" : [
{ name : "Save1" },
{ name : "Save2" },
{ name : "Save3" },
{ name : "Save4" },
{ name : "Save5" }
]
}
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(oData);
sap.ui.getCore().setModel(oModel,"ModelData");
var oTest = new test({
manageSavedSearch :{
path : "ModelData>/SavedSearch",
template: new sap.ui.commons.Button({
text : "{ModelData>name}"
})
},
});
oTest.placeAt(this);
In Custom Control
sap.ui.core.Control.extend("test",{
metadata:{
properties : {},
aggregations:{
manageSavedSearch : {type : "sap.ui.commons.Button", multiple :true },
layout : {type : "sap.ui.layout.VerticalLayout", multiple :false }
}
},
init : function(){
},
renderer : {
render : function(oRm, oControl) {
// Come two Times Here
var manageSavedSearch = oControl.getManageSavedSearch();
var oSavedButtonHLyt = new sap.ui.layout.VerticalLayout();
for(var index = 0 ; index < manageSavedSearch.length ; index++){
oSavedButtonHLyt.addContent(manageSavedSearch[index]);
}
oControl.setAggregation("layout",oSavedButtonHLyt);
oRm.renderControl(oControl.getAggregation("layout"));
}
}
},
onAfterRendering: function(){}
});
If I don't use any layout then It doesn't come two time in render otherwise it comes two time in render. This issues is happening from version 1.24.4. please Can I have any guidance here.
Changing aggregation(e.g. add/remove/insert/set/removeAll) invalidates the control. You should never invalidate a control during the rendering. In your case it can be an infinite loop.
To debug rendering invalidation there is a url parameter test.html?sap-ui-xx-debugRendering=true then you can see the rendering stack trace and who is responsible for the rendering.
In your code sample, there are two aggregations update. setAggregation and addContent.
Aggregation mutatators uses 3rd parameter to suppress invalidation. So following will insert the aggregation but suppress the invalidation since whole control will be rendered at the end it will not be a problem.
oControl.setAggregation("layout",oSavedButtonHLyt, true); // suppress invalidate
I guess you assume same should work for addContent
oSavedButtonHLyt.addAggregation("content", manageSavedSearch[index], true);
But it does not because here manageSavedSearch[index], so your template clone's parent is oTest initially, but you are changing the parent with addAggregation because layout will be the parent. But UI5 cannot determine automatically for the previous parent's suppress since its aggregation will be moved to somewhere else. So we go with
oControl.removeAggregation("manageSavedSearch", manageSavedSearch[index], true);
oSavedButtonHLyt.addAggregation("content", manageSavedSearch[index], true);
Here is the jsbin http://jsbin.com/rezayebada/1/edit?js,output
BTW, as you mentioned this is just an example do not take this as a reference for building composite controls.
Basically, property/aggregation/association changes invalidates the control if the control does not overwrite its mutator methods. I see it is not easy to understand what invalidates when but sap-ui-xx-debugRendering=true helps you to understand with stack trace.
This problem I was also facing, you can do one thing try using local resources
rather than online resources.
I am migrating the AUI popup dialog window from liferay 6.1 to liferay 6.2. I see that there are some specific changes to be made. I had some problems with display of buttons but it is resolved now. But the problem is with the close icon (x) which should be on the top right corner. It disappeared suddenly as soon as I added a save button.
Here is my code:
myPopup = AUI().use('aui-base','liferay-util-window','aui-io-deprecated', 'event', 'event-custom', function(A) {
var buttons =[{
cssClass: 'button_close',
label: 'Save',
render:true,
id: 'myPopupButton',
on: {
click: function() {
myPopupSubmit();
}}
}];
myPopup = Liferay.Util.Window.getWindow(
{
dialog: {
title : a + ' mytitle',
centered : true,
height : 600,
width : 500,
draggable : true,
resizable : true,
modal : true,
toolbars: {
footer:buttons
},
}}).plug(A.Plugin.IO, {
uri : url
}).render();
myPopup.show();
});
}
Please let me know if you have any idea on it..
on myPopupSubmit I have also written code to close the popup as:
top.document.getElementById('closethick').click();
Since there is no closethick button it returns null.
Using the modal dialog example as a comparison, the X close button is removed when using the toolbars property.
Reviewing the source code for the toolbars property (line 309 at time of writing this) indicates that if you use this property directly, you'll need to include your own X close in the header.
An alternative would be to use the addToolbar function (as seen in the example) to include your buttons while preserving the default toolbars.
modal.addToolbar([{
cssClass: 'button_close',
label: 'Save',
render:true,
id: 'myPopupButton',
on: {
click: function() {
myPopupSubmit();
}
}
}]);
I would also consider making the instance of the dialog available to your myPopupSubmit function so that you would have direct access to perform dialog.hide() or calling dialog.hide() after myPopupSubmit versus using the X close approach.
If sticking with the current approach, the id being used will not work, you'll need to use a CSS selector as the YUI based id will change.
I'm having trouble adding a mailto: link to a grid panel's toolbar.
I've tried modifying the object's HTML configuration & also via the handler but neither are opening the new email message.
{
text : 'Support',
html: 'Support'
}
{
text : 'Support',
handler: function() {
return 'Support';
}
handler: is used to create handler function of button pressed. To make your mailto link work you should redirect to mailto:email#xx.com address like:
handler: function() {
window.location = 'mailto:email#xx.com';
}
I would do as #webbandit suggested, except I would use window.open('mailto:address.com')
If you are using ExtJS 4.x, you can define it in href:
{
text : 'Support',
href : "mailto:email#xx.com"
}
hrefTarget="_blank" is default value, but it is better if you set it to _self:
{
text : 'Support',
href : "mailto:email#xx.com",
hrefTarget: "_self"
}
I use the Jstree 1.0RC3 and do not get it to work to have a node selected and to let the tree open so that this node is visible.
My code is this:
.jstree({
// List of active plugins
"plugins" : [
"themes","json_data","ui","crrm","dnd","search","types","hotkeys","contextmenu"
//"themes","json_data","ui","crrm","cookies","dnd","types","hotkeys"
],
"json_data" : {
"ajax" : {
"url" : $path + "/server.php",
"data" : function (n) {
return {
"operation" : "get_children",
"id" : n.attr ? n.attr("id").replace("node_","") : <?php echo($jstree_root); ?>
};
}
}
},
},
"core" : {
// just open those two nodes up
// as this is an AJAX enabled tree, both will be downloaded from the server
"initially_open" : [ <?php echo($jstree_root_node); ?> ]
The UI-plugin is empty. The php echo($jstree_root_node) opens the first hierarchical level below the root for better overview. Sometimes I would like to pass an ID of a Node that should be selected. This node is not always visible by opening the tree by default. What I see is that the node will be selected if it is visible in the first hierarchical level. If it is deeper, it is not selected.
I found in the forums to use this before the JSTREE call but it is not working:
.bind("reopen.jstree", function () {
$("#demo").jstree("select_node", "#node_1637");
$("#node_1637").parents(".jstree-closed").each(function () {
$("#demo").jstree("open_node", this, false, true);
});
})
Any ideas on this one? It seems to be right in front of my nose, but I dont see it....
gb5256
I think there are 2 ways to handle it.
First option - Using "initially_open" you need to specify all nodes going from root to selected node. The jsTree will go through this sequence, open each one node, load it's content, open next node, load it's content etc.
Some basic idea of the script:
"core" : {
"initially_open" : [ < ?php echo implode(',', $path_to_node) ?> ]
}
Second option - Using "search" plugin you need to create a php script that will be called by ajax request and should return the path to searched node.
So you define search plugin:
'search' : {
'case_insensitive' : true,
'ajax' : {
'url' : 'search_script.php',
'data' : function(n) {
return { search_id : n };
}
}
},
Then you bind the search action after tree is loaded:
$('#tree').bind('loaded.jstree', function(e, data){
$('#tree').jstree('search', <?php echo($jstree_searched_node); ?>);
});
The search_script.php should return the array of node-keys to be opened the same way as in first option.
It's not the complete copy&paste solution, but I hope this will take you to the right way to finish it successfully.
you could use open_all to open all available nodes.
$("#TreeID").jstree('open_all');