There is some case when a popup shouldn't be closed by clicking the background. After googling here and there still no success on that. This is the code:
jQuery('.magnific_link').magnificPopup({
type: "iframe",
fixedContentPos: true,
closeOnBgClick: false,
iframe: {
markup: '<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" style="background:white;" frameborder="0" allowfullscreen></iframe>'+
'</div>',
patterns: {
test: {
index: '',
id: function (url) {
var m = url.match(/^(.*)/);
return m === undefined ? null : m[1];
},
src: "%id%"
}
}
}
});
Any idea what is going wrong? Thanks
Related
I have been trying to implement this vue.js template into my vue project and it has been returning "Uncaught ReferenceError: Vue is not defined" despite the direct script set on the first line.
<script type="text/javascript" src="https://vuejs.org/js/vue.min.js"</script>
<template>
<div id="app" class="wrapper">
<fullcalendar class="full-Calendar" :events="events" :editable="true"></fullcalendar>
</div>
</template>
<script>
Vue.component('full-calendar', {
template: '<div></div>',
props: {
events: {
type: Array,
required: true
},
editable: {
type: Boolean,
required: false,
default: false
},
droppable: {
type: Boolean,
required: false,
default: false
}
},
data: function()
{
return {
cal: null
};
},
ready: function()
{
var self = this;
self.cal = $(self.$el);
var args = {
lang: 'en',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
height: "auto",
allDaySlot: false,
slotEventOverlap: false,
timeFormat: 'HH:mm',
events: self.events,
dayClick: function(date)
{
self.$dispatch('day::clicked', date);
self.cal.fullCalendar('gotoDate', date.start);
self.cal.fullCalendar('changeView', 'agendaDay');
},
eventClick: function(event)
{
self.$dispatch('event::clicked', event);
}
};
if (self.editable)
{
args.editable = true;
args.eventResize = function(event)
{
self.$dispatch('event::resized', event);
}
args.eventDrop = function(event)
{
self.$dispatch('event::dropped', event);
}
};
if (self.droppable)
{
args.droppable = true;
args.eventReceive = function(event)
{
self.$dispatch('event::received', event);
}
};
this.cal.fullCalendar(args);
}
});
new Vue({
el: '#app',
data: {
events: [
{
title: 'Event1',
start: '2018-08-10 12:30:00',
end: '2018-08-10 16:30:00'
},
{
title: 'Event2',
start: '2018-08-07 17:30:00',
end: '2018-08-07 21:30:00'
}
]
},
events: {
'day::clicked': function(date)
{
console.log(date);
}
}
});
</script>
<style>
.wrapper {
margin: 2rem;
}
</style>
I've also tried adding the direct script to index.html and it leads to "[Vue warn]: Unknown custom element"
you are allowed to use only one <script> tag in the component.
since 2 are present it will give preference to the default syntax flow
<templete></templete>
<script></script>
<style></style>
check out this
https://github.com/vuejs/vue-loader/issues/228
and
https://medium.com/#lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8
i'm using vue-slick to show my images..
i've tried every solution that i found.. but none is working.
here is my template:
<slick ref="slick" :options="slickOptions">
<img v-for="(item) in categories" :src="'/images/category/'+item.image_url" alt="" class="img-fluid" >
</slick>
and here is my scripts:
data () {
return {
categories:'',
slickOptions: {
dots: true,
infinite: false,
autoplay: false,
arrows : false,
draggable:true,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
},
}
},
mounted() {
let _this = this;
axios({
method: 'post',
url: '/api/category',
data : {'name' : _this.name}
}).then( (response)=> {
console.log(response.data.data);
_this.categories = response.data.data;
}).catch((error) => {
console.log(error.response)
});
},
methods:{
next() {
this.$refs.slick.next();
},
prev() {
this.$refs.slick.prev();
},
reInit() {
this.$refs.slick.reSlick()
}
},
and only loading the image, and the slick is not working...!!?
I have faced the same issue, and what I did to solve this is to put the
v-if="categories.length > 0" on the <slick> tag.
It make the slick won't be created before the data that we want to display contains the data first.
Use below code to reinit slick, and call on success function of response
reInit() {
let currIndex = this.$refs.slick.currentSlide()
this.$refs.slick.destroy()
this.$nextTick(() => {
this.$refs.slick.create()
this.$refs.slick.goTo(currIndex, true)
})
}
I'm assuming your Axios is returning data with the structure you are looking for.
I'm also assuming you are using the vue-slick component and not slick.
You should iterate through a DIV like stated in the documentation. Without Axios, I did this:
In template:
<slick ref="slick" :options="slickOptions">
<div>Escolhe uma configuração...</div>
<div v-for="d in data1"><a class="inline" :href="d.image"><img :src="d.image" alt="">{{ d.text }}</a></div>
</slick>
In Javascript:
data: function() {
return {
data1: [
{ image: 'http://placehold.it/100x100', text: 'Config1' },
{ image: 'http://placehold.it/100x100', text: 'Config2' },
{ image: 'http://placehold.it/100x100', text: 'Config3' },
{ image: 'http://placehold.it/100x100', text: 'Config4' }
]
}
I am new to knockout and MVC. I wanted to add a link button(delete) which will delete the record that is displayed in my knockout grid. I really dont have any idea how to achieve this. I have the following code that displays the record using the KO grid. Now I want to add a link button in the grid to delete the record
CONTROLLER:
public JsonResult GetResult()
{
GetResultRequest req = new GetResultRequest() { AcctID=57345, PartyType=2 };
var getResultInfo = WSHelper.WsService.GetResults(req);
return Json(getResultInfo.Signers, JsonRequestBehavior.AllowGet);
}
VIEW:
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/SafeHarborBundle")
<script src="~/Scripts/koGrid-2.1.1.js"></script>
<script type="text/javascript">
var dataViewModel = ko.mapping.fromJS(#Html.Raw(Json.Encode(Model)));
<div id="gridSigner">
<div id="grids123" style="height: 700px; width: 650px;"
data-bind="koGrid: {
data: gridItems, columnDefs: [{ field: 'AcctID', displayName: 'AcctID', width: '150' },
{ field: 'FName', displayName: 'First Name', width: '150' },
{ field: 'LName', displayName: 'Last Name', width: '150' },
{ field: 'AliasFName', displayName: 'Alias First Name', width: '150' },
{ field: 'SSN', displayName: 'AcctID', width: '150' }],
autogenerateColumns: false,
isMultiSelect: false,
showFilter: true,
showColumnMenu: true,
enablePaging: false,
displaySelectionCheckbox: false,
enableColumnResize: false,
multiSelect: false
}">
JQUERY FILE:
$(document).ready(function () {
loadApplication(dataViewModel);
ko.applyBindings(Gridviews, document.getElementById('gridSigner'));
});
function loadApplication(initialData) {
self = this;
self.ViewModel = initialData;
self.BranchOptions = ko.observableArray([]);
self.AcctTypeOptions = ko.observableArray([]);
self.OriginationOptions = ko.observableArray([]);
self.Message = ko.observable();
SearchSignerData();
ko.applyBindings(self, document.getElementById('main-search'));
}
SearchSignerData = function () {
$.ajax({
type: "Get",
url: "/SafeHarborApp/GetResult",
contentType: 'application/json',
async: true,
cache: false,
beforeSend: function () {
},
success: function (result) {
alert(result[0].AcctID.toString());
if (result.length != 0) {
$.each(result, function (i, item) {
Gridviews.gridItems.push(item);
});
}
else {
Gridviews.gridItems.removeAll();
alert("No Records found");
}
},
complete: function () {
},
error: function (xhr, textStatus, errorThrown) {
//alert(jqXHR.responseText);
var title = xhr.responseText.split("<title>")[1].split("</title>")[0];
alert(title);
// Handle error.
}
});
}
The above code works fine in displaying the record in the KO grid. However, I dont know how to add a delete button in the displayed KO grid now. I tried searching for it but was not able to find anything useful that will get me the result. Please help...
Use CellTemplate in ko grid.plese see code below
<script type="text/javascript">
self.NoOfAccountColumn = '<a data-bind="value: $parent.entity" onclick="Popup(this.value)">No Of Account</a>';
self.Delete = '<a data-bind="value: $parent.entity" onclick="deleteRow(this.value)">Delete</a>';
function Popup(rowItem) {
alert(rowItem.AffinityNum + ' ' + rowItem.ClientName + ' : NoOfAccount Clicked');
}
function deleteRow(rowItem) {
alert(rowItem.AffinityNum + ' ' + rowItem.ClientName + ' : Delete Clicked');
}
function isDoubleClick(oldValue, currentValue) {
var responseTime = 400;
if ((currentValue - oldValue) <= responseTime) {
self.clickTime = currentValue;
return true;
}
self.clickTime = currentValue;
return false;
};
</script>
<script src="~/Scripts/Packages/koGrid-2.1.1.js"></script>
<div id="disp">
<div id="grid" style="height: 200px; width: 600px"
data-bind="koGrid: {
data: BranchOptions,
afterSelectionChange: function (rowItem, event) {
if (event.type == 'click' && isDoubleClick(self.clickTime, event.timeStamp)) {
alert(rowItem.entity.ClientName + ' : Row DoubleClick');
}
},
columnDefs: [{ field: 'ClientName', displayName: 'Client Name', width: '*', },
{ field: 'AffinityNum', displayName: 'Affinity Num', width: '*', cellTemplate: NoOfAccountColumn },
{ field: 'AffinityID', displayName: 'Affinity ID', width: '*', cellTemplate: Delete }],
autogenerateColumns: false,
isMultiSelect: false,
showFilter: true,
showColumnMenu: true,
enablePaging: false,
displaySelectionCheckbox: false,
enableColumnResize: true,
multiSelect: false
}">
</div>
</div>
I retrieve images against specific id and display as data view using ExtJS 4. Now I need to call function by dbl clicking the image.
Ext.define('${pkgName}.v02x003001.SV02X00300102', {
extend: 'Ext.view.View',
alias: 'widget.sv02x00300102',
id: 'images-view',
autoScroll: true,
trackOver: true,
multiSelect: true,
height: 180,
overItemCls: 'x-item-over',
itemSelector: 'div.thumb-wrap',
emptyText: 'No images to display',
prepareData: function (data) {
Ext.apply(data, {
shortName: Ext.util.Format.ellipsis(data.name, 15),
sizeString: Ext.util.Format.fileSize(data.size),
dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a")
});
return data;
},
initComponent: function () {
var me = this;
var member = Ext.getCmp('member-sv02x00300104').getValue();
me.store = 'S02X003001';
me.tpl = [
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb">
<img src="${createLink(mapping:'
img ', params:[])}/{id}/100/100/" title="{id}">
</div>',
'<span class="x-editable">{name}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'];
me.callParent(arguments);
}
});
Does this code suits your needs (doc here)?
listeners: {
itemdblclick: function (view, record, item, index, e) {
if (Ext.get(e.getTarget()).is('img')) {
alert('you double clicked an image');
}
}
}
In my sencha application i need to call jsonp request instead of ajax request but i dont know how to write it.So please provide me demo for jsonp request.
thank You
Sample JSON Request from the Sencha Documentation :)
Here's the link to more details : http://docs.sencha.com/touch/2-0/#!/api/Ext.data.JsonP
Ext.data.JsonP.request({
url: 'http://free.worldweatheronline.com/feed/weather.ashx',
callbackKey: 'callback',
params: {
key: '23f6a0ab24185952101705',
q: '94301', // Palo Alto
format: 'json',
num_of_days: 5
},
success: function(result) {
//Your success function here...
}
});
check the below code working fine for me :)
Ext.define('APP.view.List', {
extend: 'Ext.Container',
requires: [
'Ext.data.JsonP'
],
config: {
scrollable: true,
items: [{
xtype: 'panel',
id: 'JSONP'
}, {
docked: 'top',
xtype: 'toolbar',
items: [{
text: 'Load using JSON-P',
handler: function() {
var panel = Ext.getCmp('JSONP'),
tpl = new Ext.XTemplate([
'<div class="demo-weather">',
'<tpl for=".">',
'<div class="day">',
'<div class="date">{date}</div>',
'<tpl for="weatherIconUrl">',
'<img src="{value}">',
'</tpl>',
'<span class="temp">{tempMaxF}°<span class="temp_low">{tempMinF}°</span></span>',
'</div>',
'</tpl>',
'</div>'
]);
panel.getParent().setMasked({
xtype: 'loadmask',
message: 'Loading...'
});
Ext.data.JsonP.request({
url: 'http://free.worldweatheronline.com/feed/weather.ashx',
callbackKey: 'callback',
params: {
key: '23f6a0ab24185952101705',
q: '94301', // Palo Alto
format: 'json',
num_of_days: 5
},
callback: function(success, result) {
var weather = result.data.weather;
if (weather) {
panel.updateHtml(tpl.applyTemplate(weather));
}
else {
alert('There was an error retrieving the weather.');
}
panel.getParent().unmask();
}
});
}
}]
}]
}
});