We Keep Coding

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>

Can I trigger a file upload from an element contained within a Vue component with Cypress?

With Cypress, I'm unable to click a dropzone to upload a file. It feels like there is something preventing the click event from happening. Am I clicking the wrong element?
It works manually. (I don't know which specific element is actually recieving the click though)
I've tried { force: true } - Cypress shows a successful click here but nothing happens.
I've tried parent and child elements.
I've tried the Cypress.$ command to bypass the cy wrapper.
// spec code
it.only('has clickable area for upload', () => {
cy.visit('#bulkPolicyOnboarding')
.get('#BulkPolicyOnboardingStartup')
.find('.file-upload')
.find('input[type=file]')
.click({ force: true })
})
// component code
<template>
<section id="widget-grid" v-show="IsShown === true">
<div>
<div class="row">
<article class="col-md-12">
<div class="jarviswidget jarviswidget-color-darken" data-widget-sortable="false" data-widget-togglebutton="true" data-widget-editbutton="false" data-widget-fullscreenbutton="false" data-widget-colorbutton="true" data-widget-deletebutton="false">
<header>
<h2>Add Document</h2>
</header>
<div>
<div class="widget-body">
<div class="row">
<div class="col-md-12">
<file-upload v-model="file"></file-upload>
</div>
</div>
<br />
<div class="row">
<div class="col-md-offset-10 col-md-2">
<a class="btn btn-labeled btn-info" v-on:click="UploadFileToServer"><span class="btn-label"><i class="fa fa-plus"></i></span>Upload File</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</section>
</template>
// nested component (the one I'm trying to click?)
<template>
<div class="file-upload">
<input type="file" style="display: none;" #change="FileChanged" />
<div
class="uploader"
#click="OpenFile"
#dragover="DragOver"
#dragenter="DragEnter"
#dragleave="DragLeave"
#drop="DropFile"
>
<span class="instructions">click to select, or drag and drop a file</span>
<label
class="selected-file"
style="font-size: 1em;"
v-html="selectedFile"
></label>
<span class="x" v-show="HasFile()" #click="RemoveFile">✖</span>
</div>
</div>
</template>
I'm expecting on click (like in manual testing), that the event would fire and the window pops up for file select -- but nothing happens on click in Cypress.
UPDATE:
Per Recep Karadas, I've tried the .uploader selector, but same result:

How to append a div to another div

Now I have multiples PHP for loop in my project exactly the same like one below but with different PHP variables of course. I also have an add button with appends a div element. The problem is because I have many for-loop and each for-loop has an add button so when I click on one add button of a particular div it appends a new div to all.
<div class="appendOuter">
<?php
foreach($query as $data){
$id = $data['ID'];
$initialAccess = $data['Access'];
if(strlen($initialAccess) > 3){
echo '
<div class="box" >
<input type="hidden" value='.$id.' class="ID">
<textarea class="Access">'.$Access.'</textarea>
</div>';
}
}
?>
<div class="text-center">
<button class="btn btn-success btn-add" type="button" onclick="addMorediv(this)">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
My javascript to append a new div
<script>
function addMorediv(index){
var element =$("<div class='box'><textarea class='Access'></textarea><i class='far fa-flag'></i></div>");
element.appendTo('.appendOuter');
}
</script>

Assuming that all your other HTML structure is similar to what you've demoed:
element.appendTo($(this).parent().parent());

Are you looking for something like this? Where when you click the add button, it adds a new text area under the existing textarea(s) already within that row? This is a jQuery specific answer, and doesn't require the "onclick" of button that you were using. It is also adding your content within a parent "row" div for ease of access navigating the DOM during the click event. So in your PHP for loop, you would echo out 1 of the rows in my example, using your PHP variables in the appropriate places like in your example.
$('.btn-add').on('click', function() {
var $box = $(this).parent().parent().find('.box:last');
var $element = $("<div class='box'><textarea class='Access'></textarea><i class='far fa-flag'></i></div>");
$element.appendTo($box);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appendOuter">
<!-- Assume your PHP generated 3 ".row" div rows in for loop -->
<div class="row">
<div class="box">
<input type="hidden" value="1" class="ID">
<textarea class="Access">1</textarea>
</div>
<div class="text-center" style="padding:10px;">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus">Add +</span>
</button>
</div>
</div>
<div class="row">
<div class="box">
<input type="hidden" value="2" class="ID">
<textarea class="Access">2</textarea>
</div>
<div class="text-center" style="padding:10px;">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus">Add +</span>
</button>
</div>
</div>
<div class="row">
<div class="box">
<input type="hidden" value="3" class="ID">
<textarea class="Access">3</textarea>
</div>
<div class="text-center" style="padding:10px;">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus">Add +</span>
</button>
</div>
</div>
</div>

How to get variable class name of jQuery from laravel blade loop

I want to Show/Hide replies for each comment. In order to do that, my jQuery selector has to be variable class name (so that I can show/hide replies of a specific comment without affecting replies of other comments). I've written the PHP code appending comment_id with the class to make the classes different. But I get these IDs from Laravel blade loop and I do not know how to do the same in jQuery. Here's my blade.php -
#foreach($comments as $comment)
<div class="box-comment">
<div class="comment-text">
{{$comment->body}}<br />
<button class="btn btn-link text-muted toggle-replies-{{$comment->id}}">Show/Hide Replies</button>
</div> <!-- /.comment-text -->
</div> <!-- /.box-comment -->
<div class="box-comment reply-box-{{$comment->id}} initially-hidden" style="padding-left: 30px;">
<input type="text" placeholder="Write a reply...">
</div>
#foreach($comment->replies as $reply)
#if($comment->id == $reply->comment_id)
<div class="box-comment reply-box-{{$comment->id}} initially-hidden" style="padding-left: 30px;">
<div class="comment-text">
{{$reply->body}}
</div> <!-- /.comment-text -->
</div> <!-- /.box-comment -->
#endif
#endforeach
#endforeach
And this is jQuery:
<script>
$(document).ready(function() {
$(".toggle-comments").click(function(){
$(".comment-box").slideToggle();
});
$(".toggle-replies-1").click(function(){
$(".reply-box-1").slideToggle();
});
});
</script>
I've manually put a '1' there and it shows/hides the replies of the first comment. I need to do it for all the comments. It shouldn't be difficult but I'm still learning jQuery. I hope someone can help me with it.

Try this :
#foreach($comments as $comment)
<div class="box-comment">
<div class="comment-text">
{{$comment->body}}<br />
<button class="btn btn-link text-muted show_hide_replies" id="{{$comment->id}}">Show Replies</button>
</div>
</div>
<div class="box-comment reply-box-{{$comment->id}} initially-hidden" style="padding-left: 30px;">
<input type="text" placeholder="Write a reply...">
</div>
#foreach($comment->replies as $reply)
#if($comment->id == $reply->comment_id)
<div class="box-comment reply-box-{{$comment->id}} initially-hidden" style="padding-left: 30px;">
<div class="comment-text">
{{$reply->body}}
</div>
</div>
#endif
#endforeach
#endforeach
<script type="text/javascript">
$(document).ready(function() {
$(".toggle-comments").click(function(){
$(".comment-box").slideToggle();
});
$(".show_hide_replies").click(function(ev) {
var getElem = $(this).attr("id");
$(".reply-box-"+getElem).slideToggle()
$(this).text(function(i, text){
return text === "Show Replies" ? "Hide Replies" : "Show Replies";
})
})
});
</script>

How to display a div over other containts of an html page?

I am new to html and css,I have created a div that contains citynames.
I am trying to display that div on a button click.But when i click on button then that div gets hidden behind the next section of my page.
here is the image it looks like:
but i want to display that div over the section bellow that div and not behind. For getting more idea how i want ot display see askme.com and click on 'rest of india' dropdown button.
here is my html code:
<!--start SearchBox section-->
<section id="searchbox"style="background:white">
<div class="container" style="margin-top:0px;">
<div class="row">
<div class="col-lg-12">
<form style="">
<center>
<div id="SearchBoxBorder" style="background:white;border-style:soli;border-radius:5px;margin-top:20px;width:800px;">
<table id="mytable" >
<td style="width:300px;background:white;">
<center> <div class="form-group">
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="I am looking for"
style="border-width:5px;background:white; margin-top:17px; margin-left:15px; margin-right:10px;width:300px;
border-style:solid;border-width:5px;border-color:#eee;font-family:Arial,Helvetica,sans-serif;height:42px; font-size:18px;">
</div></center>
</td>
<td style="width:50px ;text-align:right;background:white;"> <center><strong> in</strong></center> </td>
<td style="width:400px;background:white;">
<center>
<div class="input-group" style="position: relative;">
<input type="text" class="form-control" placeholder="in locality"
style="border-width:5px;background:white; margin-top:2px; margin-left:10px; margin-right:20px;width:;font-size:18px;
border-style:solid;border-width:5px;border-color:#eee;font-family:Arial,Helvetica,sans-serif;height:42px;">
<div class="input-group-btn" >
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="dropdownBtn"
style="background:white;border-top-width:5px;border-right-width:5px;border-bottom-width:5px;border-left-width:1px;
border-color:#eee;height:42px;border-radius:0px;text-align:center;color:black; margin-right:20px;margin-top:2px;">Select<span class="caret"></span></button>
<!--City dropdown -->
<div class="SearchCities" id="dialog" title="Basic dialog" >
<div id="outer" style="">
<div id="innerLeft" style="">
<h5 >North India:</h5>
<ul class="city" type="none";>
<li><a>Delhi</a></li>
<li><a>Agra</a></li>
<li><a>Shrinagar</a></li>
<li><a>Noida</a></li>
<li><a>Himachal</a></li>
<li><a>Patna</a></li>
</ul>
</div>
<div id="innerRight" style="">
<a class="close">×</a>
<h5>West India:</h5>
<ul class="city" type="none";>
<li><a>Mumbai</a></li>
<li><a>Pune</a></li>
<li><a>Nashik</a></li>
<li><a>Kolhapur</a></li>
<li><a>Osmanabad</a></li>
<li><a>Ahamdabad</a></li>
</ul>
</div>
</div><!--/outer-->
</div><!--/SearchCities-->
</div><!-- /btn-group -->
<button type="button" class="btn btn-primary" style="margin-right:20px;"><i class="icon-search" style="font-size:20px"></i> Search</button>
</div><!-- /input-group -->
</center>
</td>
</table>
</center>
</form>
</div><!--/col-lg-12-->
</div><!--/row-->
</div><!--/end of container-->
</section>
<!--End of SearchBox section-->
and following is my css for displaying that div:
.SearchCities {
float: right;
position:absolute;
margin-top:3px;
top: 100%;
right:20px;
}
so please help me ,and suggest any solution to achive above mentioned. .
Thank u in advence.
I have added .searchCiries{z-index:1;} and here is my output:
I dont want the city names come out of the container div.So please suggest any correction

In css add a z-index value like say : z-index:100

You should put
z-index: 9990;
in your div's class. This CSS option will bring your div to the front (unless value of z-index of other elements is more than 9990, the maximum value is 9999).
http://www.w3schools.com/cssref/pr_pos_z-index.asp