this is the first time that this happens to me, when I click on the next button in the url bar the address changes but the page remains on the same as if I did not click on next. However, the new step is displayed below. I hope someone will have the solution. Thanks in advance.
<template>
<div>
<button #click="send" >next</button>
</div>
</template>
<script>
methods:{
send(){
this.$router.push('/page/commande/1')
}
</script>
//router
{
path:'/page/commande/1',
name:'ConfirmationSend',
component:() => import('../views/send.vue'),
},
Hey you should add the key as fullPath of route in the router-view. As it will not re render the page/component only if the url params change.
<router-view :key='$route.fullPath' />
For the moment I was able to work around the problem by adding an tag in the template part and the method I put this. $ Router.push in order to be able to use my navigation guards. This is a temporary fix while you figure out what the real problem is. Thank you all for your help.
Related
enter image description here
Good day people, please am trying to implement this kind of loading and spinner when am changing routes in react, can anyone here help me out with the code. I use react-router-dom. Thanks
Use this tutorial by medium, it shows an useful example.
add this to Header or index.html or index.js(parent component)
<progress value="20" max='100'></progress>
add jquery to that html page by
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
then below this script tag add this
<script>
$(window).scroll(function(){
$('progress').val(($(window)[0].scrollY+$(window)[0].innerHeight)*100/$(document).height())
})
</script>
Note you can style that progress bar by css
progress{
...//css
}
If I detail the problem I'm trying to solve, it will help with my question.
I want to use HTML in the Angular Material tooltip, the current template doesn't enable this functionality:
<div class="mat-tooltip"
[ngClass]="tooltipClass"
[style.transform-origin]="_transformOrigin"
[#state]="_visibility"
(#state.done)="_afterVisibilityAnimation($event)">
{{message}}
</div>
In order to use HTML in the tooltip I'd like to override the template to the following:
<div class="mat-tooltip"
[ngClass]="tooltipClass"
[innerHTML]="message"
[style.transform-origin]="_transformOrigin"
[#state]="_visibility"
(#state.done)="_afterVisibilityAnimation($event)">
</div>
Is this possible? Is there another method I'm overlooking to achieve what I'm looking for?
The html file cannot be changed, however you can access the element from the component.ts file
#ViewChild('dataContainer') dataContainer: ElementRef;
loadData(data) {
this.dataContainer.nativeElement.innerHTML = data;
}
as found in thie SO-answer.
I'm a newcomer when it comes to javascript and selenium. I have created a simple add to cart project, but the one i am currently working on im having some troubles. The HTML code is:
<div class="buttons-set" id="shipping-method-buttons-container">
<button type="button" class="dark" onclick="shippingMethod.save()" onkeypress="shippingMethod.save()">Continue</button>
<span id="shipping-method-please-wait" class="please-wait icon icon--notch" style="display:none;">
Loading next step... </span>
</div>
I can't seem to figure out anyway where i can click the Continue button. I have tried things such as
driver.findElement(By.linkText("Continue")).click();
driver.findElement(By.xpath(//*[#id='shipping-method-buttons-container']/button)).click();
and many other combinations but none seemed to work.
Try getting the element by its class name:
driver.find_element_by_class_name("dark").click();
I believe you have used implicit wait. If not we need to add it.
driver.manage().timeouts().implicitlyWait(60, TimeUnit.SECONDS);
Also try this below xpath.
driver.findElement(By.xpath("//button[contains(text(),'Continue']")).click();
Hope this helps. Thanks.
Try this below code using cssSelector locator.
driver.findElement(By.cssSelector("button[class='dark'][type='button']")).click();
OR
Try to click the button using java-script executor.
WebElement continue_button = driver.findElement(By.cssSelector("button[class='dark'][type='button']"));
((JavascriptExecutor) driver).executeScript("arguments[0].click();", continue_button);
I am new to javascript. Please find the below code for button,
<p class="actions">
<button class="button primary" type="submit">Login</button>
Sign Up
</p>
I need code to click this button. Anyone please help me. Thanks in advance.
Can you provide the rest of your code including the script section so we can see what you have there?
Basically however, if you just need the button to register a click I would change the button Id to an element since it's a unique element. Let's call it id =button1 . Then in your script section you would type
document.getElementById("button1").onclick=function(){
}
And type what you want to happen inside the {}
I am trying to create a simple Alfresco dashlet with an edit button enabled on the title bar. Unfortunately, I can not figure out how to get the edit button to actually display on the title bar.
Here is what I have so far:
dashlet desc file (.desc.xml)
<webscript>
<shortname>Sample</shortname>
<description>Displays a Sample dashlet</description>
<family>dashlet</family>
<url>/mycompany/components/dashlets/sample-dashlet</url>
</webscript>
My main freemarker template file (.ftl)
<script type="text/javascript">
//<![CDATA[
var sampleDashlet = new MyCompany.dashlet.SampleDashlet("${args.htmlid}").setOptions({
"componentId": "${instance.object.id}",
"siteId": "${page.url.templateArgs.site!""}",
"title": "${msg("header")}"
}).setMessages(${messages});
new Alfresco.widget.DashletResizer("${args.htmlid}", "${instance.object.id}");
var editDashletEvent = new YAHOO.util.CustomEvent("onDashletConfigure");
editDashletEvent.subscribe(sampleDashlet.onConfigClick, sampleDashlet, true);
new Alfresco.widget.DashletTitleBarActions("${args.htmlid}").setOptions({
actions: [{
cssClass: "edit",
eventOnClick: editDashletEvent,
tooltip: "${msg("dashlet.edit.tooltip")?js_string}"
}]
});
//]]>
</script>
<div class="dashlet-1">
<div> Test </div>
</div>
It seems as if the problem must be in my configuration somewhere, but I can't find it. Can anyone point me in the right direction, please?
If you want a working example of a very simple dashlet that is set up to be configurable in this way, see http://code.google.com/p/alfresco-get-latest-document. This blog post sets up the basic functionality: http://ecmarchitect.com/archives/2012/05/08/1592. And this blog post expands on that to make the initial dashlet configurable: http://ecmarchitect.com/archives/2012/05/15/1599.
In comparing your FTL with mine, I'm wondering if your div classes/id need to follow this pattern:
<div class="dashlet getlatestdoc">
<div id="getlatestdoc_title" class="title">
${title}
</div>
Otherwise, how will the edit button know where to render itself?
As Jeff suggests, you need to include a <div> element for the dashlet's title bar in your markup with an appropriate value for the class attribute, as follows
<div class="dashlet dashlet-1">
<div class="title">Title</div>
<div class="body">Body content</div>
</div>
When the Alfresco.widget.DashletTitleBarActions instance that your inline JavaScript code creates gets instantiated it will look for a child <div> with the class title and will add the actions there.
I also added a dashlet class to the parent div, which is required for the default dashlet styles to be applied.