show and ng-show is not helping out for below div - javascript

when clicked on a button there should be a div to be shown that "Are u sure, u want to delete"
else other div should be shown.
i am trying either ways using ng-show or show()
<button
class="button-default button-m panel-heading-margin"
type="button"
ng-if="!$last"
ng-click="deleteButton();"
>
<i class="icon16 icon-delete v-sub di-block mr-0"></i>
</button>
<div class="modal-footer mt-10 p-0">
<div
id="deleteview"
class="bg-gray-light row"
ng-show="$scope.displayModal"
>
<div class="col-md-9">
<h4 class="p-15 text-left">
You are going to <b>Delete</b> the <b>Mapping</b> you have
selected. Are you sure you want to continue?
</h4>
</div>
<div class="col-md-3">
<div class="pt-25 text-right pr-5">
<button class="button-cancel button-m">Cancel</button>
<button id="deletesinglemap" class="button-m button-primary">
Delete
</button>
</div>
</div>
</div>
<div id="addview" class="pull-right p-20" ng-hide="$scope.displayModal">
<span class="button-cancel" data-dismiss="modal">Cancel</span>
<button id="addmapping" class="button-m button-primary" type="button">
Add
</button>
</div>
</div>
Controller:
$scope.slideUpModal = function () {
$scope.displayModal = true;
$("#deleteview").show();
$("#addview").hide();
};
when clicked on a button there should be a div to be shown that "Are u sure, u want to delete"
else other div should be shown.
i am trying either ways using ng-show or show()

Related

Vue js edit content according to its ID

I’m starting with vue js and I’m listing some data from database. More specifically posts with title, description and images.
I have Edit and Delete buttons. All posts are loaded using v-for. So when I click to edit one post, all the posts are “openning” to be edited.
I need to open the editing only in one post at a time. I mean, the specific post I really want to edit.
I made some progress with title input and with image delete badge but still need to work on Save and Cancel buttons (they open in all posts) and input files (when I choose files in second post for example, they load into first post).
<div id="app" class="row mb-50">
<div v-for="(item, index) in tours" v-bind:key="item.id" id="tours" class="col-md-12 mb-30">
<div class="tour-list">
<div class="tour-list-title">
<p>
<!-- here I can block input title to be disabled on other posts not than the specific one and I intend to do the same with textarea -->
<input class="inputEdit" type="text" ref="item.id" v-model="item.title"
:disabled="editingTour !== item.id" :class="{inputEditOpen: !editingTour}" />
</p>
</div>
<div class="tour-list-description">
<p>
<textarea class="inputEdit" :disabled="!editingTour" v-model="item.description"
:class="{inputEditOpen: !editingTour}">
{{ item.description }}
</textarea>
</p>
</div>
<div class="tour-list-pics">
<div class="row mb-20">
<div class="col-md-12">
<ul class="pics-list">
<li v-for="(image, index) in item.images">
<!-- here I could hide badge -->
<span :hidden="editingTour !== item.id" class="badge"
#click="$delete(item.images, index), deleteImage(image.imageID)">
<i class="fa fa-fw fa-times-circle"></i>
</span>
<div class="pics-list-image-container img-fluid cursor-pointer"
v-bind:style="{'background-image': 'url(http://localhost/tours/'+image.image + ')' }"
#click="openModal = true, showModal(image.image)">
</div>
</li>
<li v-if="urls" v-for="(url, key) in urls" :key="key">
<div id="preview" :ref="'url'" class="pics-list-image-container img-fluid"></div>
</li>
<li v-if="editingTour" class="add-pics-item">
<div :hidden="editingTour !== item.id" class="mt-10">
<label for="file-upload" class="custom-file-upload">
<img class="img-fluid" src="./img/plus-icon.png">
</label>
<input id="file-upload" type="file" #change="onFileChange"
name="files[]" multiple />
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="tour-list-options">
<div class="row">
<div class="col-md-6">
<span>
<button #click="editingTour = item.id" v-if="!editingTour"
class="btn border btn-circle tour-list-edit-btn">Edit</button>
</span>
<span>
<button #click="editTour(item)" v-if="editingTour"
class="btn border btn-circle tour-list-edit-btn">Save</button>
</span>
<span>
<button #click="clearInput" v-if="editingTour"
class="btn border btn-circle tour-list-delete-btn">Cancel</button>
</span>
<span>
<button #click="deleteTour(item.id, index)" v-if="!editingTour"
class="btn border btn-circle tour-list-delete-btn">Delete</buton>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
Update
If I use
<button #click="editTour(item)" v-if="editingTour == item.id" class="btn border btn-circle tour-list-edit-btn">Save</button>
all others Save buttons get hidden.
I think you can use add to each object of list new property isEditing and look for it in each item of the loop to check Save/Edit show.
Now your one prop editingTour can't be used for multiple edit, it can't store array of edited items id.
Template of buttons would look like:
<span>
<button #click="item.isEditing = item.id" v-if="!item.isEditing"
class="btn border btn-circle tour-list-edit-btn">Edit</button>
</span>
<span>
<button #click="editTour(item)" v-if="item.isEditing"
class="btn border btn-circle tour-list-edit-btn">Save</button>
</span>
<span>
<button #click="clearInput(item)" v-if="item.isEditing"
class="btn border btn-circle tour-list-delete-btn">Cancel</button>
</span>
<span>
<button #click="deleteTour(item.id, index)" v-if="!item.isEditing"
class="btn border btn-circle tour-list-delete-btn">Delete</button>
</span>

how to stop iterating my like button inside my post

I am working on a post system with likes where the user can toggle the post`s like I have done everything correctly except the last step, the problem inside my v-for loop I fetch likes table from post-like relation(many to many since likes table has user_id and post_id) but it is iterating my button even when I add a condition look here-> duplicated like button, I have tried many things v-if, v-show I think the problem is with my algorithm I hope someone can fix that for me thanks.
<div class="panel panel-white post panel-shadow" v-for="post in posts" >
<div class="post-heading">
<div class="pull-left image">
<img v-bind:src="'img/profile/' + post.user.photo" class="img-circle avatar" alt="user profile image">
</div>
<div class="pull-left meta">
<div class="title h5">
<b>{{post.user.name}} </b>
made a post.
</div>
<h6 class="text-muted time">{{post.created_at | hour}}</h6>
</div>
</div>
<div class="post-description">
<p>{{post.content}}</p>
<div class="stats">
<button class="btn btn-default stat-item" #click.prevent="addLike(post.id)">
<i class="fa fa-thumbs-o-up" aria-hidden="false" style="color: blue" v-for="(like) in post.likes" v-bind:style="like.user_id===id && like.post_id===post.id?'color: blue;':'color: gray;'" > Like {{post.likes.length}}
</i> <!-- here is the duplicate problem-->
</button>
<a class="btn btn-default stat-item" #click.prevent>
<i class="fa fa-reply-all"> {{post.comments.length}}</i> Comments
</a>
</div>
</div>
<comment-input :post="post" :userId="id" :userPhoto="userPhoto"></comment-input>
<ul class="comments-list" v-for="comment in post.comments?post.comments:''">
<comments :comment="comment" :userId="id" :userPhoto="userPhoto"></comments>
</ul>
</div>
<hr>
</div>
</div>
Don't loop through the button element, try to use a method likedBythisUser to check if the current user liked the post in order to bind it to the button style :
methods:{
likedBythisUser(post,id){
return post.likes.find(like=>{
return like.user_id===id && like.post_id===post.id;
}) // return a boolean value
}
}
template :
<button class="btn btn-default stat-item" #click.prevent="addLike(post.id)">
<i class="fa fa-thumbs-o-up" aria-hidden="false" style="color: blue" bind:style="likedBythisUser(post,id)?'color: blue;':'color: gray;'" > Like {{post.likes.length}}
</i> <!-- here is the duplicate problem-->
</button>

jQuery get text value from elements from different divs with same class

<div class="panel">
<div class="panel-heading item-name">T-shirt1</div>
<div class="panel-body"><img src="img/shirt1.jpg" class="img-responsive" alt="Image"></div>
<div class="panel-footer text-center">
<h5>PRICE: <span class="old-price">$15.32</span></h5>
<h4>$17.56</h4>
<button type="button" class="btn btn-danger add-to-cart">Add to cart</button>
</div>
</div>
<div class="panel">
<div class="panel-heading item-name">T-shirt2</div>
<div class="panel-body"><img src="img/shirt2.jpg" class="img-responsive" alt="Image"></div>
<div class="panel-footer text-center">
<h5>PRICE: <span class="old-price">$21.67</span></h5>
<h4>$23.15</h4>
<button type="button" class="btn btn-danger add-to-cart">Add to cart</button>
</div>
</div>
<div class="panel">
<div class="panel-heading item-name">T-shirt3</div>
<div class="panel-body"><img src="img/shirt3.jpg" class="img-responsive" alt="Image"></div>
<div class="panel-footer text-center">
<h5>PRICE: <span class="old-price">$16.69</span></h5>
<h4>$16.80</h4>
<button type="button" class="btn btn-danger add-to-cart">Add to cart</button>
</div>
</div>
What I really want is to retrieve the value of each item-name when I click on the Add to cart button. If I click on the first button, I should get T-shirt1, second button should alert T-shirt2, third button => T-shirt3.
Here is my jQuery script.
<script>
$('.add-to-cart').click(function() {
var itemName = $('.item-name', this).text();
alert(itemName);
});
</script>
You can try this:
$('.add-to-cart').click(function() {
var itemName = $(this).closest('.panel').find('.item-name').text();
alert(itemName);
});
Usage of the closest method: closest
Go from clicked button up in parents chain until you find .panel and then down in children tree until you find .item.name:
$('.add-to-cart').click(function() {
var itemName = $(this).parents('.panel').children('.item-name').first().text();
alert(itemName);
});

cancel comment in angular and change view

when i click on edit button the view is changed by ng-if how to go back by clicking cancel button
<div class="timeline-body">
<div marked="cmnt.content" class="markdown" ng-if = "editPostComment != $index " ></div>
<!--Edit comment-->
<div class="commentBox" ng-if = "editPostComment == $index " >
<textarea
rows="10" > {{cmnt.content}}</textarea>
<div class="hints">
<span class="boldtext">**Bold**</span>
<span class="italictext">_itlaics_</span>
<span class="striktext">~~strike~~</span>
<span class="codetext">'code'</span>
<span class="codetext">'''preformatted'''</span>
<span class="quotetext">>quote</span>
</div>
<div id="comment-btns">
<button class="btn btn-primary pull-left" ng-class="{'loading': commentig}" ng-disabled="commentig" ng-click="cancel()">Submit</button>
<button class="btn btn-primary pull-left cancel-edit" ng-class="{'loading': commentig}" ng-disabled="commentig" ng-click = "cancelEdit()">Cancel</button>
</div>
</div>
</div>
If your route change when clicking on edit comment, you can do it like in javascript. Try this
$scope.cancel = function(){
$window.history.back();
}
But if it only depend to the nf-if condition you can set the value of editPostComment to be different to $index as below
$scope.cancel = function(editPostComment){
editPostComment = null;
}
and then change the cancel button to
<button class="btn btn-primary pull-left" ng-class="{'loading': commentig}" ng-disabled="commentig" ng-click="cancel(editPostComment)">Submit</button>

Click twice on icon doesn't close dropdown

I'm going mad here.
I have a search icon. If the user clicks on it, a dropdown is opened. If he/she clicks outside of the element, it closes the dropdown. My problem is that I want to close it if the user clicks again on the icon, but this part doesn't work. I guess the problem is the event.stopPropagation.
I have the following js code:
$('.mobile-search').on('click', function(event){
$('.oe_searchview').show().css('margin-bottom', '15px');
if ($('.oe-right-toolbar').length) {
viewOptions.hide();
}
event.preventDefault();
event.stopPropagation() // stops bubbling
// hide search if user clicks outside of the search button
$('html').on('click.search', function (ev) {
if (!$(ev.target).parents('.oe_searchview').length && !$(ev.target).parents('.oe-search-options').length) { // if the click's parent has no .oe_searchview class then hide
$('html').off('click.search');
searchField.hide();
} else if ($(ev.target).parents('.mobile-search').length) {
searchField.hide();
}
});
});
HTML code is:
<div class="col-md-4 col-sm-6 col-xs-12 active-app-title">
<h2 class="hidden-xs">OPPORTUNITIES</h2>
<div class="btn btn-primary"><div class="ripple" style="width: 100%; height=100%;">Create</div> </div>
<span>or</span>
<div class="btn btn-primary"><div class="ripple" style="width: 100%; height=100%;">Add new column</div></div>
<div class="mobile-search">
<img src="/website/static/src/img/search-icon.png" alt="Search Again" class="search-icon"/>
</div>
<div class="mobile-views">
<a class="flaticon-pause45" href="#"></a>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12 search">
<div class="oe_searchview form-control input-sm active">
<div class="oe_searchview_search" title="Search Again">
<img src="/website/static/src/img/search-icon.png" alt="Search Again" class="search-icon"/>
</div>
<div class="oe_searchview_facets">
<div class="oe_searchview_input" contenteditable="true" tabindex="0"></div>
</div>
<div class="oe_searchview_unfold_drawer" title="Advanced Search...">
<img src="/website/static/src/img/arrow-down.png" alt="Search Again" class="arrow-down-icon"/>
</div>
</div>
<div class="oe-search-options btn-group">
<div class="btn-group btn-group-sm">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Filters</button>
</div>
<div class="btn-group btn-group-sm oe-groupby-menu">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Group By</button>
</div>
<div class="btn-group btn-group-sm">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Favorites</button>
</div>
</div>
<div class="oe-right-toolbar">
<div class="oe-view-manager-switch btn-group btn-group-sm">
<span class="flaticon-pause45"></span>
<span class="flaticon-list91"></span>
<span class="flaticon-statistical"></span>
<span class="flaticon-calendar160"></span>
</div>
</div>
</div>
I'm novice in js so every help would be appreciated.
This is how I would approach it
// one behaviour for the search button
// this checks to see if the search button is visible, and if so,
$('.mobile-search').on('click', function(event){
event.preventDefault();
event.stopPropagation() // stops bubbling
if($('.oe_searchview').is(":visible")){
// hide the search view
$('.oe_searchview').hide();
}
else
{
// show the search view
$('.oe_searchview').show().css('margin-bottom', '15px');
if ($('.oe-right-toolbar').length) {
viewOptions.hide();
}
}
});
// this second behaviour happens only
// hide search if user clicks outside of the search button
$('html').on('click', function (ev) {
if (!$(ev.target).parents('.oe_searchview').length && !$(ev.target).parents('.oe-search-options').length) { // if the click's parent has no .oe_searchview class then hide
$('.oe_searchview').hide();
}
});

Categories