I have bootstrap tabs in bootstrap modal. When I open modal - it looks like tabs are working, because just the first div tab-content is shown and others are hidden.
But then I have a problem - when I click on tabs it fires shown event at my modal and in this event I'm loading contents of this modal. Because of this tabs are loading again and again and first tab stays always selected.
Modal documentation here: http://getbootstrap.com/2.3.2/javascript.html#modals
Tabs documentation here: http://getbootstrap.com/2.3.2/javascript.html#tabs
I initialize tabs like this:
<script type="text/javascript">
$("#modeTabs a").click(function (e) {
e.preventDefault();
$(this).tab("show");
});
</script>
Related
I have a main window which calls a modal bootstrap window after clicking a edit button.
After working in the modal window, I would like to execute a Oracle procedure, but it is closing my window.
So, I would like to know if there is any option to avoid closing bootstrap modal window after clicking a submit type button?
Thanks in advance.
Kind regards,
Francisco Mtz.
Cerrar
Generar Combinaciones
Actualizar
var partidos = document.getElementById('laluz_32quinielas_1prono_editmodal');
partidos.addEventListener('submit', function(e) {
e.preventDefault();
})
</script>
Tell me please, how to handle onclick action by ID. For example, i’ve something in hbs template:
<button id="myButton" {{action "myAction"}} >OK</button>
it has CSS:
button {color: "red";}
How to do two things by onclick action:
1. Set property to clicked object (only to clicked), eg to set CSS colour “green”,
2. Get some property of clicked (eg CSS colour), and console log or alert.
Thanks in advance!
You can connect the action to the "onclick" event of the button like this
<button id="myButton" onclick={{action "myAction"}} >OK</button>
And then the first argument of the action will be the click event, from which you can take the target DOM element.
Check out this example twiddle:
https://ember-twiddle.com/1d14560e0e979dbbdddbfee57c84601c?openFiles=templates.application.hbs%2C
I tried to hide the x on the upper right-hand corner of my modal dialog window using both css and JQuery but nothing owrks. I tries using dynamic action on page load:
$("button.ui-button.ui-corner-all.ui-widget.ui-button-icon-only.ui-dialog-titlebar-close").hide();
and to use css:
button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close
{
visibility: hidden !important;
}
for my inline css but neither worked, the x still shows up
The div where this button is showed is rendered in the parent page, so to get it in the modal page, you need to add "parent" in the beginning of your javarscript.
try this:
var button = parent.$('.ui-dialog-titlebar-close'); //get the button
button.hide(); //hide the button
I have a "Subscribe" modal form that opens when the users clicks on "Inscription"
and I wish that the data typed in it by the user disappears or the modal 'resets' the value when it's closed.
I tried multiple options but nothing worked.
Here is a link to a fiddle:
http://jsfiddle.net/0tekp47g/3/
solution:
http://jsfiddle.net/0tekp47g/29/
This should do the trick:
$('.modal').on('hidden.bs.modal', function () {
$(".modal input").val("");
$('.modal select').val("");
});
Try it on JSFiddle.
I'm using bootstrap popover in my app and I need to render an outlet inside it.
I have this nested route :
this.resource('pages', function(){
this.resource('page', { path: ':id' }, function(){
this.resource('edit', function(){
this.resource('images', function(){
this.resource('image', { path: ':image_id'}, function(){
this.route('edit');
})
});
});
});
});
When the user is here => /pages/1/edit/ when he click on an image it route to /images but render the {{outlet}} inside the popover like this :
<div class="popover-content hide">
{{outlet}}
</div>
This is my popover initialisation :
$img.popover({
html: true,
content: function() {
return $('.popover-content').html(); //need to have the outlet here
}
});
So far, it render correctly my outlet, but inside the images template, I have some button that modify the DOM and it doesn't update the html. Unless if I close and open the popover again I can see the modification.
Is it possible to render the outlet directly inside the code ? or is it possible to have my popover being updated ?
Thanks for the help.
See these links for an alternative approach to putting Ember stuff in Bootstrap popovers:
Bootstrap Popovers with ember.js template
https://cowbell-labs.com/2013-10-20-using-twitter-bootstrap-js-widgets-with-ember.html
Ember and Handlebars don't like this because it's basically copying the html content of a div and plopping it into another. But that html alone isn't everything that's needed. Ember is magic and there's lots of stuff happening in the background.
Your hidden div is real ember stuff, so let's try not to mess with it by calling .html() on it. My idea is to literally move the DOM itself instead.
first, modify your popover function call to always create this placeholder div:
content: '<div id="placeholder"></div>',
next, detach the content div from the dom in the didInsertElement of the view:
// get the popover content div and remove it from the dom, to be added back later
var content = Ember.$('.popover-content').detach();
// find the element that opens your popover...
var btn = Ember.$('#btn-popup-trigger').get(0);
// ... and whenever the popover is opened by this element being clicked, find the placeholder div and insert the content element
// (this could be improved. we really just want to know when the popover is opened, not when the button is clicked.)
btn.addEventListener("click", function() {
content.appendTo("#placeholder");
});
since the content div is immediately detached when didInsertElement is called, you can remove the "hide" css class from the content div.
edit: i tried this on my own project and it broke two-way binding. the controller updated my handlebars elements, but any two-way bound {{input}} helpers did not update the controller/model. i ended up using a single-item dropdown menu, and used this to prevent the menu from closing too quickly:
Twitter Bootstrap - Avoid dropdown menu close on click inside