Get product name from parent element - javascript

Here I am trying to get the product name in alert box when the "Buy now" button is clicked. Also I need to maintain the onclick event of the button for which I have placed the code in jquery.
<h2 class="product-name">Sample Product Name</h2>
http://jsfiddle.net/LkKbz/
The approach that I did is giving me blank alert box might be because I am calling parent element. Please help
Please note that here I don't want the alert when product name or image is clicked. Just want on button

Change this:
var text = $(this).parents(".item").find('.product-name').text();

here is answer
var text = $(this).parents('li').first().find('.product-name').text();
http://jsfiddle.net/LkKbz/1/

Related

Search field not clear for another list popup

I am using Devextreme module for a dxlist popup. I am able to open the popup and to show the list of items with a search input field but I have one more list popup. When I search in the first popup and close it, open the second popup, the search field text is not cleared.
<dx-popup class="popup popupMore" [width]="500" [height]="500" [showTitle]="true" title="{{popupdata.name}}" [dragEnabled]="false"
[closeOnOutsideClick]="true" [(visible)]="isVisible">
<div class="list-container">
<dx-list #list [dataSource]="popupdata.data" [height]="400" [searchEnabled]="true"
searchMode="contains" >
<div *dxTemplate="let data of 'item'">
<div>{{data}}</div>
</div>
</dx-list>
</div>
</dx-popup>
The above code is used in the html. Same popup will open for another two event.
Example:
I have three buttons. When we click on each button we need to open the same popup with different data. When we click on the first button, this list popup will open with a search option. I searched in the search field and closed the popup. Then clicked the second button, same popup will open with new data but the search input field is not cleared.
Could anyone please help me, how to clear the search field for the next list popup that opens?
Thanks in advance.
As mentioned in the comment above, the cleverest approach I could think of is registering the dxPopup's onShown event and, when fired, you may either:
Reset the list.instance searchValue option (using this.list.instance.option('searchValue','');).
Assign a two-way binded value to the dx-list component and reset that value. For that case, specifically, add [(searchValue)]="_searchValue" to the html dx-list tag, and add this._searchValue = '' in the dxPopup's onShown callback.

Using capybara to select a button without an id or value

I don't know how to click on a button that has no id or value.
I've already tried using the xpath and selector paths but neither worked for me.
<div class="button js-vehicle-section-next full-width mb1">Next Step: Select a Repair</div>
Is the code for the button on the site. My current attempts are.
find('js-vehicle-section-next').click
click_on('js-vehicle-section-next')
find_all(:xpath, "//*[normalize-space(text())='Next Step: Select a Repair'").first.click
The expected result is that the button will be clicked
click_on clicks link or button elements so it’s not going to work here because you are trying to click a div. Instead you can just use a valid CSS selector and call click on the returned element
find(‘.button.js-vehicle-section-next’).click
If you didn't have a specific class for the next "button" and you needed to do it by the contained text you could do
find('div.button', exact_text: 'Next Step: Select a Repair').click

how to toggle one button and one button only in jquery

I am trying to toggle one button using jQuery. So far, all of the information I have found is to toggle a paragraph, for instance, using another button, but I want to make this button appear and reappear when it is clicked. I also want to increase the "score" when the shown button is clicked, and decrease the "score" when the button reappears (after the user clicks it). Does anyone know how to accomplish this?
I have a series of buttons, but I will link the code for one of them for now.
HTML:
<li><button id="active1" onclick="disappear1()"></button></li>
JavaScript:
function disappear1() {
$("#active1").toggle();
currentStreak++;
document.getElementById("streak").innerHTML="current streak: " + currentStreak;
}
I know that the problem is that when I click on the button, the button disappears so there's no way for me to find it again. I want there to be a way to still reference it.
The .toggle() function changes the targeted element's CSS display property to hide/show the element. When the element is hidden it is still in the DOM and can still be targeted with same method as when it's visible.
The example below toggles an element with an ID of 'active1' when a button is clicked. Even when the 'active1' element is hidden it is still referenced and made visible again.
$('#button1').click( function (){
$('#active1').toggle();
});

How to change checkbox to image for deleting elements

I have a shopping cart form where the user can currently check a box beside the item they wish to remove and click a button to submit.
I want to change it so that there is a trash can icon instead of the check box that removes the corresponding shopping cart item when the image itself is clicked.
Here is the Jquery for the checkbox function:
function RemoveShoppingCartItem(rcuid, sFormName)
{
var eForm = document.getElementsByName(sFormName)[0];
document.getElementById('rcuid').value = rcuid;
eForm.action += "&Action=REMOVE";
eForm.submit();
}
And the code for the checkbox:
<input type="checkbox" value="9681" name="rcuid">
But the value changes for each box.
What exactly do I need to change to get the result I need?
Don't use a checkbox, use a link with an CSS image background. Hook up the event handler to the link and you can then change CSS class names on click to swap the image within your function.

How to stop input from blurring within directive

I have a custom directive that should have the following functionality:
-display button upon load
-show input box and expand box when button is clicked
-show clear text icon when user types into text box
-clear text when icon is clicked and re-focus on text box
-minimize text box and show button when user clicks away from text box and clear text icon
Here's what I have so far: http://jsfiddle.net/Z6RzD/161/
My problem is that when a user clicks on the clear icon, the text box's blur function is fired and the box loses focus.
I tried creating a scope variable in my controller that will let me know which element has been clicked on. I then tried to share this variable in my directive's blur function but it comes up undefined.
$scope.clickElem;
$document.bind('click',function(e){
$scope.clickElem = e.target;
$scope.$apply();
console.log($scope.clickElem);
});
Any ideas on how to fix this? I appreciate any help.
If it's ok for you to use HTML5, you can just replace <input type="text"> with <input type="search"> and get the clear behavior for free. Here's your jsFiddle modified to do that.
try this..
var scope;
$('ELEMENT').click(function(e){
scope = e.target;
});
that should most def. not return undefined.

Categories

Resources