before all thanks for reading.
So... I have a problem with bootstrap popover. I have tried many configurations with no success, so I'll try to explain the problem as clearer as I can.
I have multiple elements within bootstrap columns and when the user click on one of them a popover comes out with a form in its popover-content.
Every form is different due to its attributes, you can choose different options in the popover and then send the form.
Untill this point everything is fine, the popover works correctly. The thing is that when I click a second time over the same element in order to hide the popover, popover hides but not the title and the next popover I click content is empty, I mean, popover content stop working, it only show titles.
I think I'm missing something but I can't find out what.
The code that load the content:
$("[data-toggle=popover]").popover({
trigger: "click focus",
template:'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3>⊗<div class="popover-body"></div></div>',
content: function() {
var $html = $(this).parent().find(".prod-popover").eq(0).html();
return $(".popover-content").html($html);
}
});
I've tried with trigger focus, click, manual and a mix of them with the same results.
I have also tried changing the wrapper .popover-content with #popover-content.
Code to hide popover:
$(document).on("click", "a.popover-close", function(e) {
e.stopPropagation();
$(".popover-content").popover('hide');
return false;
});
Another for hiding found here in stack overflow
$(document).click(function(e) {
if ($(".popover").has(e.target).length == 0 || $(e.target).is(".close")) {
$("#popoverId").popover("hide");
}
});
Another one:
$("[data-toggle=popover]").on('click', function (e) {
e.preventDefault();
e.stopPropagation();
$("[data-toggle=popover]").not(this).popover('hide');
});
HTML:
<div class="col-md-6 col-sm-6 col-xs-12 bt-border k-item" data-placement="right" data-toggle="popover" data-title="Whatever" data-container="body" data-html="true">
<div class="hidden prod-popover">
<form class="cart" role="form" method="post" action="">
<div class="form-group">
<label>Label</label>
<textarea rows="2" placeholder="PLACEHOLDER"></textarea>
</div>
<div class="form-group">
<div class="btn-group pop-quantity" role="group">
<input type="text" value="1" min="1" step="1">
</div>
</div>
<button type="button">Send<button>
</form>
</div>
<div class="row">
<div class="col-md-2 col-sm-2 col-xs-2"><img src="SRC" alt=""></div>
<div class="col-md-8 col-sm-8 col-xs-8">
<h4 class="no-pad-bt">Whatever</h4>
<p class="no-pad-bt">Description</p>
</div>
<div class="col-md-2 col-sm-2 col-xs-2 text-right">
<p>Price</p>
</div>
</div>
Any help will be highly appreciated.
Related
I have a screen like this:
So what I am trying to do is when the CLICK button is clicked, return the image on the right and show the result box (which is div).
So the section is like this:
<section class="weight__calculations">
<div class="container calculations__content">
<div class="row contents">
<div class="col-lg-2 col-md-12 col-sm-12"></div>
<div class="col-lg-4 col-md-12 col-sm-12 calculate__content">
<form>
<div class="form-group">
<div class="calorie__button__area">
<button
type="submit"
class="button-secondary button__calculate"
>
HESAPLA
</button>
</div>
</form>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 calculate__content">
<img
src="./assets/img/calculate.png"
alt="Weight Calculation Image"
/>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 calculate__content__result">
<div class="result__box">
<div class="title">RESULT</div>
</div>
</div>
</div>
</div>
</section>
And I hided calculate__content__result in css:
.calculate__content__result {
display:none;
}
But I dont know how to show it again and display none picture with the return effect.
Thanks for your help.
check this out it may help in your needs... Same time you toggle the class name of image too.
css
.calculate__content__result_show{
display : block ;
}
jquery
$(document).on('click','.click',function(){
$('.calculate__content__result').toggleClass('calculate__content__result_show');
});
javascript
var clickBtn = document.querySelector('.click');
var result = document.querySelector('.calculate__content__result');
clickBtn.addEventListerner('click',function(){
result.classList.toggle('calculate__content__result_show');
});
Add an ID in the element you want to hide/show
<div id="imageDiv" class="col-lg-6 col-md-12 col-sm-12 calculate__content">
and add functions to hide/show with javascript at the the begining of the html
<script>
function showImage(){
document.getElementById("imageDiv").style.display = "block";
}
function hideImage(){
document.getElementById("imageDiv").style.display = "none";
}
</script>
Call the functions when needed, for example:
<button onclick="showImage()" class="button-secondary button__calculate">
Click
</button>
I have implemented dynamic components in Angular and whenever a dynamic component is loaded its corresponding jQuery is not working. Same jQuery script is working elsewhere.
This is where my dynamic component loads:
<div class="listing-table-outer" [#myAwesomeAnimation]='state'>
<app-dynamic-question [componentData]="componentData"></app-dynamic-question>
</div>
Below html will be loaded dynamically.
<div class="panel panel-default " >
<div class="panel-body" >
<h1>{{textLabel}}</h1>
<p>{{textHeader}}</p>
<div class="form-inline display-one" role="form">
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="">
</div>
<div class="learn-more magtop10">
<a> <i class=" glyphicon glyphicon-play"></i> Learn More</a>
</div>
<div class="display_advance">
<div class="well">
<p>{{textFooter}}</p>
</div>
</div>
<div class="bs-component">
Clear
Skip
Continue
</div>
</div>
</div>
I have written this script
$(document).ready(function(){
$('.learn-more').click(function() {
$('.display_advance').slideToggle('1000');
$("i", this).toggleClass(" glyphicon-play glyphicon-triangle-bottom");
});
});
I have checked this script and it is working perfectly elsewhere.
Please let me know why this is happening.
As you already stated yourself, the html is loaded dynamically. That means that this html is not yet there when $(document).ready(function() { ... }) is executed. So you're trying to add a click event to an element that doesn't exist at that moment.For this exact situation there's a thing called event delegation.
Instead of doing
$('.learn-more').on('click', function() { ... });
you would do
$(document).on('click', '.learn-more', function() { ... });
This way any elements below document with class learn-more, now or in the future, will get this click event.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have encountered a genuine problem that I cannot solve :x
I have a function that adds class "selected" to div which I click and changes inner html of button to ID of clicked div. However when I double click same div it removes selected class and button's inner html is not changing.
I wish if you could help me make button inner HTML set to something else when unselecting or make it impossible to unselect once selected div.
Here's my code:
$(function(){
$(".panel-kol").click(function() {
var mid = $(this).attr('mid');
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
$('.selected').removeClass('selected');
$(this).addClass('selected');
}
document.getElementById("id").innerHTML = mid;
});
});
HTML is PHP-generated so I post one example from page' source
<div class="col-md-3">
<div class="panel panel-kol" mid="2">
<div class="panel-body profile white">
<div class="profile-image"><img src="../assets/images/users/female.svg" alt="Osoba"></div>
<div class="profile-data">
<div class="profile-data-name" style="font-weight: bold;">Agata Jacynów</div>
<div class="profile-data-title">Lekarz</div>
</div>
</div>
<div class="panel-body">
<div class="contact-info text-center" style="margin-top: -20px;">
<p>
<small>Telefon komórkowy</small>
<br/>666333999
</p>
<p>
<small>Od - Do</small>
</p>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" value="07:00:00"/>
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" value="14:00:00"/>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
</div>
That's button I want to change:
<div class="col-md-3">
<button id="id" class="btn btn-block" style="font-weight: bold; cursor: default;">ID</button>
</div>
Any help would be greatly appreciated!
Just place it in the exisintng if and set it to whatever wanted whenever you unselect the div.
$(function() {
$(".panel-kol").click(function() {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
$("#id").text("ID"); // change the text here as you like
}
else {
$('.selected').removeClass('selected');
$(this).addClass('selected');
$("#id").text($(this).attr('mid'));
}
});
});
You could try catching double click event and prevent starting the previous function.
$(".panel-kol").on("dblclick", function(e){
e.preventDefault();
return;
});
I am designing a webpage with 2 materialize modals. I want to set dismissible:false for both of them, but it only seems to work with one. The documentation is pretty vague on how to specify which modal you are setting options for, and right now it only works with the first modal. Here is the code where I set the dismissible option to false:
$(document).ready(function () {
$('.modal-trigger').leanModal({
dismissible: false
});
});
And here is the html for the modals:
<div class="row">
<div id="forgotPasswordPIN" class="modal col s10 offset-s1 m8 offset-m2 l6 offset-l3">
<form name="emailForm" ng-submit="submitForm()" novalidate>
<div class="modal-content">
<h4>Forgot PIN/Password</h4>
<span class="flow-text">Send PIN and password to: </span>
<br />
<br />
<div class="input-field">
<input required id="email" type="text" style="font-size:175%;" name="email" ng-model="email" ng-minlength="2" ng-pattern="/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*#(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/"/>
<label for="email" class="flow-text">Email</label>
<div ng-messages="emailForm.email.$error">
<div class="red-text" ng-message="required">This field is required</div>
<div class="red-text" ng-message="pattern">Invalid Email</div>
</div>
</div>
</div>
<div class="modal-footer">
Send
<a class="btn disabled" ng-hide="emailForm.$valid">Send</a>
Cancel
</div>
</form>
</div>
</div>
<div id="bottomModal" class="modal bottom-sheet">
<div class="modal-content">
<h4 id="successTitle">Email Sent</h4>
<p id="successContent">
Your password will be sent to <span ng-bind="email"></span>.<br /> Please allow up to 10 minutes for the email to be received.
</p>
<h4 id="errorTitle">Invalid Email</h4>
<p id="errorContent" class="red-text">
Sorry, we do not recognize that email. Please try again.
</p>
</div>
</div>
How do I specify which modal I am setting options for? Thanks in advance.
EDIT: My main issue is that I am opening the second one programmatically, and not with an anchor tag. In Materialize documentation the only way it shows to set options is according to the trigger, or anchor tag. So I may not be able to do it without using an actual trigger.
I know this was asked a while ago, but maybe someone else is having similar issues.
If you use the modal options, as listed by the OP, inside the function you use to open the modal it will work.
For example:
$('#bottomModal').openModal({
dismissible: false
});
you just have to initialize both modals in different calls, using different classes. Doing that you can use different parameters to each one.
$(document).ready(function () {
$('.modal-trigger1').leanModal({
dismissible: false
});
$('.modal-trigger2').leanModal({
dismissible: false
});
});
//Them:
<a class="modal-trigger1 waves-effect waves-light btn" href="#forgotPasswordPIN">Modal</a>
<a class="modal-trigger2 waves-effect waves-light btn" href="#bottomModal">Modal</a>
I'm trying to use checkboxes with categories at the top of my page as filters to display the lower content of the page (which gives specific options as buttons under each category). The lowers divs should only be displayed if the checkbox is checked; I set the display as none for the div in the CSS. However, my code doesn't work..
I've tried using different syntax for the JS that I found online, and declaring the js in different places in my HTML, but nothing so far has worked.
HTML
<input type="checkbox" id="supportcheck"> Support
<div class="row" id= "support">
<h5>Support</h5>
<div class="large-6 medium-6 columns">
<div class="callout panel" >
<div role="button" tabindex="0" class="small radius support button">Managed</div>
</div>
</div>
<div class="large-6 medium-6 columns">
<div class="callout panel">
<div role="button" tabindex="0" class="small radius support button">Self-Managed</div>
</div>
</div>
</div>
JavaScript
$('.supportcheck').change(function () {
if ($(this).attr("checked"))
{
$('.support').fadeIn();
return;
}
$('.support').fadeOut();
});
supportcheck is an id not a class. Use
$('#supportcheck').change(function () {
to add the event handler to the input.
try this instead:
$('#supportcheck').change(function () {
if ($(this).is(':checked'))
{
$('#support').fadeIn();
return;
}
$('#support').fadeOut();
});