Here is the code:
<li v-for="u in usersList">
<strong><a class="username" #click="openChatbox">${ u } </a></strong>
</li>
and the handling method:
openChatbox: function() {
target = event.target || event.srcElement;
this.isOpen = !this.isOpen;
this.recepient = target.innerHTML
},
The problem is that this method sets recepientlike <strong>noob</strong> when u value is noob. How can I get only noob?
You can pass the user like following in the method:
<li v-for="u in usersList">
<strong><a class="username" #click="openChatbox(u)">${ u } </a></strong>
</li>
and use it in method like this:
openChatbox: function(user) {
//use user here
},
Related
I have Angular directive. Something like multiselect with search.
I want to clear query after click on clear icon.
Here is the code:
Template:
<div multiselect>
<ul role="container">
<li ng-repeat="(k,v) in ::propertyModel.getAllowedValues()" ng-show="isSelected(k);">
{{v}}
<span class="icon-close" ng-click="handleOptionRemove(k);" ng-show="!singleSelect"></span>
</li>
</ul>
<div role="opener" class="icon-plus"></div>
<div role="dropdown" class="closed">
<div role="search">
<span class="icon-magnifier"></span>
<span class="icon-close" ng-click="handleSearchClear();"></span>
<input type="text" placeholder="Type to search">
</div>
<ul role="options">
<li ng-repeat="(k,v) in ::propertyModel.getAllowedValues()" ng-show="!isSelected(k) && found(k);" ng-click="handleOptionSelect(k);">{{v}}</li>
<li disabled ng-show="foundItems.length === 0 && queryString !== ''">There is no results found</li>
</ul>
</div>
</div>
Directive:
var input= element.find('input');
[...]
function handleSearchInput(){
scope.foundItems= [];
scope.queryString= input[0].value.toLocaleUpperCase();
for(var o in allowedValues) if(allowedValues.hasOwnProperty(o))
if(allowedValues[o].toLocaleUpperCase().indexOf(scope.queryString)!== -1)
scope.foundItems.push(o);
scope.$apply();
}
[...]
scope.handleSearchClear = function(){
input[0].value='';
input.triggerHandler('input');
};
[...]
input.bind('input', handleSearchInput);
After click i have
Error: [$rootScope:inprog] $apply already in progress[...]
on console.
How can i properly 'clear' this input's value?
Here's what I do in Jasmine tests to clear an element, perhaps this will be helpful:
var myInput = input[0]; // get the input somehow
angular.element(myInput).val('').trigger('input');
I do agree with tymeJV's suggestion to work from a model when possible. Then you'd end up with something like this:
$scope.model.myfieldval = '';
$scope.model.someOtherFieldVal = '';
$scope.form.myFormName.$setPristine();
Hope this is helpful.
Ok, it seems that i was jumped outside Angular context.
I was used handleSearchInput function in event callback fired by Angular itself and it was trigered with Angular's context, then i was forced this function with standard javascript context.
Or something like that ;)
Anyway there is a solution.
function handleSearchInput () {
scope.$apply(function () { //force Angular context (and scope)
doSearch();
});
}
function doSearch () {
scope.foundItems = [];
scope.queryString = input[0].value.toLocaleUpperCase();
for (var o in allowedValues) if (allowedValues.hasOwnProperty(o)) {
if (allowedValues[o].toLocaleUpperCase().indexOf(scope.queryString) !== -1) {
scope.foundItems.push(o);
}
}
}
scope.handleSearchClear = function () {
//always in context because of existing in scope
input[0].value = '';
doSearch();
};
input.bind('input', handleSearchInput);
I have a link <a href="#"> and beside that there is a delete png icon (which is also <a href="#"> link.
So what I want is, when clicked on that delete icon, the link <a href="#"> should get deleted with a confirmation window.
So far I have got like,
html:
<ul>
<li>link <a class="delete" href="#" data-request="POST" >....</a></li>
</ul>
My javascript for data-request
var join_request = function(evnt){
evnt.preventDefault();
var $a = $(this);
var request = $a.data('request') || 'POST';
if (confirm("Are you sure want to delete it?")) {
$.ajax($a.attr('href'), {
type: request,
context: $a,
success: join_request_success
});
}
return false;
};
var join_request_success = function(data, a, b){
this.trigger('executed');
};
$(document).ready(function(){
$('a[data-request]').bind('click', join_request);
}
This doesn't seem to be working! When I am clicking on the delete icon, it is displaying the confirmation window but not doing anything.
Is there any other simple way of achieving this? If not, can anyone tell me where am I going wrong?
Thanks.
var join_request = function(evnt){
evnt.preventDefault();
var $a = $(this);
var request = $a.data('request') || 'POST';
if (confirm("Are you sure want to delete it?")) {
$.ajax($a.attr('href'), {
type: request,
context: $a,
error: join_request_success
});
}
return false;
};
var join_request_success = function(data, a, b){
this.trigger('executed');
this.prev().remove();
};
$(document).ready(function(){
$('a[data-request]').bind('click', join_request);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>link <a class="delete" href="#" data-request="POST" >....</a></li>
</ul>
Note that I had to change success: to error: for demonstration.
Here's the function I'm trying to use
$('body').on('click', '.up-vote', function(event) {
event.preventDefault();
var data = {"action": "voteKarma", "id": $(this).data("id"), "value": $(this).data("val")}
$.post(window.apiURL, data, function(result) {
switch(result['status']) {
case 1:
var vote_sum_text = $(this).next(".sum").text();
if (!isNaN(parseInt(vote_sum_text, 10))) {
var vote_sum_text = $(this).next(".sum").text();
} else { alert("isNaN Variable") }
break;
}, 'json');
});
When the Ajax result returns 0 It's returning an alert with isNaN Variable which is my fallback to debug with problem.
Here's my HTML layout which is grabbed dynamically using another Ajax request there are multiple of these divs listed in <li> format :
<div class="votes pull-left">
<a class="up-vote" href="#" data-id="20" data-val="1"><span class="fa fa-arrow-circle-o-up"></span></a>
<span class="sum" style="font-weight:400;color:#666;">
0
</span>
<a class="down-vote" href="#" data-id="20" data-val="0"><span class="fa fa-arrow-circle-o-down"></span></a>
</div>
In simple terms; when you click .up-vote or .down-vote it'll send an AJAX request that'll then grab the text() of the .sum value.
Try use
$(event.currentTarget).next(".sum").text();
Because this in .post does not refer to element
You can also use the following:
$('body').on('click', '.up-vote', function(event) {
event.preventDefault();
var up_vote_this = $(this);
....
....
//now you can use the variable in the success function...
var vote_sum_text = up_vote_this.next(".sum").text();
I have a unordered list looking like this:
<ul id="frozen" data-name="nameOfSelect" class="tagit">
<li class="tagit-choice" tagvalue="2" style="padding-right: 4px;" id="tag-2">
<div class="tagit-label" data-value="2">kázeň</div>
</li>
<li class="tagit-choice" tagvalue="1" style="padding-right: 4px;" id="tag-1">
<div class="tagit-label" data-value="1">žalmxxxx</div>
</li>
</ul>
I need to bind an click function to all of them and get the data of the id="tag-1" to be used in the function.
I have tried this:
$('#[id|="tag"]').each(function(){
var tag = this.attr('id');
var tagID = tag.replace('tag-','');
this.click(function (){
alert('index.php?s=taglist&tag=' + tagID);
//window.location = string;
});
});
However, for some reason it seems that this approach is wrong for the <li> element as I am having problems with the selector (it seems). Maybe I am also missing something stupid... Any ideas?
No need for a loop, jQuery does this internally, and this is a native DOM element, which has an id property, but no attr() method :
$('[id^="tag-"]').on('click', function() {
var tag = this.id,
tagID = tag.replace('tag-', '');
alert('index.php?s=taglist&tag=' + tagID);
});
I am working on a project, i have two anchors in my View(for voting functionality),
I have a div inside which i am having a <ul> and in 3 <li> i am having anchor for upvote,vote count (in <h2>) and anchor downvote respectively
I want functionality that when i click on any anchor, the h2 html show the vote count, i've implemented the functionality but because of i am unable to do this,
this is my View
<div class="voting" style="margin-left:20px;">
<ul>
<li class="addvote"><a href="#" class="voteAnswer" answerid="#answer.AnswerID" name="Voted">
Up</a></li>
<li class="votecounter">
<h2>
#answer.AnswerLikes.Where(a => a.IsActive == true).Count()</h2>
</li>
<li class="subvote"><a href="#" class="voteAnswer" answerid="#answer.AnswerID" name="Voted">
Down</a></li>
</ul>
</div>
and this is my JS
$(".voteAnswer").click(function (event) {
var answerid = $(this).attr('answerid');
var name = $(this).attr('name');
var id = $(this).attr('id');
var output = $(this);
$.ajax({
url: ResourceAjaxUrl.VoteUnvoteTheAnswer,
type: "POST",
data: JSON.stringify({ answerID: answerid }),
dataType: "html",
contentType: "application/json; charset-utf-8",
success: function (Result) {
alert("Voted");
// $(output).html("Voted (" + Result + ")");
$(output).closest("li").find("h2").html(Result);
$(output).attr("name", "Voted");
},
error: function (msg) {
alert("Unable to Vote answer: " + msg);
}
});
event.preventDefault();
});
i have tried using $(output).closest("li").find(".votecounter") but its still not working
The UL is the closest common ancestor.
Try:
$(output).closest("UL").find(".votecounter")
there are some problems in your code .
here
$(".voteAnswer").click(function (event) {
var id = $(this).attr('id');
there is no attribute id in .voteAnswer
and also how do you differentiate upvote and downvote .
you have to check the anchor's parent li tag's class and check it is upvote or down vote .
also you can select the .votecounter
simply by
$(".votecounter").find("h2").html(Result);
or
$(output).closest("ul").find(".votecounter");