I have the issue that the pressItem event is triggered twice at smarttable ( sapui5).
The smarttable has type ResponsiveTable.
onAfterRendering : function(){
var tTable = this.byId("LineItemsSmartTable");
var oTable = this.byId("LineItemsSmartTable").getTable();
oTable.setMode(sap.m.ListMode.SingleSelectMaster);
oTable.onAfterRendering = function(){
this.attachItemPress(function(oEvent){ alert( "Pressed" ); });
};
// var fnItemPress = function(){ alert("press2") };
tTable.attachDataReceived(function(){
var aItems = oTable.getItems();
if(aItems.length === 0 ) return;
$.each(aItems, function(oIndex, oItem) {
//oItem.detachPress(fnItemPress);
oItem.setType("Active");
// oItem.attachPress(fnItemPress);
});
});
}
If onAfterRendering is not being called already onInit then reconsider renaming the function oTable.onAfterRendering.
onAfterRendering is already called in the controller lifecycle, you could try creating a new function and then calling that in onAfterRendering.
See this answer
onAfterRendering: function() {
this.tableItems();
},
tableItems: function() {
var tTable = this.byId("LineItemsSmartTable");
var oTable = this.byId("LineItemsSmartTable").getTable();
oTable.setMode(sap.m.ListMode.SingleSelectMaster);
oTable.attachItemPress(function(oEvent) {
alert("Pressed");
});
tTable.attachDataReceived(function() {
var aItems = oTable.getItems();
if (aItems.length === 0) return;
$.each(aItems, function(oIndex, oItem) {
oItem.setType("Active");
});
});
}
Related
I have dynamically attached live search event for my Multi Input control (please refer the below code). Even after attaching the .bindAggregation function for suggestionItems, the suggestion popup doesn't appear.
onAfterRendering: function(oEvent){
var that = this;
var oFacetFilters = sap.ui.getCore().byId
("xyzID").getContent()[0].getContent();
var oCapTreeFilter = oFacetFilters[6].getContent()[1];
oCapTreeFilter.attachLiveChange(function(oEvt){
//build filter array
var aFilter = [];
var sQuery = oEvt.getParameter("value");
if (sQuery) {
aFilter.push(new sap.ui.model.Filter("RootID",
sap.ui.model.FilterOperator.Contains, sQuery));
}
that.oModel.read("/RootName", {
async : false,
filters : aFilter,
success : function(oData, response){
var oJSONModel = new sap.ui.model.json.JSONModel();
oJSONModel.setData(oData);
oCapTreeFilter.setModel(oJSONModel);
oCapTreeFilter.bindAggregation("suggestionItems",{
path: "/results",
template: new sap.ui.core.Item({text: "{RootID}"})
});
},
error : function(response){
sap.m.MessageBox.show("Error occurred");
}
});
});
//This is my AngularPage.cs page object file
var AngularPage= function()
{
var nameInput= element(by.model('yourName'));
var greeting = element(by.binding('yourName'));
this.get=function()
{
browser.get('http://www.angularjs.org');
};
this.setName= function(name)
{
nameInput.sendKeys(name);
};
this.getGreeting= function()
{
return greeting.getText();`
};
};
module.exports = new AngularPage();
//This is my AngularHome_spec.js file
var angularPage = require('./AngularPage.js');
describe('angularjs homepage',function()
{
var angular_page;
beforeEach(function()
{
angular_page= new AngularPage();
});
it('greetings for new user', function()
{
// var angular_page= new AngularPage();
angular_page.get();
angular_page.setName('Rahul');
expect(angular_page.getGreeting()).toEqual('Hello Rahul!');
}
);
}
);
//I am unable to use page objects in my spec file as it is throwing an error
:AngularPage is not defined
In your code, object has been created twice. First time on page "AngularPage.js" and second time on spec "AngularHome_spec.js" level.
Do following on page "AngularHome_spec.js"
module.exports = AngularPage;
Change the
var AngularPage = require('./AngularPage.js');//Capital the 'A'
I built jQuery Masonry layout with infinite scroll and filtering.
My problem is that when a filter clicked before scrolling, the content loaded with infinite scroll is not filtered.
Is there any way to fix it?
Here is the link to check: http://www.jcvergara.com/working/
Here is the full masonry code:
$(document).ready(function(){
var $container = $('.container');
// initialize
$container.masonry({
columnWidth: 250,
itemSelector: '.item',
isFitWidth: true
});
$container.masonry( 'on', 'layoutComplete', function() {
$('.right-line').css('height', $('.container').height());
});
$('.right-line').css('height', $('.container').height());
// infinite scroll
var $container = $('#content');
$container.infinitescroll({
navSelector : "nav.posts-navigation",
nextSelector : "div.nav-previous a:first",
itemSelector : "#content div.item",
},
// trigger Masonry as a callback
function( newElements ) {
var $newElems = $( newElements );
$container.masonry( 'appended', $newElems );
// open posts in ajax
$('.post-link').click(function(){
$('.openarticle').css('display', 'block');
var post_link = $(this).attr('href');
$('#openthis').html('<div class="title"><h2>Loading..</h2><div class="text"></div>');
$('#openthis').load(post_link);
$('<a></a>', {
text: 'Close',
class: 'close',
id: 'close',
href: '#'
})
.prependTo($('.openarticle .main'))
.click(function() {
$('.openarticle').css('display', 'none');
$('#close').remove();
});
return false;
});
}
);
// filtering
$(".cat-item a").click(function(e) {
e.preventDefault();
var cut_url = "http://www.jcvergara.com/category/";
var group = $(this).attr('href');
group = group.replace(cut_url, '').slice(0,-1);
var group_class = "." + group;
$(".cat-item a.active").removeClass('active');
$(this).addClass('active');
if(group != "all") {
$(".item").hide();
$(group_class).show();
$container.masonry();
} else {
$(".item").show();
$container.masonry();
}
});
});
Try using "on" for your click function:
// filtering
$(".cat-item a").on( "click",function (e) {
e.preventDefault();
var cut_url = "http://www.jcvergara.com/category/";
var group = $(this).attr('href');
group = group.replace(cut_url, '').slice(0,-1);
var group_class = "." + group;
$(".cat-item a.active").removeClass('active');
$(this).addClass('active');
if(group != "all") {
$(".item").hide();
$(group_class).show();
$container.masonry();
} else {
$(".item").show();
$container.masonry();
}
});
I've this javascript viewmodel defined:
function PersonViewModel() {
// Data members
this.Name = ko.observable();
this.Function_Id = ko.observable();
this.SubFunction_Id = ko.observable();
this.Functions = ko.observableArray();
this.SubFunctions = ko.observableArray();
// Whenever the Function changes, update the SubFunctions selection
this.Function_Id.subscribe(function (id) {
this.GetSubFunctions(id);
}, this);
// Functions to get data from server
this.Init = function () {
this.GetFunctions();
this.Function_Id('#(Model.Function_Id)');
};
this.GetFunctions = function () {
var vm = this;
$.getJSON(
'#Url.Action("GetFunctions", "Function")',
function (data) {
vm.Functions(data);
}
);
};
this.GetSubFunctions = function (Function_Id) {
var vm = this;
if (Function_Id != null) {
$.getJSON(
'#Url.Action("GetSubFunctions", "Function")',
{ Function_Id: Function_Id },
function (data) {
vm.SubFunctions(data);
}
);
}
else {
vm.SubFunction_Id(0);
vm.SubFunctions([]);
}
};
this.Save = function () {
var PostData = ko.toJSON(this);
var d = $.dump(PostData);
alert(d);
$.ajax({
type: 'POST',
url: '/Person/Save',
data: PostData,
contentType: 'application/json',
success: function (data) {
alert(data);
}
});
};
}
$(document).ready(function () {
var personViewModel = new PersonViewModel();
personViewModel.Init();
ko.applyBindings(personViewModel);
});
When the Submit button is clicked, the data from the select lists is posted, but NOT the 'Function_Id'.
When I choose a different value in the Function dropdown list, and the click the Submit button, the value for 'Function_Id' is correctly posted.
How to fix this ?
It's because the scope of the this keyword in javascript
this.Init = function () {
this.GetFunctions(); // this === PersonViewModel.Init
this.Function_Id('#(Model.Function_Id)'); // calls PersonViewModel.Init.Function_Id(...)
};
You should store the refrence to the PersonViewModel instance.
var self = this;
self.Init = function () {
self.GetFunctions();
self.Function_Id('#(Model.Function_Id)'); // calls PersonViewModel.Function_Id(...)
};
Firebug is giving me no error messages, but it's not working. The idea is regardless of whether the user picks an option from dropdown or if they type in something in search box, I want the alert() message defined below to alert what the value of the variable result is (e.g. {filter: Germany}). And it doesn't. I think the javascript breaks down right when a new Form instance is instantiated because I tried putting an alert in the Form variable and it was never triggered. Note that everything that pertains to this issue occurs when form.calculation() is called.
markup:
<fieldset>
<select name="filter" alter-data="dropFilter">
<option>Germany</option>
<option>Ukraine</option>
<option>Estonia</option>
</select>
<input type="text" alter-data="searchFilter" />
</fieldset>
javascript (below the body tag)
<script>
(function($){
var listview = $('#listview');
var lists = (function(){
var criteria = {
dropFilter: {
insert: function(value){
if(value)
return handleFilter("filter", value);
},
msg: "Filtering..."
},
searchFilter: {
insert: function(value){
if(value)
return handleFilter("search", value);
},
msg: "Searching..."
}
}
var handleFilter = function(key,value){
return {key: value};
}
return {
create: function(component){
var component = component.href.substring(component.href.lastIndexOf('#') + 1);
return component;
},
setDefaults: function(component){
var parameter = {};
switch(component){
case "sites":
parameter = {
'order': 'site_num',
'per_page': '20',
'url': 'sites'
}
}
return parameter;
},
getCriteria: function(criterion){
return criteria[criterion];
},
addCriteria: function(criterion, method){
criteria[criterion] = method;
}
}
})();
var Form = function(form){
var fields = [];
$(form[0].elements).each(function(){
var field = $(this);
if(typeof field.attr('alter-data') !== 'undefined') fields.push(new Field(field));
})
}
Form.prototype = {
initiate: function(){
for(field in this.fields){
this.fields[field].calculate();
}
},
isCalculable: function(){
for(field in this.fields){
if(!this.fields[field].alterData){
return false;
}
}
return true;
}
}
var Field = function(field){
this.field = field;
this.alterData = false;
this.attach("change");
this.attach("keyup");
}
Field.prototype = {
attach: function(event){
var obj = this;
if(event == "change"){
obj.field.bind("change", function(){
return obj.calculate();
})
}
if(event == "keyup"){
obj.field.bind("keyup", function(e){
return obj.calculate();
})
}
},
calculate: function(){
var obj = this,
field = obj.field,
msgClass = "msgClass",
msgList = $(document.createElement("ul")).addClass("msgClass"),
types = field.attr("alter-data").split(" "),
container = field.parent(),
messages = [];
field.next(".msgClass").remove();
for(var type in types){
var criterion = lists.getCriteria(types[type]);
if(field.val()){
var result = criterion.insert(field.val());
container.addClass("waitingMsg");
messages.push(criterion.msg);
obj.alterData = true;
alert(result);
initializeTable(result);
}
else {
return false;
obj.alterData = false;
}
}
if(messages.length){
for(msg in messages){
msgList.append("<li>" + messages[msg] + "</li");
}
}
else{
msgList.remove();
}
}
}
$('#dashboard a').click(function(){
var currentComponent = lists.create(this);
var custom = lists.setDefaults(currentComponent);
initializeTable(custom);
});
var initializeTable = function(custom){
var defaults = {};
var custom = custom || {};
var query_string = $.extend(defaults, custom);
var params = [];
$.each(query_string, function(key,value){
params += key + ': ' + value;
})
var url = custom['url'];
$.ajax({
type: 'GET',
url: '/' + url,
data: params,
dataType: 'html',
error: function(){},
beforeSend: function(){},
complete: function() {},
success: function(response) {
listview.html(response);
}
})
}
$.extend($.fn, {
calculation: function(){
var formReady = new Form($(this));
if(formReady.isCalculable) {
formReady.initiate();
}
}
})
var form = $('fieldset');
form.calculation();
})(jQuery)
Thank you for anyone who responds. I spent a lot of time trying to make this work.
The initial problem as to why the alert() was not being triggered when Form is instantiated is because, as you can see, the elements property belongs to the Form object, not fieldset object. And as you can see in the html, I place the fields as descendents of the fieldset object, not form.