I need to open the data from a .phtml file (gallery.phtml) in a modal popup in Magento2. This is the code used to include modal scripts:
<div>
Click Me
</div>
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
content: 'gallery.phtml',
buttons: [{
text: $.mage.__('Continue'),
class: '',
click: function () {
this.closeModal();
}
}]
};
var popup = modal(options, $('#popup-mpdal'));
$("#click-me").on('click',function(){
$("#popup-mpdal").modal("openModal");
});
}
);
</script>
The gallery.phtml file is given below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="popup-mpdal">
<h1> Hi I'm here.... </h1>
</div>
</body>
</html>
But the popup is not coming.
I got the answer:
<div>
Click Me
</div>
<div id="popup-mpdal" >
<?php include ($block->getTemplateFile('Vendor_Module::gallery.phtml')) ?>
</div>
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
buttons: [{
text: $.mage.__('Continue'),
class: '',
click: function () {
this.closeModal();
}
}]
};
var popup = modal(options, $('#popup-mpdal'));
$("#click-me").on('click',function(){
$("#popup-mpdal").modal("openModal");
});
}
);
</script>
I have used this in html
<button type="button" class="action" data-trigger="trigger">
<span data-bind="i18n: 'Click Here'"></span>
</button>
<div data-bind="mageInit: {
'Magento_Ui/js/modal/modal':{
'type': 'popup',
'title': 'Popup title',
'trigger': '[data-trigger=trigger]',
'responsive': true,
'buttons': [{
text: 'Submit',
class: 'action'
}]
}}">
<div class="content">
Popup Content
</div>
</div>
Related
I am using sidebar utility from w2ui library. My sidebar has a menu of sub-menu items and allow for flat menu.
When the sidebar goes flat and mouse over menu item, I don't want tooltip to appeared on menu item that has sub menu item this case is menu "Level 2.1" because I have a script for showing sub menu item to appear right next to their parent menu when mouse over their parent.
<!DOCTYPE html>
<html>
<head>
<title>W2UI Demo: sidebar/9</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
<div id="sidebar" style="height: 300px; width: 200px; float: left"></div>
<div style="margin-left: 220px;">
<button class="w2ui-btn" onclick="w2ui.sidebar.goFlat()">Go Flat</button>
</div>
<div style="clear: both" />
<script type="text/javascript">
$(function() {
$('#sidebar').w2sidebar({
name: 'sidebar',
flatButton: true,
nodes: [{
id: 'level-1',
text: 'Level 1',
img: 'icon-folder',
expanded: true,
group: true,
nodes: [{
id: 'level-1-1',
text: 'Level 1.1',
icon: 'fa fa-home'
},
{
id: 'level-1-2',
text: 'Level 1.2',
icon: 'fa fa-star'
},
{
id: 'level-1-3',
text: 'Level 1.3',
icon: 'fa fa-star-o'
}
]
},
{
id: 'level-2',
text: 'Level 2',
img: 'icon-folder',
expanded: true,
group: true,
nodes: [{
id: 'level-2-1',
text: 'Level 2.1',
icon: 'fa fa-user',
count: 3,
nodes: [{
id: 'level-2-1-1',
text: 'Level 2.1.1',
icon: 'fa fa-star-o'
},
{
id: 'level-2-1-2',
text: 'Level 2.1.2',
icon: 'fa fa-star-o',
count: 67
},
{
id: 'level-2-1-3',
text: 'Level 2.1.3',
icon: 'fa fa-star-o'
}
]
}, ]
}
],
onFlat: function(event) {
$('#sidebar').css('width', (event.goFlat ? '35px' : '200px'));
}
});
});
</script>
</body>
</html>
I tried to go through the document on the w2ui official website, but I could not find anything stated about tooltip related menu sidebar.
Is there any way or option of w2sidbar to hide the tooltip on menu that sub-menu ? With Thanks.
i am showing a table of picture in the page
var oTemp = new sap.m.ColumnListItem({
vAlign: "Middle",
cells: [
new sap.m.VBox({
items: [
new sap.m.Image({
src: {
path: "myModel>ImageLink",
},
densityAware:false,
decorative: false,
error: function(oEvent) {
this.setSrc(oEvent.getSource().getProperty("src"));
}
})
]
})
]
});
otable.bindItems({
path: "myModel>/Images",
template: oTemp
});
znd in xml
<m:Table id="imageTable">
<m:headerToolbar>
<m:OverflowToolbar>
<m:Title text="some text"/>
</m:OverflowToolbar>
</m:headerToolbar>
<m:columns>
<m:Column>
</m:Column>
</m:columns>
</m:Table>
and it always enter in the error function despite in the debugger the image is l but once i open the image elsewhere the images are loaded perfectly
Will this help? http://jsbin.com/xusikeh/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>
<style type="text/css">
.sapMObjLTitle {
cursor: pointer;
}
</style>
<!-- XML-based view definition -->
<script id="oView" type="sapui5/xmlview">
<mvc:View height="100%" controllerName="myView.Template"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:m="sap.m">
<m:Table id="imageTable">
<m:headerToolbar>
<m:OverflowToolbar>
<m:Title text="some text" />
</m:OverflowToolbar>
</m:headerToolbar>
<m:columns>
<m:Column>
</m:Column>
</m:columns>
</m:Table>
</mvc:View>
</script>
<script>
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel',
'sap/m/ColumnListItem',
'sap/m/VBox',
'sap/m/Image'
], function(jQuery, Controller, JSONModel, ColumnListItem, VBox, Image) {
return Controller.extend("myView.Template", {
onInit: function(oEvent) {
var oView = this.getView();
var oTable = oView.byId("imageTable");
oTable.bindItems({
path: "myModel>/Images",
template: new ColumnListItem({
vAlign: "Middle",
cells: new sap.m.VBox({
items: new Image({
src: '{myModel>ImageLink}',
densityAware:false,
decorative: false
})
})
})
});
oView.setModel(new JSONModel({
Images: [{
ImageLink: "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
}]
}), "myModel");
}
});
});
var oView = sap.ui.xmlview({
viewContent: jQuery('#oView').html()
});
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody">
<div id='content'></div>
</body>
</html>
<template is="dom-repeat" items="[[routes]]">
<div>{{item.color}} | {{item.Index}}</div>
<google-map-directions id="{{item.name}}"
renderer-options='{"draggable":true,"polylineOptions":{"draggable":true,"strokeColor":"{{item.color}}"},"routeIndex":1}'
start-address="{{item.startAddress}}"
end-address="{{item.endAddress}}"
travel-mode="DRIVING"
waypoints='[{"location": "Palo Alto"}, {"location": "San Mateo"}]'>
</google-map-directions>
<div id="dirt"></div>
</template>
I am creating some routes using dom-repeat. I would like these routes to have different colors. They don't. It seems as if each route is using the same renderer. How can I change the renderer for each route?
It turns out the only missing piece in your code is one character for the attribute-binding.
In order for the compound binding to be deserialized into a JSON object, the following is required:
attribute-binding syntax (i.e., $=) even though binding to a property
Single-quotes around the value instead of double-quotes
the target property must be of type Object (which is true for <google-map-directions>.rendererOptions)
// template
<google-map-directions map="[[map]]"
renderer-options$='{"draggable":true,"polylineOptions":{"draggable":true,"strokeColor":"{{item.color}}"},"routeIndex":1}'
... >
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="google-map/google-map.html">
<link rel="import" href="google-map/google-map-directions.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<style>
google-map {
height: 600px;
}
</style>
<template>
<google-map map="{{map}}" latitude="37.779"
longitude="-122.3892"></google-map>
<template is="dom-repeat" items="{{routes}}">
<google-map-directions map="[[map]]"
start-address="{{item.startAddress}}"
end-address="{{item.endAddress}}"
travel-mode="BICYCLING"
renderer-options$='{"draggable":true,"polylineOptions":{"draggable":true,"strokeColor":"{{item.color}}"},"routeIndex":1}'
waypoints="{{item.waypoints}}"></google-map-directions>
</template>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
properties: {
routes: {
type: Array,
value: function() {
return [
{
color: '#0000FF',
startAddress: 'San Francisco',
endAddress: 'Mountain View',
waypoints: [{location: 'Palo Alto'}, {location: 'San Mateo'}]
},
{
color: '#FF0000',
startAddress: 'Oakland',
endAddress: 'San Jose',
waypoints: [{location: 'Pleasanton'}, {location: 'Union City'}]
},
];
}
}
}
});
});
</script>
</dom-module>
</body>
codepen
Alternatively, you could use a computed binding that returns the appropriate renderer options based on a given color and route index:
// template
<google-map-directions map="[[map]]"
renderer-options="{{_getRendererOptions(item.color, index)}}"
... >
// script
Polymer({
...
_getRendererOptions: function(strokeColor, index) {
return {
draggable: true,
polylineOptions: {
draggable: true,
strokeColor: strokeColor,
routeIndex: index
}
};
}
});
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="google-map/google-map.html">
<link rel="import" href="google-map/google-map-directions.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<style>
google-map {
height: 600px;
}
</style>
<template>
<google-map map="{{map}}" latitude="37.779"
longitude="-122.3892"></google-map>
<template is="dom-repeat" items="{{routes}}">
<google-map-directions map="[[map]]"
start-address="{{item.startAddress}}"
end-address="{{item.endAddress}}"
travel-mode="BICYCLING"
renderer-options="{{_getRendererOptions(item.color, index)}}"
waypoints="{{item.waypoints}}"></google-map-directions>
</template>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
properties: {
routes: {
type: Array,
value: function() {
return [
{
color: '#0000FF',
startAddress: 'San Francisco',
endAddress: 'Mountain View',
waypoints: [{location: 'Palo Alto'}, {location: 'San Mateo'}]
},
{
color: '#FF0000',
startAddress: 'Oakland',
endAddress: 'San Jose',
waypoints: [{location: 'Pleasanton'}, {location: 'Union City'}]
},
];
}
}
},
_getRendererOptions: function(strokeColor, index) {
return {
draggable: true,
polylineOptions: {
draggable: true,
strokeColor: strokeColor,
routeIndex: index
}
};
}
});
});
</script>
</dom-module>
</body>
codepen
I am building my first hybrid app with Ionic, and there is something I do not understand.
What is the use of ion-nav-view.
I explain: I have an app with "nav-tabs". Here is the code of a nav-tab:
<ion-tab title="Contacts" icon="icon-users" href="#/tab/contacts">
<ion-nav-view name="tab-contacts"></ion-nav-view>
</ion-tab>
Everything is OK here.
So now, my list of contacts is a list which goes like this:
<ion-item href="#/tab/contacts/{{contact.id}}" ng-repeat="contact in contacts | orderBy:'name'">
{{contact.name}}
</ion-item>
Here is my problem: I have configured a route for '/tab/contacts/:id', and a view. The problem is: where should I put the equivalent of the "ion-nav-view" directive, so that my view is actually shown when I click?
Thank you!
I think the best answer is a working example similar to what you want to do.
However <ion-nav-view> must be in your index.html and it is where the route/state manager will put the templates of your views. The templates have another directive, <ion-view>, which wraps all other directives and content of the view.
Check the snippet below:
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: '/tab',
abstract: true,
templateUrl: 'views/tabs.html'
})
.state('tabs.contacts', {
url: '/contacts',
views: {
'tab-contacts': {
templateUrl: 'views/contacts.html',
controller: 'contactsCtrl',
resolve: {
allcontacts: function(Contacts) {
console.log("resolve allcontacts");
return Contacts.all();
}
}
}
}
})
.state('tabs.detail', {
url: '/detail/:id',
views: {
'tab-detail': {
templateUrl: 'views/detail.html',
controller: 'detailCtrl',
resolve: {
contact: function($stateParams, Contacts) {
return Contacts.get($stateParams.id);
}
}
}
}
});
$urlRouterProvider.otherwise("/tab/contacts");
})
.controller('contactsCtrl', function($scope, $ionicLoading, $ionicPopover, $ionicPopup, $compile, $http, allcontacts) {
console.log("contactsCtrl");
$scope.contacts = allcontacts;
})
.controller('detailCtrl', function($scope, contact, $ionicHistory) {
$scope.contact = contact;
console.log("detailCtrl", contact);
$scope.myGoBack = function() {
$ionicHistory.goBack();
};
})
.factory('Gravatar', function() {
return {
getUrl: function(s){
return "https://secure.gravatar.com/avatar/"+CryptoJS.MD5(""+Math.random())+"?d=identicon&s="+s;
}
}
})
.factory('Contacts', function($http, $q, $timeout, Gravatar) {
var contacts = [];
return {
all: function(){
var dfd = $q.defer();
//$http.get('../data/contacts.json').then(function(response){
$timeout(function() {
//contacts = response.data;
contacts = [{
id: 1,
name: "William",
surname: "Hayes",
fullname: "Grace Beatty",
image: Gravatar.getUrl(128)
}, {
id: 2,
name: "James",
surname: "Jennings",
fullname: "Hilda Gross",
image: Gravatar.getUrl(128)
}, {
id: 3,
name: "Judith",
surname: "Silverman",
fullname: "Bruce Kern",
image: Gravatar.getUrl(128)
}, {
id: 4,
name: "Greg",
surname: "Fitzpatrick",
fullname: "Heather Bowers",
image: Gravatar.getUrl(128)
}, {
id: 5,
name: "Teresa",
surname: "McLean",
fullname: "Leon Baker",
image: Gravatar.getUrl(128)
}, {
id: 6,
name: "Emily",
surname: "Lassiter",
fullname: "Virginia Pittman",
image: Gravatar.getUrl(128)
}, {
id: 7,
name: "Don",
surname: "Sinclair",
fullname: "Ashley Richards",
image: Gravatar.getUrl(128)
}, {
id: 8,
name: "Hazel",
surname: "Livingston",
fullname: "Gloria O",
image: Gravatar.getUrl(128)
}, {
id: 9,
name: "Regina",
surname: "Braun",
fullname: "Monica Casey",
image: Gravatar.getUrl(128)
}, {
id: 10,
name: "Leroy",
surname: "Pritchard",
fullname: "Gretchen Sharpe",
image: Gravatar.getUrl(128)
}];
//console.log(contacts);
dfd.resolve(contacts);
console.log("contacts.all");
});
return dfd.promise;
},
get: function(id) {
for (var i = 0; i < contacts.length; i++) {
if (contacts[i].id == id) {
return contacts[i];
}
}
return null;
}
}
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic detail view</title>
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
</head>
<body>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="views/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="Contacts" icon-off="ion-ios-people-outline" icon-on="ion-ios-people" href="#/tab/contacts">
<ion-nav-view name="tab-contacts"></ion-nav-view>
</ion-tab>
<ion-tab title="Contact detail" icon-off="ion-ios-person-outline" icon-on="ion-ios-person href="#/tab/detail">
<ion-nav-view name="tab-detail"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="views/contacts.html" type="text/ng-template">
<ion-view title="Contacts">
<ion-content>
<ion-list>
<ion-item class="item item-thumbnail-left" ng-repeat="contact in contacts" ui-sref="tabs.detail({ id: contact.id })">
<img ng-src="{{ contact.image }}" />
<h2>{{ contact.name }}</h2>
<p>{{ contact.fullname }}</p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
<script id="views/detail.html" type="text/ng-template">
<ion-view title="Contact detail">
<ion-nav-buttons side="left">
<button class="button button-clear" ng-click="myGoBack()" >
<i class="icon ion-ios-arrow-back"></i>
Back</button>
</ion-nav-buttons>
<ion-content>
<ion-item class="list-item">
<img ng-src="{{ contact.image }}" alt="{{ contact.name }}" />
<div class="list-details">
<p class="sub-heading"><b>Name:</b> {{ contact.name }}</p>
<p><b>Surname:</b> {{ contact.surname }}</p>
<p><b>Fullname:</b> {{ contact.fullname }}</p>
</div>
</ion-item>
</ion-content>
</ion-view>
</script>
</body>
</html>
I am using collections2 and meteor-cfs-autoform for schemas and to upload and display image using cfs:gridfs storage adaptor package but unable to show images in template.Can you please tell me where i am doing mistake and its solution.
collections.js
Recipes = new Mongo.Collection('recipes');
Reviews = new Mongo.Collection('reviews');
RecipesImages = new FS.Collection("recipesImages", {
stores: [new FS.Store.GridFS("recipesImages")]
});
RecipesImages.allow({
insert: function(userId, doc) {
return true;
},
update: function(userId, doc, fieldNames, modifier) {
return true;
},
download: function(userId) {
return true;
},
fetch: null
});
Recipes.attachSchema(new SimpleSchema({
name: {
type: String,
label: "Recipe Name",
max: 100
},
ingredients: {
type: [Object],
minCount: 1
},
"ingredients.$.name": {
type: String
},
"ingredients.$.amount": {
type: String
},
description: {
type: String,
label: "How to prepare ",
},
time: {
type: Number,
label: "Time (Minutes)",
},
image: {
type: String,
autoform: {
afFieldInput: {
type: "cfs-file",
collection: 'recipesImages',
label: 'Recipe Picture'
}
}
}
}));
recipes.js
Template.recipes.helpers({
'showRecipes':function(){
return Recipes.find();
},
'images': function () {
return RecipesImages.findOne({_id:id}) ;
}
})
recipes.html
<template name="recipes">
{{#each showRecipes}}
<div class=" col-md-4">
<div class="panel panel-default mb " >
<div class="panel-image">
<img src="{{this.url }}" class="panel-image-preview" />
</div>
<div class="panel-body">
<h4>{{name}}</h4>
<p>{{description}}</p>
</div>
<div class="panel-footer text-center" >
<p>its footer </p>
</div>
</div>
</div>
{{/each}}
</template>
Are you importing cfs:ui? If not, you should include it so that you can use the FS.GetFile helper. Then you can use this code.
Recipes Template
<template name="recipes">
{{#each showRecipes}}
<div class=" col-md-4">
<div class="panel panel-default mb " >
<div class="panel-image">
{{#with FS.GetFile "recipesImages" image}}
<img src="{{url}}" class="panel-image-preview" />
{{/with}}
</div>
<div class="panel-body">
<h4>{{name}}</h4>
<p>{{description}}</p>
</div>
<div class="panel-footer text-center" >
<span class="glyphicon glyphicon-open-file"></span>
</span><small> {{time}}</small>
<span class="glyphicon glyphicon-heart likes" style="vertical-align:middle"></span><small>2 </small>
<span class="glyphicon glyphicon-share"></span>
</div>
</div>
</div>
{{/each}}
</template>
Recipes helpers
Template.recipes.helpers({
'showRecipes':function(){
return Recipes.find();
}
});
Here's the link to cfs:ui documentation