When adding a element to the dom dynamically like this:
row = """
<div class="ipad-row">
<h3>Sample Row</h3>
<div id="wrapper-placeholder">
<div class="scrollView" style="">
<a class="btn btn-primary add-row-item">Add an item</a>
</div>
</div>
</div>
"""
$(".add-row").live "click", ->
$(".ipad .body").append row
false
How come when I try and get this from the a link inside that row element, I get window:
$(".add-row-item").live "click", =>
f = $ this
console.log f // this logs window object, not the link element?
f.parent().append row_item
Can someone please explain this behavior and how i can use $(this) like you would if the element did exist when the dom loaded?
Thanks
=> changes this to the this in the parent context:
$(".add-row-item").live "click", =>
f = $(this)
compiles to
var _this = this;
$(".add-row-item").live("click", function() {
var f = $(_this);
Use -> instead, which won't modify this.
Related
If the html looks as follow:
<form>
<div>
<field-component>
<div class='field'></div>
</field-component>
</div>
<div>
<div class='icon'></div>
</div>
</form>
I am able to get the field using fieldElement = element(by.css('.field')), but how can I get the closest element with the icon class?
try this:
var form = element(by.css('form'));
return form.element(by.css('.field')).isPresent().then((present) => {
if (present) {
return form.element(by.css('.icon')).click(); #click or whatever on this element
}
});
I'am working on a angular2 project and I have issue when open modal form with parameters.
here is angular open modal snippet code:
openForm_modifyspace(content_modifyspace,event,name){
this.modalService.open(content_modifyspace).result.then((result) => {
this.closemodifyspace_result = `Closed with: ${result}`;
}, (reason) => {
this.closemodifyspace_result = `Dismissed
${this.getDismissReason_modifyspace(reason)}`;
});
var idAttr = event.srcElement.attributes.name;
var mydata = idAttr.nodeValue;
}
here is how I'am using mydata in template
<div class="modal-body">
<form >
<p>title {{mydata}}</p>
<div class="form-group">
</div>
</form>
</div>
My question is to know how to open modal form with mydata as parameter?
thanks for your help
You should set context where call open modal
this.modalService.open(ModalComponent, overlayConfigFactory({
mydate: {}
}));
And after, get value in ModalComponent
ngOnInit() {
this.mydate= this.dialog.context.mydate;
}
I'm trying to find an element in a nested repeater but I'm not sure how can I tackle it.
By default the HTML looks like following (editted it for easy understanding)
<div ng-repeat = "Repeater1">
<div ng-repeat = "Repeater2"> Text1 </div>
<div ng-repeat = "Repeater2"> Text2 </div>
<div ng-repeat = "Repeater2"> Text3 </div>
</div>
There is a button on the page view more, Which shows you three more items on the page. So after clicking the view more button the HTML looks like following
<div ng-repeat = "Repeater1">
<div ng-repeat = "Repeater2"> Text1 </div>
<div ng-repeat = "Repeater2"> Text2 </div>
<div ng-repeat = "Repeater2"> Text3 </div>
</div>
<div ng-repeat = "Repeater1">
<div ng-repeat = "Repeater2"> Text4 </div>
<div ng-repeat = "Repeater2"> Text5 </div>
<div ng-repeat = "Repeater2"> Text6 </div>
</div>
view more button gets disabled if there are no more items to be displayed on the page.
So my question is: from the default page (before clicking view more button) How can I find the element Text 6 ?
What the test should do:
Search the first three items for elementA
if not found, click on view more and search the next three items for elementA
if not found, click on view more again and search the next three items for elementA
The following code searches withing a repeater but I'm not sure how to search between nested repeater
let filteredList = this.Repeater2Elem.filter((item) => {
return item.getText().then((text) => {
return bundle === "text 2";
});
}).first().element(by.buttonText('Element Found')).click();
It depends if the elements which appear after the click "more" are present but not displayed or do not appear in the DOM at all.
Assuming the element is in DOM but isn't shown. (code shown below isn't tested)
function getAppearence(elem) {
return elem.isDispalyed().then(function (isDispalyed) {
if (isDispalyed)
return elem;//will return the element to continue working on it, otherwise return true
else {
return viewMoreButton.click().then(function () {
return getAppearence(elem);
});
}
});
}
this.Repeater2Elem.filter(function (item, index) {
return item.getText().then(function (text) {
return text === "textX";
});
}).then(function (elem) {
if (elem.length ==1)
return getAppearence(elem[0]).then(function (elem) {
return elem
})
})
First get the required element and then get it to be displayed by clicking recursive the 'view more' button.
I'm using JQuery Isotope with a combination, three-level filter. In all the examples I've come across, the only way to "reset" the filters is by clicking a "Show All" option.
Is it possible to "un-filter" results by clicking on a selected filter to un-select it?
Here is an example: http://jsfiddle.net/RevConcept/suagb/
Here is my code...
HTML
<div id="options" class="combo-filters">
<div class="option-combo location">
<ul class="filter option-set group level-one" data-filter-group="location">
<li class="hidden">any
<li>exterior
<li>interior
</ul>
</div>
<div class="option-combo illumination">
<ul class="filter option-set group level-two" data-filter-group="illumination">
<li class="hidden">any
<li>illuminated
<li>non-illuminated
</ul>
</div>
<div class="option-combo mount">
<ul class="filter option-set group level-three" data-filter-group="mount">
<li class="hidden">any
<li>wall
<li>ground
</ul>
</div>
</div><!--end options-->
CSS
header nav a {
color:#666666;
}
header nav a.selected {
color:#000000;
}
JAVASCRIPT
$(function(){
var $container = $('#container'),
filters = {};
$container.isotope({
itemSelector : '.project',
masonry: {
columnWidth: 80
}
});
// filter buttons
$('.filter a').click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return;
}
var $optionSet = $this.parents('.option-set');
// change selected class
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// store filter value in object
// i.e. filters.location = 'exterior'
var group = $optionSet.attr('data-filter-group');
filters[ group ] = $this.attr('data-filter-value');
// convert object into array
var isoFilters = [];
for ( var prop in filters ) {
isoFilters.push( filters[ prop ] )
}
var selector = isoFilters.join('');
$container.isotope({ filter: selector });
return false;
});
});
You could add a "Reload Page" button...
Here are 3 examples for you...
<input type="button" value="Reload Page" onClick="window.location.href=window.location.href">
<input type="button" value="Reload Page" onClick="window.location.reload()">
<input type="button" value="Reload Page" onClick="history.go(0)">
isoSelective provides combining and toggling filters. Try using my updated version: https://github.com/simmerdesign/jquery-isoselective
I have the following
<div id="header">
{{> header}}
</div>
<div class="hidden content_box">
{{> content}}
</div>
"content_box" is hidden at the start.
template "header" has a single button.
<template name="header">
<button id="display_content">Click to display content</button>
</template>
template "content" is just a simple div
<template name="content">
It's me, content
</template>
When I click on the button in the header, I want to "show" the content_box.
How do I achieve this? - or better yet, what is the best way to achieve this type of effect where you need to access the DOM of a template from an event of another template?
Template.header.events "click button#display_content": (e) ->
Template.content.show() ?????
I don't know if it is the best way to do it, but in similar situations what I've done before is to use a session parameter to store the show/hide status of the div. In your click event, you then only need to change the value of the session flag. In the template of the div you want to show/hide, you just return the class name.
Example in JS:
Template.header.events({
"click button#display_content": function () {
Session.set('contentShow', true);
}
});
Template.content.className = function (input) {
return Session.equals('contentShow', true) ? '' : 'hidden';
};
Html
<template name="content">
<div class="{{className}} content_box">
It's me, content
</div>
</template>
You'd need to initialise the session flag to false in Meteor.startup() for example Session.set('contentShow', false);. As session is reactive, the div class name will be re-evaluated automatically when you change the session flag.