Vue prevent router-link from submitting when quick view button is click - javascript

I have a quick view button inside a router-link and when I click it, the router-link keep submitting. I do not want the router-link to submit to the quick view button event. Instead I just want to show the quick view popup window right there. Something similar to this link
Unconditional. When you hover over the image a quick view button show and when you click it, the quick view window popup. And when you just click product image instead of the quick view button, it take you to a different page. That is what I want to achieve. How can I achieve this? If there is a different way to it, I would love to see that too.
<router-link tag="li" :to="{name: 'Product', params: {product}}"
v-on:click.native="getItem">
<div class="container">
<img :src="product.image" alt="" class="card-img">
<div class="overlay">
<button #click="active = true">Quick View</button>
</div>
</div>
</router-link>


This will resove the issue:
<button #click.prevent="active = true">Quick View</button>
.prevent modifier will prevent the button to do what is meant to do by deafult
Or you can do it by adding 'type="button"' to your button (it won't trigger the submit)
<button type="button" #click="active = true">Quick View</button>


What you are looking to do is to prevent the default action on the button click.
You can read about how to do this here: https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers
<button v-click.prevent="onClick"></button>
Have a quick read of the docs as you also might want to use .stop

Related

I have a dynamic html template. Which forms when I click on a button. Now, the problem is When I click on one button all buttons are clicked

Here is the html template forms when I click on a button.
<div class="detail">
<h3>${element.name}</h3>
<p>Phone: ${element.phone}</p>
<button onclick="addToHistory()">Call</button>
</div>`
Let's say it creates two template as it is.
<div class="detail">
<h3>Person1</h3>
<p>Phone: 0111111111</p>
<button onclick="addToHistory()">Call</button>
</div>`
<div class="detail">
<h3>Person2</h3>
<p>Phone: 0111111111</p>
<button onclick="addToHistory()">Call</button>
</div>`
Now, I want to click on one button and then according to my click I want the data of clicked divs should store.
I tried this using event handler as you can see with addToHistory() function. But, it stores all the data both I clicked and not clicked also.
Please note: I want to do this only using JavaScript. Thank you for your support.

You can pass this into your method and use that to traverse within the specific detail container where the button was clicked.
this will reference the specific element the event occurs on
function addToHistory(el){
console.log(el.previousElementSibling.textContent);
}
<div class="detail">
<h3>Person1</h3>
<p>Phone: 0999999999</p>
<button onclick="addToHistory(this)">Call</button>
</div>`
<div class="detail">
<h3>Person2</h3>
<p>Phone: 0111111111</p>
<button onclick="addToHistory(this)">Call</button>
</div>`

How to trigger data-* event in JQuery/JS?

I'm actually new to JQuery, and i am trying to trigger a quick view from the css framework Bulma, you can get documentation on the quickview here:
https://wikiki.github.io/components/quickview/
The quickview is set like this:
<div id="quickviewDefault" class="quickview">
<header class="quickview-header">
<p class="title">Quickview title</p>
<span class="delete" data-dismiss="quickview"></span>
</header>
<div class="quickview-body">
<div class="quickview-block">
...
</div>
</div>
<footer class="quickview-footer">
</footer>
</div>
And i can call it with this button (as saw on the wiki):
<button class="button is-primary" data-show="quickview" data-target="quickviewDefault">Show quickview</button>
So far its working, but i want to create a second button that ll call the quickview with JQuery, how can i do it ?
So far i've tried to click on the button who work great with JQuery when i click on my second button.
<!-- First button, work great -->
<button class="button is-primary" data-show="quickview" data-target="quickviewDefault">Show quickview</button>
<!-- Second button, doesn't work yet -->
<button class="clickmeplz">></button>
The first button is working well, and the second one should call the same quickview as the first one but with JQuery.
This is the code i've tried so far with my second button.
$(document).ready(function(){
$(".clickmeplz").click(function(){
$('button[data-target="quickviewDefault"]').click();
});
});
Unfortunately, it seem that the method click() cannot trigger the event of my first button like this.

Hello !
Let's try this:
$(document).ready(function(){
$(".clickmeplz").click(function(){
if($('div#quickviewDefault.is-active').length) { //If the quickview is showed
$('div#quickviewDefault.is-active').removeClass('is-active'); //Remove the class to hide
}else {
$('div#quickviewDefault').addClass('is-active'); //Add the class to show
}
});
});

How to make sure that back button takes me to section where I was there before I clicked an image?

I have an HTML page in which there are list of images around 4-5. The HTML code of individual image (item-detail.component.html) is shown below:
<span class="badge" id="heart-badge{{item.$id}}">
<div (click)="badgeHeartEmpty()" id="heartHide{{item.$id}}">
<img id="badge-item-heart-noborder-empty" src="/assets/images/Empty-Heart.png">
</div>
<div [style.display]= " 'none' " (click)="badgeHeartFull()" id="heartShow{{item.$id}}">
<img id="badge-item-heart-noborder-full" src="/assets/images/Full-Heart-Blue.png">
</div>
</span>
<!-- This is the code which shows item images and item details -->
<a href="/attendee-item/{{item.$id}}">
<img class="card-img-top" src="{{item.image_url}}" alt="Card image cap" id="card-img">
<div class="card-body">
<div class="auction-item-title">
<h1 id="auction-item-title">{{item.name}}</h1>
</div>
<div class="auction-item-bid-title">
<div class="auction-item-title-left">
<p id="auction-item-bid-title">Current Bid: ${{item.bid}}</p>
<p id="auction-item-bid-title">Value: ${{item.value}}</p>
</div>
<div class="auction-item-title-right">
<p id="auction-item-bid-title2">About this item</p>
</div>
</div>
</div>
</a>
<bid-button [item]="item"></bid-button>
Now if I click above item (as you can see there is a href tag on it) then it shows me detailed description of that image on a new page and that page also has a back button at the top. Below is the code for back button on that new page:
<div class="item-top-bar">
<div class="item-back-bar">
<!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
<p id="item-back-bar-link"><a id="item-back-bar-link" href="/attendee-home"><</a></p>
</div>
<div class="item-pagination-bar">
<a (click)="prevItem()"><p id="item-pagination-bar-text">LAST ITEM</p></a>
<a (click)="nextItem()"><p id="item-pagination-bar-text">NEXT ITEM</p></a>
</div>
</div>
Problem Statement:
Now if I click back button then it takes me to the home page but instead what I want is it should take me to the section of image where I was before.
Is this possible to do? I mean if I have may sections of images and if I click lets say 4th image then it will open detailed description of that fourth image page and now if I press back button then it should take me to fourth section of image where I was before.

If you want to go back, you should use the back() function in javascript
function goBack() {
window.history.back();
}
<button onclick="goBack()">Go Back</button>
Here is a small example of how to use it, now you can just adapt it to your page

You can do that by adding the id here
<p id="item-back-bar-link">
<a id="item-back-bar-link" href="/attendee-home/{{id}}">
// ....
</a>
</p>
Now there are multiple way to get the id. You can use the window.location properties or if in same component pass this id to a property binding

Here is how I would do it.
On a separate note, having the same ID across multiple levels may not be a good idea.
<div class="item-back-bar">
<!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
<p id="item-back-bar-link"><a id="back" href="#">Back</a></p>
</div>
<script>
window.document.getElementById('back').addEventListener('click', function(e){
window.history.back();
e.preventDefault();
});
</script>

Angular has Location which is a service that applications can use to interact with a browser's URL. It is what you need in order to solve your problem.
See implementation below.
<div class="item-back-bar">
<!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
<p id="item-back-bar-link"><a id="back" (click)="goBackClicked()">Back</a></p>
</div>
Your ts file should have these lines.
import {Component} from '#angular/core';
import {Location} from '#angular/common';
#Component({
// component's declarations here
})
class SomeComponent {
constructor(private _location: Location) {
}
goBackClicked() {
this._location.back();
}
}

y not just get the position of the image when it is clicked with .position() and when returned from the image to the page you can get back to the same position with $(window).scrollTop(value).

If your page is scrolled and you want to maintain your scroll position while coming back from the detailed description page, then you can store the current page's vertical scroll position in a service and while navigating back, you can set the scroll position back from service.
Link to ScrollTop in MDN. Also Check Window.To for scrolling.
Sample Angular project to show Element.ScrollTop: https://stackblitz.com/edit/angular-qdjmny.
Click page1, scroll the sample list to navigate, when u com back, the scoll will be maintained.
Also make sure, in your [routerLink] of your detailed description page you are linking to the item-detail.component.html component.

Really theses comments are right. If you want go back page you can use the command window.history.go(-1) or window.history.back()

You can use an anchor tag for this. You need to give the part of the page you go back to an "id", like "gobackto_id". Then you can use this in your "" element in the "href" like this:
<a href="http://www.mypage.be/home#gobackto_id".

Can I trigger xe:namepicker via csjs?

On an xpage I have an editbox control and xe:namepicker nicely grouped beside each other with a Bootstrap add-on component.
However I would like to trigger the xe:namepicker when the cursor enters the editbox.
In the DOM I see that for the namepicker an anchor link is generated such as:
a class="glyphicon glyphicon-user xspPickerLink" href="javascript:;"
And I could trigger the click event via csjs
$("a.xspPickerLink").trigger('click');
But I happen to have multiple xe:namepicker-s on my xpage.
Does anyone have a clue how I can trigger a SPECIFIC xe:namepicker ?

You can work with wrapper elements:
<div id="namePicker1Wrapper">
<xe:namePicker id="namePicker1" pickerText="Select..."></xe:namePicker>
</div>
<div id="namePicker2Wrapper">
<xe:namePicker id="namePicker2" pickerText="Select..."></xe:namePicker>
</div>
Now you have the opportunity to select a SPECIFIC xe:namepicker:
$("#namePicker1Wrapper a.xspPickerLink").trigger('click');

Jquery Close Button issue on Click

I have a div that produce search results on clicking search button. This is the view
and this is html div of it
<div class="bestil-menu__btn">
<a onclick="Searchcontrol(1)" class="btn btn_blue">Ændre datoeeller antal personer</a>
</div>
When I press the blue button
<div class="dins-searhc-luk" #Html.Raw(view2)>
<a id="btnclose" class="dinS-bluebuttonC" href="javascript:;">Luk</a>
</div>
it opens the search control and perform searches. I want to close it on pressing Luk anchor in below div to come as it was before. Please help me how to implement it into it. Thank you.

You can try something like
$('#btnclose').on('click', function(){
$(this).parent('div.dins-searhc-luk').hide();
});

Categories

Resources