Hi can We call one JS file from one file to another file...Means multiple JS files. I have one panel in JS like this and if I called another JS file ,that should read this PANEL control values.
You can use one js file content in to another js file. Use use like this
//file1.js
var tabs = Ext.createWidget('tabpanel', {
cls: "auto-width-tab-strip",
activeTab: 0,
plain: true,
autoHeight: true,
defaults: {
autoHeight: true,
style: 'min-height:620px; padding:10px;'
},
items: [{
title: 'tab1',
loader: {
url: 'tab1.jsp',
scripts: true,
loadMask: true
}
}]
});
function myFirstFun(){
something
......
......
}
//End of file1.js
You can reuse the above code Some where like this
//file2.js
var panel = Ext.create('Ext.panel.Panel', {
title: 'Forum Search',
height: 300,
width: 600,
renderTo: 'search-panel',
id: 'search-results',
layout: 'fit',
items: tabs
});
Ext.get('someid').on('click', function(){
myFirstFun();
});
//End of file2.js
Like this you can call the file1.js function in to file2.js, But you have include both js files in your html page.
I think this may help you.
Related
I am trying to get the children of apostrophe pages to appear in my navigation object - however the _children array is always empty. My page does have child pages set up via the front end Pages UI.
My index.js for the lib/modules/apostrophe-pages module contains the following:
construct: function(self,options) {
// store the superclass method and call at the end
var superPageBeforeSend = self.pageBeforeSend;
self.pageBeforeSend = function(req, callback) {
// Query all pages with top_menu setting = true and add to menu collection
self.apos.pages.find(req, { top_menu: true }, {slug: 1, type: 1, _id: 1, title: 1})
.children(true)
.toArray(
function (err, docs) {
if (err) {
return callback(err);
}
req.data.navpages = docs;
return superPageBeforeSend(req, callback);
});
};
},
...
My top_menu attribute is set via apostrophe-custom-pages:
module.exports = {
beforeConstruct: function(self, options) {
options.addFields = [
{
name: 'subtitle',
label: 'Subtitle',
type: 'string'
},
{
name: 'css_class',
label: 'CSS Class',
type: 'string'
},
{
name: 'top_menu',
label: 'Include In Top Menu',
type: 'boolean'
}
].concat(options.addFields || []);
}
};
This gives me the pages I need with the top_menu setting.. but I want to get child pages too..
When debugging the code I can see that the docs._children array is present but is always empty, even though a page has child pages...
I have tried adding the following both to my app.js and to my index.js but it doesn't change the result:
filters: {
// Grab our ancestor pages, with two levels of subpages
ancestors: {
children: {
depth: 2
}
},
// We usually want children of the current page, too
children: true
}
How can I get my find() query to actually include the child pages?
Solved it..
I needed to add 'rank: 1, path: 1, level: 1' to the projection as per this page in the documentation: https://apostrophecms.org/docs/tutorials/howtos/children-and-joins.html#projections-and-children
Below is the code i'm using to populate data for magicSuggest box. For the first time it is getting correct values in dropdown but on change of dependent dropdown its not changing its data.
$(document).on("change",".specilitydrop", function() {
var select = $(this);
var newVal = select.val();
//alert(newVal);
$.ajax({
type: 'Post',
url : "<?php echo LIVE_SITE; ?>/users/findSubSplProfile/"+newVal,
success: function (data)
{ $('#subSpecialityData').magicSuggest({
width: 495,
sortOrder: 'value',
selectionPosition: 'bottom',
selectionStacked: true,
displayField: 'value',
data: $.parseJSON(data)
});
}
});
});
Thanks in advance
Calling $('#subSpecialityData').magicSuggest multiple times won't create multiple components. Rather it will keep the same component. If you want to set new data every time, you should delete the component and its associated DOM prior to recreating it.
You should pass data by using magicSuggest's option, instead of ajax callback
$('#subSpecialityData').magicSuggest({
width: 495,
sortOrder: 'value',
selectionPosition: 'bottom',
selectionStacked: true,
displayField: 'value',
method: "post",
data: "users/findSubSplProfile/"+newVal
});
There's too little information in the docpad API page on creating a file.
This is what I've tried:
docpad.action("render", {
text: content,
filename: "random.html.md",
path: "./src/documents/posts",
attributes: {
id: "some-random-id,
title: "some-random-title",
layout: "default"
}
}, function(error, outContent, doc) {
res.json({
id: doc.get("id")
});
});
It gives me the document instance, but there's no physical file being created.
This is the approach I use to create virtual documents and write them to a file
outDirPath = docpad.config.outPath
docAttr = {
fullPath: null
body: 'some content html to be rendered'
outPath: outDirPath + '/index.html' # this where it will write the file
extension: 'md'
extensions: ['html', 'md']
relativePath: 'index.html'
filename: 'index.html'
write: true
render: true
layout: 'somelayout'
}
# create the document
virtualDocument = docpad.createDocument(docAttr)
docpad.renderDocument virtualDocument, { templateData: this, someCustomData: extraData}, (err, content, file) ->
# renderDocument complete callback
file.write ()->
# file.write complete callback
return
return
Hey guys I am currently following a tutorial and learning backbone, but for some reason I cannot get anything besides the Backbone model to work. Everything underneath it such as the collection or view does not seem to respond when entering things in the console. This is currently my code, I cannot find anything wrong with it and it validates in JSLint. One thing I noticed though is that the video is from before the 1.0 update of backbone. I am using jade for the layout and will include the code below as well.
UPDATED: I am working with this now.
(function(){
//app can be the name of the project/app
window.App = {
Models: {},
Collections: {},
Views: {},
Templates: {},
Routes: {}
};
window.template = function (id) {
return _.template($('#' + id).html());
};
//Can get rid of the Collection and views out of the names of each
//User Model
App.Models.User = Backbone.Model.extend({
defaults: {
firstName: 'J.R.',
lastName: 'Smith',
email: 'jsmith#knicks.com',
phone: '212-424-6234',
birthday: '03/05/1982',
city: 'New York'
},
location: function(){
return this.get('firstName') + ' ' + this.get('lastName') + 'is currently in ' + this.get('city') + '.';
}
});
// list of users
App.Collections.UsersCollection = Backbone.Collection.extend({
model: App.Models.User
});
//User View
App.Views.UserView = Backbone.View.extend({
tagName: 'li',
events: {
'click .edit':
},
template: template('userTemplate'),
initialize: function() {
this.render();
},
render: function() {
var template = this.template(this.model.toJSON());
this.$el.html(template);
return this;
//always return this on render methods
}
});
// view for users
App.Views.UsersView = Backbone.View.extend({
tagName: 'ul',
initialize: function() {
},
render: function() {
this.collection.each(function(user) {
//user is the model associated to the new created user
var userView = new App.Views.UserView({model: user});
this.$el.append(userView.el);
}, this);
}
});
var userView = new App.Views.UserView({model: User});
$(document.body).append(userView.render().el);
})();
Jade layout page
doctype 5
html
head
title=title
link(rel='stylesheet', href='/css/style.css', type='text/css')
link(rel='stylesheet', href='/css/bootstrap-responsive.css')
link(href='/css/bootstrap.css', rel='stylesheet', type='text/css')
link(href='/css/font-awesome.min.css', rel='stylesheet', type='text/css')
script(src='/js/jquery.min.js', type='text/javascript')
script(src='/js/jquery.validate.min.js', type='text/javascript')
script(src='/js/script.js', type='text/javascript')
script(src='/js/underscore.min.js', type='text/javascript')
script(src='/js/backbone.min.js', type='text/javascript')
body
div#container
div#header
block content
include footer
Jade index page
extends layout
block content
h1= title
p Welcome to #{title}
script(src='/js/main.js', type='text/javascript')
script(id='userTemplate', type='text/template')
<%=firstName%>
button.edit Edit
<%=lastName%>
button.edit Edit
<%=email%>
button.edit Edit
<%=phone%>
button.edit Edit
<%=birthday%>
button.edit Edit
<%=city%>
button.edit Edit
A view's render method simply fills in the view's el, someone else has to add that el to the page that people will see. You're using tagName in your view:
tagName: 'li'
That just means that Backbone will create an <li> as your view's el, it doesn't mean that that <li> will be added to anything. The usual pattern is for render to return this:
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
and then whoever is calling render can add the el to the page with something like this:
var userView = new UserView({model: user});
$(whatever).append(userView.render().el);
I do my Backbone work client-side so I'm not sure how that would fit into your set up.
I think the problem lies here:
var userView = new App.Views.UserView({model: User});
$(document.body).append(userView.render().el);
Looking at your code I would expect an instance of App.Views.UsersView to be appended, and for it to be populated - in the code above you're pushing in { model: User } to an instance of a UserView instance rather than an instance of UsersCollection to an instance of UsersView.
Firstly your UsersView.render method should return this; in order to allow use of the .render().el pattern, UsersView handles creating and attaching instances of UserView for each model in the collection so you don't need to worry about this again.
render: function() {
this.collection.each(function(user) {
//user is the model associated to the new created user
var userView = new App.Views.UserView({model: user});
this.$el.append(userView.el);
}, this);
return this;
}
Then, the following looks right to me:
var users_data=[{
firstName: 'A',
lastName: 'Person',
email: 'a#knicks.com',
phone: '212-424-6234',
birthday: '03/05/1982',
city: 'New York'
},
firstName: 'Another',
lastName: 'Person',
email: 'another#knicks.com',
phone: '212-424-6234',
birthday: '03/05/1982',
city: 'New York'
},
firstName: 'A',
lastName: 'Person',
email: 'a#knicks.com',
phone: '212-424-6234',
birthday: '03/05/1982',
city: 'New York'
}];
var users = new App.Collections.UsersCollection( users_data );
var usersView = new App.Views.UsersView( users );
$( document.body ).append( usersView.render().el );
I am using ALLOY DIALOG in Liferay 6.0.5 as follows:
function countPopup(){
AUI().use('aui-dialog', 'liferay-portlet-url', function(A) {
var dialog = new A.Dialog({
title: 'Upload Details',
centered: true,
modal: true,
width: 500,
height: 400,
bodyContent:"testing",
}).render();
});
}
I am getting in popup " testing ". But Instead of "bodycontent" I want to forward to one jsp file where i have written some logic. How to do that?
You must "plug" another module to feed a.Dialog with article desired.
Try some like this:
AUI().use('aui-dialog', 'aui-io', function(A) {
var dialog = new A.Dialog({
title: 'Upload Details',
centered: true,
modal: true,
width: 500,
height: 400,
}).plug(A.Plugin.IO, {uri: 'your_url.html'}).render();
});
I know this is too much late to give answer to this question but here is the solution.
<%
User selUser = (User)request.getAttribute("user.selUser");
PortletURL popupURL = renderResponse.createRenderURL();
popupURL.setWindowState(LiferayWindowState.POP_UP);
popupURL.setParameter("jspPage","Your jsp page path here");
String popup = "javascript:xyzPopUp('"+ popupURL.toString() + "');";%>
<aui:script>
Liferay.provide(
window,
'xyzPopUp',
function(url) {
var A = AUI();
var portletURL="<%=themeDisplay.getURLManageSiteMemberships().toString()%>";
var dialog = new A.Dialog(
{
modal: true,
centered: true,
destroyOnClose: true,
draggable: true,
height: 150,
resizable: false,
title: 'your title here',
width: 200
}
).plug(
A.Plugin.IO,
{
uri:url
}
).render();
},
['aui-dialog']
);
</aui:script>
This will open the given jsp page in to popup.