I've the following code to initiate Magnific-Popup on my elements and everything works fine:
$( '.client-logo-overlay' ).magnificPopup({
//modal: true,
//closeBtnInside:true,
//closeOnBgClick: true,
//showCloseBtn: true,
delegate: 'a',
type: 'ajax',
ajax: {
settings: {
url: $( this ).attr( 'href' ),
type: 'POST'
}
},
callbacks: {
parseAjax: function( mfpResponse ) {
var html = $( mfpResponse.data ).find( 'article' );
mfpResponse.data = $( '<div>', { class: 'white-popup small' } ).append( html );
}
}
});
However, when loading some content using AJAX, MagnificPopup doesn't work anymore on those newly inserted elements - what am I missing.
Any help is very much appreciated.
Thanks
Related
I am trying to build a dynamic tree. I am getting my data from a C# WCF Service. It is returning me JSON data , but data is not reflecting in tree.
I am using EXTJS 4.
.Js Code -
Ext.require([
'Ext.tree.*',
'Ext.data.*',
'Ext.tip.*'
]);
Ext.onReady(function () {
Ext.QuickTips.init();
var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'Services/InfographicsDataService.svc/GetTree'
},
root: {
text: 'Ext JS',
id: 'src',
expanded: true
},
reader: {
type: 'json',
root: 'd'
}
}); // End of store code
var tree = Ext.create('Ext.tree.Panel', {
store: store,
viewConfig:
{
plugins:{ ptype: 'treeviewdragdrop' }
},
renderTo: 'tree-div',
height: 300,
width: 250,
title: 'Files',
useArrows: true
}); // End of tree
}); // End of ready function
This is the code at my service end-::
[OperationContract]
[WebGet]
public List<TreeNode> GetTree()
{
List<TreeNode> nodes = new List<TreeNode>();
nodes.Add(new TreeNode() { id="src/ModelManager.js", text =
"ModelManager.js" });
nodes.Add(new TreeNode() { id="src/data", text = "data" });
nodes.Add(new TreeNode() { id="src/draw", text = "draw" });
return nodes;
}
Json returned by wcf service--
{"d":[
{
"__type":"TreeNode:#Infographics.Services.Model",
"id":"src\/ModelManager.js",
"leaf":false,
"text":"ModelManager.js"
},
{
"__type":"TreeNode:#Infographics.Services.Model",
"id":"src\/data",
"leaf":false,
"text":"data"
},
{
"__type":"TreeNode:#Infographics.Services.Model",
"id":"src \/draw",
"leaf":false,
"text":"draw"
}]
}
Call is going to server and returning the data but not adding nodes in tree
Page is showing just the root Extjs node.
Initially I thought , it is just root property of reader which I need to set to "d" , but there is something more I am missing.
Can somebody help me in finding what is that small mistake I am making ?
Can you change the store like this and try,
var store = Ext.create('Ext.data.TreeStore',
{
proxy:
{
type: 'ajax',
url: 'Services/InfographicsDataService.svc/GetTree',
reader:
{
type: 'json',
root: 'd'
}
},
root:
{
text: 'Ext JS',
id: 'src',
expanded: true
}
});
I need a real <img> HTML tag in my view Sencha.
I've retrieved this code from the official doc :
Ext.define('Ext.ux.Image', {
extend: 'Ext.Component', // subclass Ext.Component
alias: 'widget.managedimage', // this component will have an xtype of 'managedimage'
autoEl: {
tag: 'img',
src: Ext.BLANK_IMAGE_URL,
cls: 'my-managed-image'
},
// Add custom processing to the onRender phase.
// Add a ‘load’ listener to the element.
onRender: function() {
this.autoEl = Ext.apply({}, this.initialConfig, this.autoEl);
this.callParent(arguments);
this.el.on('load', this.onLoad, this);
},
onLoad: function() {
this.fireEvent('load', this);
},
setSrc: function(src) {
if (this.rendered) {
this.el.dom.src = src;
} else {
this.src = src;
}
},
getSrc: function(src) {
return this.el.dom.src || this.src;
}
});
When i try to do setSrc, I get this error : Cannot read property 'dom' of undefined
Your code is from Ext.Js 4.x docs. You should use sencha touch 2 docs.
Please compare:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Component
and
http://docs.sencha.com/touch/2-0/#!/api/Ext.Component
They are different.
As i understand you need real < img > tag in your view. If you use Ext.Img it will create a div container with background-image.
I know two ways:
set up tpl and data property.
Ext.create('Ext.Component', {
config: {
tpl: '',
data: {
url: 'http://example.com/pics/1.png',
imgClass: 'my-class'
}
}
});
set html config.
Ext.create('Ext.Component', {
config: {
html: ' <img class="my-class" src="http://example.com/pics/1.png">'
}
});
I have the following sample MVC application trying to dynamically creating carousel with image source being obtained from some remote url,when i execute the application i don't see any images being appended to my carouselview,please can any one highlight where i am going wrong?
Model Code:
Ext.define('Sencha.model.ImageModel', {
extend: 'Ext.data.Model',
config: {
fields: [
'id', 'title', 'link', 'author', 'content',
{
name: 'image',
type: 'string',
convert: function (value, record) {
var content = record.get('content'),
regex = /img src=\"([a-zA-Z0-9\_\.\/\:]*)\"/,
match = content.match(regex),
src = match ? match[1] : '';
if (src != "" && !src.match(/\.gif$/)) {
src = "http://src.sencha.io/screen.width/" + src;
}
return src;
}
}
]
}
});
Store Code:
Ext.define('Sencha.store.ImageStore', {
extend: 'Ext.data.Store',
config: {
model: 'Sencha.model.ImageModel',
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://www.acme.com/jef/apod/rss.xml&num=20',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
}
});
Controller Code:
Ext.define('Sencha.controller.CarouselController', {
extend: 'Ext.app.Controller',
config:
{
init: function () {
var carousel = Ext.getCmp('imagecarousel');
Ext.getStore('ImageStore').load(function (pictures) {
var items = [];
Ext.each(pictures, function (picture) {
if (!picture.get('image')) {
return;
}
items.push({
xtype: 'apodimage',
picture: picture
});
});
carousel.setItems(items);
carousel.setActiveItem(0);
});
}
}
});
View code:
Ext.define('Sencha.view.CarouselView', {
extend: 'Ext.Img',
id:'imagecarousel',
xtype: 'apodimage',
config: {
/**
* #cfg {apod.model.Picture} picture The Picture to show
*/
picture: null
},
updatePicture: function (picture) {
this.setSrc(picture.get('image'));
}
});
App.js Code:
Ext.Loader.setConfig({
enabled: true
});
Ext.require([
'Ext.carousel.Carousel',
'Ext.data.proxy.JsonP'
]);
Ext.application({
name: 'Sencha',
controllers: ['CarouselController'],
stores: ['ImageStore'],
models: ['ImageModel'],
//views:['CarouselView'],
launch: function () {
Ext.create('Sencha.view.CarouselView');
}
});
Could be more specific about what doesn't work. Try to add console.logs in your code and give us the results, like the size the items at the end end of Ext.each of stuff like that.
My first idea would be to use the callback function of store.load :
Ext.getStore('ImageStore').load(
callback: function (pictures) {
var items = [];
Ext.each(pictures, function (picture) {
if (!picture.get('image')) {
return;
}
items.push({
xtype: 'apodimage',
picture: picture
});
});
carousel.setItems(items);
carousel.setActiveItem(0);
});
Hope this helps
Model:
app.models.Category = Ext.regModel("Category", {
fields: [
{ name: 'CategoryId', type: 'int' },
{ name: 'ImageUrl', type: 'string' },
{ name: 'ImageUrlFile', type: 'string' },
{ name: 'CategoyName', type: 'string' }
]
});
Storage:
app.stores.CategoryStore = new Ext.data.Store({
id: 'CategoryStore',
model: 'Category',
autoLoad: true,
proxy: {
type: 'scripttag',
url: 'http://localhost:1303/admin/categoriesservice/getcategories',
mehod: 'GET', //not needed
callbackKey: 'callback', //not needed
reader: {
type: 'json',
root: 'categories'//not needed with my JSONP
},
afterRequest: function (request, success) {
console.log("afterRequest");
if (success) {
console.log("success");
} else {
console.log("failed");
}
console.log(request);
}
}
});
Controller:
Ext.regController('Home', {
index: function () {
if (!this.indexView) {
this.indexView = this.render({
xtype: 'HomeIndex'
});
this.items = [app.views.HomeIndex];
}
app.viewport.setActiveItem(this.indexView);//this what i've missed
}
});
View
app.views.HomeIndex = Ext.extend(Ext.DataView, {
html: '<div class="gallery-view" style="display: block;width: 300px;border: 1px solid #fff;height: 300px;"></div>',
store: app.stores.CategoryStore, //full namespace needed
itemSelector: 'div.node',
initComponent: function () {
this.tpl = new Ext.XTemplate(
'<div style="padding:10px 5px 5px 5px;">',
'<tpl for=".">',
'<div class="node" style="background:url({ImageUrl});">',
'</div>',
'</tpl>',
'</div>'
);
//appened to successful solution
this.dataView = new Ext.DataView({
store: this.store,
tpl: this.xtpl,
itemSelector: 'div.node'
});
this.items = [this.dataView];
app.views.HomeIndex.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('HomeIndex', app.views.HomeIndex);
JSONP Result:
GetCategories([{"CategoryId":101,"CategoyName":"אוכל","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/rest.png","ImageUrlFile":null,"InsertDate":"\/Date(1314507534000)\/","IsActive":true,"ApplicationId":0,"Applications":null},{"CategoryId":99,"CategoyName":"הצגות ומופעים","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/shows.png","ImageUrlFile":null,"InsertDate":"\/Date(1314442037000)\/","IsActive":true,"ApplicationId":100,"Applications":null},{"CategoryId":111,"CategoyName":"בריאות","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/spa.png","ImageUrlFile":null,"InsertDate":"\/Date(1314856845000)\/","IsActive":true,"ApplicationId":0,"Applications":null},{"CategoryId":142,"CategoyName":"נופש ותיירות","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/vacation.png","ImageUrlFile":null,"InsertDate":"\/Date(1314713031000)\/","IsActive":true,"ApplicationId":0,"Applications":null},{"CategoryId":143,"CategoyName":"ביגוד","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/clothes.png","ImageUrlFile":null,"InsertDate":"\/Date(1314713031000)\/","IsActive":true,"ApplicationId":0,"Applications":null},{"CategoryId":144,"CategoyName":"אתרים ואטרקציות","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/attraction.png","ImageUrlFile":null,"InsertDate":"\/Date(1314713031000)\/","IsActive":true,"ApplicationId":0,"Applications":null},{"CategoryId":105,"CategoyName":"חשמל","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/elctronic.png","ImageUrlFile":null,"InsertDate":"\/Date(1314713031000)\/","IsActive":true,"ApplicationId":0,"Applications":null}]);
The exception:
Uncaught TypeError: Cannot read property 'length' of undefined
Question:
Help how can i parse via storage or any other way the JSONP issue???
You have set this in your reader
reader: {
type: 'json',
root: 'categories'
}
And I can't see categories element in your json data. Check if this is correct or add this to your json in order to be working probably
{"categories":[ ...//old json //..]}
when I tried to define
function GetCategories(data){console.log(data);}
and then invoking the jsonp response (by ctrl+c/ctrl+v into the console), I was successful, meaning the the data is a valid json string.
but when I inspected your code, I haven't seen a mechanisem that defines that function (GetCategories).
I must say that i'm unfamilier with sencha. but I aswsome that problem is that no callback function was ever created.
I see that you define a 'callbackKey: 'callback''
is there somewhere in sencha documentation that allows you to define a 'callbackValue: 'GetCategories'' or such? try and check into that direction.
Try removing "autoLoad: true" from your code. It resolved my issues on the same matter as yours.
I have a store as follows.
var eventsStore = new Ext.data.Store({
model: 'Event',
sorters: [{
property: 'OccurringOn',
direction: 'DESC'
}],
proxy: {
type: 'ajax',
url: BaseURL + 'Events.php',
api: {
read: BaseURL + 'Events.php',
create: BaseURL + 'Events.php'
},
reader: {
type: 'xml',
root: 'Events',
record: 'Event'
},
writer: {
type: 'xml',
writeAllFields: false,
root: 'Events',
record: 'Event'
}
},
getGroupString: function(record) {
if (record && record.data.OccurringOn) {
console.log(record.get('OccurringOn'));
return record.get('OccurringOn').toDateString();
}
else {
return '';
}
}
});
I also have a List view which gets all Events fine. I have a form which allows user to add new event and I have FormPanel for it. The FormPanel has Toolbar which has Save button which when clicked will do following.
var eventCard = It's a card
var newEventCard = eventCard.items.items[1];
var currentEvent = newEventCard.getRecord();
newEventCard.updateRecord(currentEvent);
var errors = currentEvent.validate();
// here I check errors and prompt user about them
var eventList = eventCard.items.items[0].items.items[0];
var eventStore = eventList.getStore();
eventStore.add(currentEvent);
eventStore.sync();
eventStore.sort( [ { property: 'OccurringOn', direction: 'DESC' } ] );
eventList.refresh();
The above code adds two empty rows to the MySQL database and copies the event list view items with 3 empty new items. Why this is the behavior and what I am missing?
If you can tell me what parameters are sent as POST to the Events.php when I sync that would much appreciated.
It was my fault I figured out. I was echo'ing when there was POST request to the service.