I'm using bootstrap 3 to create a modal box. I want to have it autofocus on the input area. I tried with jQuery, but I don't know, what is the problem?
JavaScript:
$('#click').click(function () {
$('input').focus()
});
Here is a demo on JSFiddle
I've updated your JSFiddle. When using the bootstrap modal window there are a number of custom events you can use. one of those is shown.bs.modal wich runs after a modal is fully shown (and your input field is focusable). Remember that the event will be triggered on the modal, not on whatever opened the modal.
$('#myModal').on('shown.bs.modal', function () {
$('input').focus();
})
This may be hard code but add a Timeout function to focus it.
The fact is the modal isn't here yet so the browser can't focus an element in it.
$('#click').click(function() {
setTimeout(function(){
$('input').focus()
},500);
});
I am also use this code
<script>
function setFocusOnModal(){
$('#searchModal').on('shown.bs.modal', function () {
$('#q').focus();
});
}
</script>
Where #searchModal is modal div ID and #q is input element ID
Use this code in button
<button type="button" onclick="setFocusOnModal()">Open Modal</button>
Related
This is just a test of something I'm trying to accomplish here that is probably incredibly simple but is racking my brain. I've reviewed some of the closest matches already available here, but I wasn't able to make any of them work.
I'm trying to load content into a div using a button, like so:
<div class="load-container">
<button class="load-first">Load First</button>
</div>
<script type="text/javascript">
$(".load-first").click(function() { $(".load-container").load("/test-1.html"); });
$(".load-second").click(function() { $(".load-container").load("/test-2.html"); });
$(".load-third").click(function() { $(".load-container").load("/test-3.html"); });
</script>
And this actually works on the first try, but then, when "/test-1.html" loads, the next button doesn't work. This is what is in /test-1.html file:
This is the first one.<br>
<button class="load-second">Load Second</button>
Clicking the second button should load the next bit of content but it does nothing. Is the problem that the button is inside of the destination container div? I need a container div with buttons inside that can load new content in this way.
Because at the time the page is loaded, the "load-second" button was not there yet, thus the click() event was not registered to the button that is yet to come via the load() content, you need to attach your event after your buttons are created in the DOM, try the following:
<div class="load-container">
<button class="load-first">Load First</button>
</div>
<script type="text/javascript">
$(".load-first").click(function() {
$(".load-container").load("/test-1.html", function(){
// now load-second button is available, register the click handler
$(".load-second").click(function() {
$(".load-container").load("/test-2.html", function(){
// now load-third button is available, register the click handler
$(".load-third").click(function() { $(".load-container").load("/test-3.html"); });
});
});
});
});
</script>
I have a web application created in asp.net. In which, I would like to show a div (which is hidden initially) when a button is clicked with a css transition.
Additional Request:
The div that is shown on button click, will have some content added to it dynamically at run time.
How this can be done?
Here is a variation of the script from #geevee which I tend to use a lot, the DIV will slide up or down with a close and open option. Note the 500 is the speed of execution in milliseonds, you can change that to what ever suits you.
$(function(){
$('#BUTTON_ID').click(function(){
if ($('#DIV_ID').css('display') =='none')
{
$('#BUTTON_ID').html('Show DIV');
$('#DIV_ID').slideDown(500);
}
else
{
$('#BUTTON_ID').html('Hide DIV');
$('#DIV_ID').slideUp(500);
}
});//end .click
});//end onload
Hope this helps
Plain Javascript:
document.getElementById('BUTTON_ID').addEventListener('click', function(){
document.getElementById('DIV_ID').style.display = 'block';
})
Alternatively, with jQuery:
$(function(){
$('#BUTTON_ID').click(function(){ $('#DIV_ID').show() });
});
replace BUTTON_ID and DIV_ID with real element IDs.
UPDATE:
if you want the div to be shown with transition, i'd recommend to use jQuery as following:
$(function(){
$('#BUTTON_ID').click(function(){ $('#DIV_ID').fadeIn() });
});
notice the .fadeIn() method, which can be replaced with .show(), .slideDown() and more. jQuery is fun.
UPDATE 2:
in order to inject dynamic content into the div, do as following:
$(function(){
$('#BUTTON_ID').click(function(){
$('#DIV_ID').html('<b>Hello, dynamic content!</b>');
$('#DIV_ID').fadeIn();
});
});
hope that helps.
I have a div with a close button on it. The close button has a function fired via Knockout.js that I would like to add a class to the parent of this button, i.e. the encapsulating div. However, in my JS file (see below) the function firing is linked to an object in an array.
HTML
<div>
<button data-bind="click: $parent.myFunc">
</div>
JS file
this.myFunc = function(e) {
// this.addClass('boo'); does not work
}
I can fire a console.log off in this function, but can't seem to manipulate this element through standard jQuery.
Knockout way of doing it would be to add a css binding to the parent and then manipulate it within your function fired by click event:
<div data-bind="css: someClass">
<button data-bind="click: myFunc">
</div>
And within your JS file:
this.someClass = ko.observable("");
this.myFunc = function(e) {
this.someClass("boo");
}
since you tagged jQuery, I assume you can use it, so:
$('button').click(function(){
$(this).parent().addClass('boo');
});
This is my first answer on here but how about looking into jQuery's .parent() api? http://api.jquery.com/parent/
I'm not familiar with Knockout.js but perhaps something like this could work..
$('button').data('bind','click: $parent.myFunc').click(function(){
$(this).parent().addClass('boo');
});
Is it possible to reload/refresh the current page when clicking on the twitter bootstarp modal popup window?
Assuming you're using the standard Bootstrap modal markup, you could handle the modal 'hidden' event like this..
$('#myModal').on('hidden', function () {
document.location.reload();
})
Demo: http://www.bootply.com/62174
For BS3 it Should be something like
$('body').on('hidden.bs.modal', '.modal', function () {
document.location.reload();
});
I have a html page using a jQuery UI Button with some jQuery script like this:
<script type="text/javascript">
$('button).button(); // sets up the jQuery UI button style
$('#btnClose').live('click',function () {
$.get('content.html', function (data) {
$('#EditCategory').html(data);
});
});
</script>
<html>
<button type="button" id="btnClose'">Close</button>
<div id="EditCategory" class="category"></div>
</html>
On the content.html page I have:
<button type="button" id="btnNewCategory">Add new category</button>
When I click on '#btnClose' the content.html is returned and the button is displayed but
the jquery ui css styling is lost. Is this because the css style is applied before the
DOM is reconstructed? If so, is there anything I can do like using .live() to ensure the
CSS gets applied?
Thanks for the help!
You'll need to apply the button styling to that content after you've inserted it:
$('#btnClose').live('click', function() {
$.get('content.html', function(data) {
$('#EditCategory').html(data);
$('#EditCategory button').button();
}
});
Unfortunately, there isn't a .live() analog for applying plugins. The technique it uses is only useful for catching and handling events.