Here is how it should work.
I have an application where you have to select a sport activity.
At the moment I have a function setActivityType(String: ActivityName) that is going to set the value in my database. Now what I want to do is when I click on that button is should highlight the clicked button.
I want to do this my searching in the dom the ActivityName passed in before and select it so I can change the style of it.
This is how each sport button is made :
<div class="type" onClick="setActivityType('Volley')">
<i class="fas fa-volleyball-ball"></i>
<p>Volley</p>
</div>
So how could I search for the <p>Volley</p> value?
I figured out to do this with event.target that will get all the dom information and I figured out how to manipulate it afterwards.
Related
I'm not sure if I've got the title right here, if someone can recommend a better title I'll be happy to change it.
I have website that shows a list of products you can purchase, with a quick "add to wishlist" button. When you hover over the button, the tooltip says "add to wishlist", and when you click the button, the item is added to the wishlist.
The problem is, now that the item is in the wishlist basket, hovering over the button should say "remove from wishlist" but it still says "add to basket".
I'm trying to update this.
My code for displaying the icon is like this, using the data attribute.
<div class="wishlist-status js-wishlist-icon" data-tippy-content="#Html.Translate("ADD TO WISHLIST",Context)">
<partial name="~/Views/Shared/Components/SVG/_IconHeart.cshtml" />
</div>
I have a function that controls this functionality. My thinking was that I update this data value, and it will work. So I did this
var el = document.querySelector('.js-wishlist-icon');
el.setAttribute('data-tippy-content', 'remove from basket');
It does actually work. If I inspect the element, once I click the button, the value of it DOES say "remove from basket" in the markup, its just that the tooltip doesn't say that. It still says ADD TO WISHLIST when hovering. I think this is because its set when initialized, but I cant seem to update it.
I think I need an "updateTooltip" function. I think this website was built using Bootstrap, but I dont know if this functionality is Bootstrap or not. I've tried looking at https://getbootstrap.com/docs/4.0/components/tooltips/ but I'm not convinced anything there will help me.
Does anyone have any ideas? Thanks
I think I encountered a similar problem. I have an input field that I can edit text. And I want the tooltip shown (hovered) to also be updated whenever I change the input field.
I am using bootstrap 4.3.1 tooltip.
What I initially did:
Make sure title attribute and data-toggle attributes are present on the input element.
Bind tooltip to input element itself.
Make an event listener for input event so that title is updated with the current input field value.
I encountered a couple of problems such as
Window custom tooltip also appearing and messing with display of the bootstrap tooltip.
Like yours, the displayed tooltip is always the same as the original one. I set the initial title attribute to some test string and it was always the one shown even if I edited the input. Note that I also confirmed that my code properly changes the title attribute on input event.
What I did after:
Wrap the input element with parent div. Add the data-toggle and title attributes here.
Bind tooltip to this parent.
On input listener callback function, I also added code to update the attribute "data-original-title". It seems to be the basis for whatever is displayed on the tooltip and I am not sure as to why it is not updated.
Initial code:
A. html
<input id="input_field" title="">
B. Javascript/Jquery
$('#input_field').attr({
"data-toggle": "tooltip",
"title": ""
});
$('#input_field').tooltip({
placement: 'auto',
trigger: 'hover',
title: 'Fallback tooltip display'
});
$('#input_field').on('input', function(){
$('#input_field').attr("title", $().val('#input_field'));
});
Code after:
A. html
<div>
<input id="input_field" title="">
</div>
B. Javascript/Jquery
$('#input_field').parent().attr({
"data-toggle": "tooltip",
"title": ""
});
$('#input_field').parent().tooltip({
placement: 'auto',
trigger: 'hover',
title: 'Fallback tooltip display'
});
$('#input_field').on('input', function(){
$('#input_field').parent().attr("title", $('#input_field').val());
$('#input_field').parent().attr("data-original-title", $('#input_field').val());
});
I am currently building a site where I prefered to use a div element as a checkbox.
If selected the checkbox class is toggled using javascript.
Heres the html.
<div class='col span_1_of_6 menuGroup'>
<div class="circl3" style="background-image:url(images/icons/'.$icon.') background-repeat:no-repeat;"></div>
<p class='menuGroupName'>$items</p>
</div>
$icon (an icon for the item) & $items (item name) are php to fetch from mysqli db. I originally used entire html in php echo. But, for better reading I posted like that.
Here's the javascript.
$(".menuGroup").click(function() {
$(this).toggleClass("btnOn");
});
Here is the div element in 2 states. Selected and Not Selected.
http://postimg.org/image/5sk0z4tgj/
WHAT I WANT is the <p> element name to be submited to the next page when i click the Submit Button
And is there is a better alternative to this method?
Make hidden checkbox and add onchange handler to change state of your pseudo checkbox.
Hidden checkbox will submit to the next page.
OR
See the CSS3 only examples how to make it with out javascript.
You can see every element and pick up the selected ones and send the response
$('.menuGroup').each(function() {
if ($(this).hasClass('btnOn')) {
// Save element to send
}
});
i am working on a calendar and i have a list of calendars, each one having its own id.
<ul>
<li ng-repeat="calendar in calendars">
<em>{{calendar.calendar_name}}</em>
<a ng-click="deleteCalendar({{calendar.calendar_id}})">Delete</a>
</li>
</ul>
Now this deletes me a calendar. But now i want to create a custom overlay to ask me "Are you sure you want to delete this calendar?" and a Yes and No buttons. Is there an easy way to do this without using the confirmation standard message that javascript provides ?
You can simply create a hidden div that's styled the way you want (probably fixed positioning), then have a function show it when the user clicks the delete button. Then the custom confirmation button in there can reference deleteCalendar().
A confirmation is not bing displaye after all validation has passed, instead it is showing a validation message stating no students have been selected to add even though I have done this. How can I get the confirmation to be displayed?
Here is an application you can use to see and use for yourself:APPLICATION
Select a course from drop down menu
In Avialable Students to Enrol box you will see list of students. Select a student and click on the Add button underneath and you will see that student added into the box underneath.
Click on the Submit Students button at the bottom and it displays the validation message saying you have no selected a student to add to course, but you have done this so the confirmation should appear. This is the problem
The jsfiddle showing the whole code for this is here:
http://jsfiddle.net/PhWbm/3/
You are checking for children of an element with the ID courseadd while the ID you should be looking at is studentadd. Try changing either the ID of the select or the selector.
On click an label an combo box should appear...
please check http://guruji.com/en/local.html
on clicking near mycity the label changes into combobox (dropdown list)..how to do it.
You can use the jEditable plugin for jQuery to accomplish this.
simple. you need to have two span element and play with js, css
<span style='display:block' id="click me">
<a href="#" onclick="javascript:document.getElementbyId('dropdownspan').style.display=hidden" select me</span><span style='display:hidden' id="dropdownspan">
<select name="test"><option value="1">one</option></select>
</span>
Clicking that link simply hides the original link and makes the "cities" dropdown visible. The dropdown is already on the page, you just can't see it.