I have a strange problem with the X-editable plugin for twitter-bootstrap.
What i am trying to do is trigger the 'Edit' popup screen on a button that is on the screen.
The problem is that the 'popup' div only stays on the DOM for less then a second.
I will put some example code below. I am not sure if this has something todo with the plugin/ or bootstrap.
$(document).ready(function() {
$('#questionDescription').editable();
$('.descriptionEditButton').on('click', function(e) {
$('#questionDescription').editable('toggle');
});
});
<a href="#" id="questionDescription" data-type="textarea" data-pk="1" data-placeholder="stackOVerflowRocks" data-title="Stack" style="display: inline;">
foo bar
</a>
<i class="btn icon-edit descriptionEditButton pull-right"></i>
What makes it even stranger is when i run the 'toggle' in chrome console the popup is shown.
Thank you!
Have you tried setting toggle to manual? Something like :
$('#questionDescription').editable(
toggle: 'manual'
);
Related
Hello Folks both my buttons work when used individually, but when I use button A to click button B using Java script it does not work. I know button A works becuase the alert I added to the script pops up. But it won't invoke button B. I have tried it using classes and ID. Help Appriciated.
//Button A
<a class="send-btn"> <?php echo $buttontext?> </a>
//Button B
<a id="open-modal" class="openmodal-btn" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#modal">
// I have tried adding these in the js Script during testing.
$("#openmodal-btn").click();
$('.openmodal-btn').click();
<script>
$(document).ready(function(){
$('.send-btn').click(function(event){
$('.openmodal-btn').trigger('click');
});
});
</script>
Removing this link below which stood above all my Scripts at the bottom of the page resolved this issue as I had the same link duplicated in the page header.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
And thanks to Swati for helping with troubleshooting!
I am using this jquery plugin (Jquery Popup Overlay)
I have finally managed to have it working as expected, apart from the last step.
Once the pop up opens, there are 2 buttons. One is to close the window and one to progress with selected action(delete something in DB in this case).
I have this link to activate the window:
<a class="initialism basic_open btn btn-xs btn-danger" href="?page=suite-admin&action=delete-suite&id=5&site_id=1">delete suite</a></td>
This is the script to show the window:
$(document).ready(function () { $('#basic').popup({
escape: false,
blur: false, });});
What I need is , when pop up opens and i click on delete button this will progress with whatever is in .
I do not know much about Java, but i do really like this feature on my project.
Any help will be appreciated.
Thank you
Edit:
Forgot the actual pop up:
<div id="basic" class="well" style="display: none;">
<h4>Basic</h4>
<p>The dialog can be closed by pressing the <kbd>Esc</kbd> key, or by clicking on the background
<br> outside the content area, or by clicking on the Close button.</p>
<button class="basic_close btn btn-default">Close</button>
<button class="basic_close btn btn-danger">Delete Suite</button>
I think two possible answers (there are certainly more) to your problem can be found in this stackoverflow question: [How to create an HTML button that acts like a link?
To sum it up: One way would be to just use an <a> tag instead of <button>. That means you write:
<a class="basic_close btn btn-danger" href="?page=suite-admin&action=delete-suite&id=5&site_id=1">Delete Suite</a>
I'm trying to get bootstraps popover working on a glyph icon within a span, but it's just not working.
In my html:
<span class="glyphicon glyphicon-exclamation-sign" data-toggle="popover" tabindex="0" title="Offer Details" data-content="Some stuff goes here"></span>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
In my JS:
$(document).ready(
$(function () {
$('[data-toggle="popover"]').popover({
placement : 'top',
trigger: 'focus click',
})
})
);
When I click on the glyph, I can see in the console that the span gets appended with aria-describedby="popover41686" and when I click away it gets removed. Thus the functionality of the popover seems to be working, just that my actual popover isn't being displayed.
I implemented a similar thing with Bootstrap's tooltips prior to this and had no issues. Could it be something to do with the span, as I found info saying the tabindex needed to be set because a span isn't normally focusable?
I am using this component in my example, but when I click on my icon, my popover is not displayed.
When I click on an icon it should display the popover but currently, it is not display anything.
Here is my code (and this is the CodePen):
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>hhh</div>
</script>
First, from my own experience I recommend using angular-bootstrap for things in that scope.
Second, if you really want it to work, make sure the bootstrap scripts are correctly loaded. Then try to listen to the click event with ng-click on the button and trigger the popover on it.
Here is the code to achieve what you want.
Here is the plunkr : https://plnkr.co/edit/fBPJ8LfOFGlgcCHvRWSM?p=preview
Regards,
scope.popover = function() {
$("[data-toggle=popover]").popover({
html: true,
content: $('.popper-content').html(),
placement: attrs.popoverPlacement
});
};
Here is the html:
<button type="button" popover-placement="bottom" class="popper btn-link" popover ng-click="popover()" data-toggle="popover">
4 Peoples
</button>
Regards,
I'm using Bootstrap3 and I want to create popover to show in on pages or document has loaded then show popover on the each html element without using hover,click, focus But it worn't work as what I want.
And How can I create disable button on popover when popover pop up after pages loaded which easy for me click hide pop up back?
<script type="text/javascript">
$(document).ready(function(){
$(".popover-examples a").popover({
placement:'auto',
title : 'a',
animation:true,
trigger:'hover',
content:'a',
// delay: { show: 0, hide: 5000000 },
container:'body',
viewport:'#viewport',
template:'<div class="popover"><div class="arrows"></div><input type="button" class="btn btn-warning btn-sm hide-popover" value="Hide"><h3 class="popover-titles">popver-title</h3><div class="popover-contents">contina;lkjdfaksljdf;lajsjdf;asdjfaldsf</div></div>',
});
});
$(".hide-popover").click(function(){
$("button.popover-examples").popover('hide');
});
</script>
here is html element
<td class="popover-examples">
<a data-toggle="popover" href="<?php echo base_url('invoice/edit');?>">
Received Date
</a>
</td>
what should I correct with those above code?
Please help
In your popover setting, the trigger is on hover.
You can change it to "manual", and trigger it using:
$(".popover-examples a").popover("show");