My element looks like this:
<div id="searchBarFilters">
<div class="filterBox">
<div class="col-xs-12">
<h3>Adjust Filters<span ng-click="closeGlobalFilters()" class="icon-close"></h3>
<hr/>
When the user clicks on this close icon, the particular div panel visibility is hidden. I am checking this functionality using protractor as below:
browser.driver.findElement(by.css('span[ng-click*="closeGlobalFilters()"][class="icon-close"]')).click();
I had to use both the attributes of span tag because there are 2 other elements with the same className.
The above code is not showing any error but I do not see the click action eing executed in action.
What am I missing here? Thanks in advance for your help.
Related
I'm building an autocomplete component which is loaded dynamically from the parent using
<div>
<input type="text"
:placeholder="myResources.Placeholder" #input="onChange" #keyup.down="onArrowDown" #keyup.up="onArrowUp" #keyup.enter.prevent="onEnter($event)" #blur="onBlur"v-model="search" />
<ul id="autocomplete-results" v-show="isOpen" class="autocomplete-results">
<li class="loading" v-if="isLoading">
Loading results...
</li>
<li v-else v-for="(result, i) in results" :key="i"
#click="setResult(result)" #mouseover="onMouseOver(i)"
class="autocomplete-result" :class="{ 'is-active': i === arrowCounter }">
{{ result }}
</li>
</ul>
</div>
Basically when the user starts typing a list of search results shows up, and they can select between the results using the up and down arrow keys, and then confirm their choice by pressing enter (or they can use the mouse).
Problem is, the component is placed inside a tag in the parent. And pressing Enter submits the form. I have tried catching the event, using
#keyup.enter.prevent="onEnter($event)"
or calling event.preventDefault() in the event handler. None of this works. Breaking inside the event handler, I found out that the submit on the form happens before the handler is triggered. I thought maybe the event originates on the or elements, but when I stick event handlers on them, they don't get called.
How do I tell the parent "don't submit" and actually have it listen?
As I mentioned, the component is rendered dynamically inside a parent. The problem
In your onArrowUp and onArrowDown functions, you should focus() the child component. That way, the Enter key is definitely called on the child item.
From there, change your #keyup.enter.prevent to #keyup.enter.stop to stop event propagation back up to the parent.
I'm trying to make all picture posts on my homepage not clickable, so they can't link to the permalinks. (I just want them to stay as miniatures with the hover cycle effect already provided by the theme)
I've tried removing {LinkOpenTag} and {LinkCloseTag} from:
{block:Photo}
<div class="wide-sizer">
<div class="image">
{LinkOpenTag}
<img src="{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}{block:IndexPage}{PhotoURL-500}{/block:IndexPage}" alt="{PhotoAlt}"
data-high-res="{PhotoURL-HighRes}"
data-width="{PhotoWidth-HighRes}"
data-height="{PhotoHeight-HighRes}"
/>
{LinkCloseTag}
</div>
But photos and photosets are still clickable.
This is my page: http://woodstudiofr.tumblr.com
I'm using the "Spectator Theme".
UPDATE: ok so i tried removing as data-permalink={Permalink}as lharby suggested, but now all the links redirect to /undefined.
Any ideas?
thanks again for your time !
As mentioned in my comment, the data-permalink attribute has been removed, but there is still some custom javascript which is casing the url to be returned undefined.
Go to the bottom of your template, before the closing <body> tag and add this code:
<script type="text/javascript">
$(document).ready(function(){
$('.post').unbind('click').click(function(){});
});
</script>
(Basically instead of binding the post to a click function which is in the custom javascript we are now attempting to unbind it on click).
I tested it in the browser and it looks to be working (although a couple of other methods I thought would work didn't).
EDIT
In order to change the cursor on the post element. Remove the clickable class from the .post div from the template (if you can, if it is hard coded in).
Alternatively inside the style tags at the bottom, add the following css:
.post-grid .post.photo.clickable a,
.post.clickable {
cursor: default;
}
Good Day
I am using an ASP.NET webform where I have wrapped the following button inside the form tags:
<form runat="server">
<button class="btn btn-primary" onclick="window.location='http://google.co.za';">Login</button>
</form>
ISSUE: The problem is that when clicking on the button, it just directs to the current page...does not redirect. However, when I remove the form tags, the button works. If I leave the form tags and I use an anchor tag to relocate, it works as well...It is just the button that is giving me issues.
Why is that?
I am using Twitter bootstrap as well(extra info..)
Thank you
Add type="button" attribute to your button tag. Without it button works as submit.
I cannot get a form to submit additional fields that have been cloned. When a form like the one below is submitted, it does not include the cloned form elements. Does anybody know why and how I can alleviate this issue.
<form>
<table>
<tr><td><input type="text" value="50" name="myvar[]" /></td></tr>
<!-- This button will clone the previous set of form elements -->
<tr><input type="button" value="Add New Line" onclick="this.getParent('tr').getPrevious('tr').clone().inject(this.getParent('tr'), 'before')" /></tr>
</table>
</form>
Your HTML isn't well formed, so this.getParent('tr') is returning null at least for me in Firefox. Put the button inside a td that is inside the tr and it works.
JSFiddle: http://jsfiddle.net/delvarworld/r99fN/ clicking the button throws an error
Thanks for the comment but the form was meant to be an example not actually what I had. I looked back at the form and the top form element was inside the table and the bottom form element was outside of the table. I moved the top form element outside of the table and everything works perfectly.
thanks,
I have a view in which I have the following code:
<div id="DivPassword" >
<%Html.RenderPartial("PasswordDetails"); %>
I want to display the div as a dialog, in which I am successful. When I click on a link the dialog opens.
However, I can see that the partial view is also being displayed in the View, when the page loads. Why is it so? How can I correct that?
It displays because your code generates markup like:
<div id="DivPassword" ><!-- contents of partial view here --></div>
When a browser sees this markup, id displays stuff. :)
In order to not display the dialog until you run some JavaScript to make it display, you need to hide it. You can do this with a CSS rule:
div#DivPassword
{
visibility: hidden;
}
Pretty much all JS dialog libraries will change the visibility when you pop up the dialog.