Whenever I click on the edit button, I have a textarea which I want to update the value above, however I have an issue to get the text from above to be displayed in the textarea.
enter image description here
I tried solving this like this, but doesn't seem to work. Can someone advice?
<p> {{ points.singlePoint?.description }}</p>
Edit icon here.
<textarea>
placeholder="Add chapter description...",
v-model="newDescriptionData",
v-if="updateDescriptionWindow == true"
</textarea>
const newDescriptionData = ref(points.singlePoint.description)
return {
points,
newDescriptionData
}
Please take a look at an official guide, it might help
Vue.js guide
Related
I have an app that is using ngx-bootstrap to show a tooltip on mouseover. I want to test that the content, which is dynamically added, shows properly. In order to do this I have a test that looks like this:
it(shows the right tooltip', fakeAsync(() => {
fixture.debugElement.query(By.directive(TooltipDirective))
.triggerEventHandler('mouseover', null);
tick();
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('.tooltip-inner')).nativeElement)
.toBe('the tooltip text');
}
This results in an error that indicates that fixture.debugElement.query(By.css('.tooltip-inner')): "Cannot read property 'nativeElement' of null"
If I print out the content of fixture.debugElement.nativeElement I get this:
<div id="root1" ng-version="5.2.9">
<my-component>
<div ng-reflect-tooltip="the tooltip text">
<img src="images/test.png">
</div>
<bs-tooltip-container role="tooltip" class="tooltip in tooltip-right">
<div class="tooltip-arrow arrow"></div>
<div class="tooltip-inner">the tooltip text</div>
</bs-tooltip-container>
<my-component>
</div>
The important take away is that the html exists - it is just not accessible by the DebugElement.query.
My current solution to get the spec passing is to change the expect to:
expect(fixture.debugElement.nativeElement.textContent.trim())
.toBe('the tooltip text');
This works, but it is a hack that will fall to pieces if I run into a similar situation with multiple tooltips (for example). Has anyone been able to handle this in a better way? Am I not setting this spec up correctly?
When using bigcommerce before, we were able to choose whether or not to have a pop up or take the user to the cart whenever they clicked the "Add to Cart" button. Does anybody know if this feature has been taken out by BigCommerce or where I can find that setting now? Thank you!
Do you know if you're using the Stencil or Blueprint framework?
If you're using blueprint, you can go to "Store Setup > Store Settings > Display" and choose "Take Them to Their Shopping Cart".
If you're using stencil, that feature is hidden and you have to do customization for it to work. If your products don't have any options, you can follow the instructions on this page: https://support.bigcommerce.com/articles/Public/How-can-I-add-a-product-to-the-cart-with-a-link/#add-to-cart.
However, if you have options, this won't work because it doesn't updated the sku in the url. What i did to get this to work was to edit the product-details.js
First you need to download the theme in order to edit the js file. Then, starting on line 234, you'll see the following code:
// Open preview modal and update content
if (this.previewModal) {
this.previewModal.open();
this.updateCartContent(this.previewModal, response.data.cart_item.hash);
} else {
this.$overlay.show();
// if no modal, redirect to the cart page
this.redirectTo(response.data.cart_item.cart_url || this.context.urls.cart);
}
Directly under the comment, add /* and then go down one line under the closing brace of the else statement (}) and add */ to close the long comment. The code will now look like this:
// Open preview modal and update content
/*
if (this.previewModal) {
this.previewModal.open();
this.updateCartContent(this.previewModal, response.data.cart_item.hash);
} else {
this.$overlay.show();
// if no modal, redirect to the cart page
this.redirectTo(response.data.cart_item.cart_url || this.context.urls.cart);
}
*/
this.redirectTo(response.data.cart_item.cart_url || this.context.urls.cart);
Let me know if this helps!
Just FYI I went through a similar problem and found that the "Ask a Design partner" forum gave me my answer. The answer I used was from this post:
https://support.bigcommerce.com/s/group/0F913000000HLpWCAW/ask-a-design-partner
But to help I will pull out what they said:
"If you want to remove the popup, you will need to edit the theme files, navigate to the templates/components/products/product-view.html file, and comment out (or remove )this code at the bottom of the file:
<div id="previewModal" class="modal modal--large" data-reveal>
<a href="#" class="modal-close" aria-label="{{lang 'common.close'}}" role="button">
<span aria-hidden="true">×</span>
</a>
<div class="modal-content"></div>
<div class="loadingOverlay"></div>
</div>
Hi You need to do this :
1. Login to admin-end then go to store setting
2. From top tabs choose display tab
3. Find the 'Add to Cart' Action choose what you want pop window or redirection to the cart page.
4. hit the save button.
Check image:
Thanks
In safari,
i had a simple edtable div with a input button, on deletion of the element (backspace or delete), caret moves to center of edtiable div with some inline styled p tag with text-align:center and inline style "color"
<div class="editable" contenteditable="true">
<input type="button" value="inputBtn" />
</div>
http://jsfiddle.net/VqCvt/
its a strange behavior observed only in safari.
Over a year after this post, this issue is still a problem. This issue is directly tied to the input tag. Once an input tag has been in a contenteditable element, Safari will attempt to make the style of the text similar to the input (I confirmed this by observing that the resulting style was different for type="text" vs type="button"). It's a very strange bug. I have found a workaround that works, but it's pretty absurd. My fix is basically to test when my main input no longer has content, and then removing the element, and re-adding it
<div id="content-wrapper">
<div contenteditable="true" id="content" role="textbox"></div>
</div>
and in my "keyup" listener, I put the following code
// Grab main editable content div
var element = document.getElementById("content");
// Check empty state conditions. These work for me, but you may have your own conditions.
if (element.getElementsByTagName("input").length == 0 &&
element.innerText.trim().length == 0) {
// Grab parent container
var elementContainer = document.getElementById("content-wrapper");
// Add a copy of your element to the same specifications. If you have custom style attributes that you set through javascript, don't forget to copy them over
elementContainer.innerHTML = '<div contenteditable="true" id="content" role="textbox"></div>';
// Re-focus the element so the user doesn't have to click again to keep typing
element = document.getElementById("content");
element.focus();
}
What this code does works for my case because input is the only elements which are allowed in my code other than text nodes and <br>, so I first check to make sure there are no input elements, and then make sure the innerText is empty (this indicates no content in my case, you may have to customize your conditions for the "empty" state). Once the empty state is confirmed, I replace the old div with a new one to the same specification, and the user never notices. A very strange issue with a hacky workaround, but I think contenteditables.
You could probably also strip out the HTML that Safari is generating, but for my case this solution is much simpler. I hope this helps someone in the future.
<div class="my_account_module_content">
<h3 class="my_account_module_content_title">
Mi Dirección 1
<br>
<span>Predeterminada</span>
<div class="selectCard_left">
<input id="17390233" class="default_shipping_address" type="radio" name="address" checked="true">
<span>Seleccionar como tarjeta predeterminada</span>
</div>
this is the HTML code
If radio button selected is true then print the class span value?
please help me..
In Java, this would do it:
if(driver.findElement(By.id("17390233")).isSelected()){
System.out.println(driver.findElement(By.xpath("//input[#id='17390233']/following-sibling::span[1]")).getText());
}
If the radio button is selected, then the text will show. If you want to use the text somewhere, I suggest you put it in a string instead:
String spanText = driver.findElement(By.xpath("//input[#id='17390233']/following-sibling::span[1]")).getText();
Hope this answers your question.
EDIT: Here is an update of other ways to try.
If the className default_shipping_address is unique (e.g. not used anywhere else on the page), you may try locating the element by className:
if(driver.findElement(By.className("default_shipping_address")).isSelected()){
System.out.println(driver.findElement(By.xpath("//input[#class='default_shipping_address']/following-sibling::span[1]")).getText());
}
If that class is not unique, maybe the DIV's className selectCard_left is?
if(driver.findElement(By.className("selectCard_left"))){
System.out.println(driver.findElement(By.xpath("//div[#class='selectCard_left']/span[1]")).getText());
}
If none of the classNames are unique, a complete xpath expression is required. If you still are unable to get that text, I refer to reading up on how to use xpath: http://www.w3schools.com/XPath/xpath_syntax.asp
I hope that you find this information useful.
I have an application developed in Liferay. It has a data grid which has pagination.
When ever i open the data grid for the first time Prev is not clickable and Next is clickable. Below is the html code for the same.
<section class="paginationArea">
<div id="pager">
<span id="prev" class="disablehyperlink"><< Previous Page</span>
<span id="next" class="enablehyperlink">Next Page >></span>
</div>
</section>
Please let me know how can i check whether that text is clickable or not??
You can always check it for a class attribute (assuming class change will cause enabling the button). You didn't specify a language so I will show you example in Java.
Element prevButton = driver.getElement(By.id("prev"));
if(prevButton.getAttribute("class").equals("disablehyperlink") {
// do something
}
or you can try WebDriver#isEnabled method but I don't know whether it will work because it depends how are you disabling the button
if(prevButton.isEnabled()) {
}
Generally, all the <a> anchor Tags will be clickable.
In your case, Prev is not clickable. Because prev [previous in paginator] is hidden; where else Next [next in paginator] is not hidden(enabled).
Use Firebug [firefox add-on] to track all the hidden anchor tags | href links and code accordingly.