I'm using bootstrap's modal and I would like to have a navbar at the top of the modal that uses jquery's .load to change the view of the modal when clicked. I am able to get the modal up with the default view to show but I can't get the rest of the buttons to fire when clicked. Below id a simplified version of what I want. Thanks for any help.
<div class="modal-header">
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>X</button>
<h3 id="myModalLabel">Account Settings</h3>
</div>
<div class="modal-body">
<div class="btn-group">
<button id="account" class="btn">Account</button>
<button id="edit-account-users" class="btn">Users</button>
</div>
<div class="wrapper">
<!-- Content -->
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss='modal' aria-hidden='true'>Close</button>
</div>
$(document).ready(function () {
accountData.init();
});
var accountData = {
'init' : function() {
$('.account-settings, #account-settings #account').click(function() {
$('#account-settings').load('/partials/account/index.html', function() {
$('#account-settings .wrapper').load('/partials/account/account_data.html');
});
});
$('#edit-account-users').click(function() {
$('#account-info .wrapper').load('/partials/account/account_users.html');
});
}
};
The reason your buttons didn't fire is because your event bindings may be attached to elements that no longer exist.
Say if you were to replace content using .load(), the original event handlers to the elements will be lost. That's why event delegation is very useful here, bind the event to the document instead of the individual element. (You're not going to replace document) So when the user clicks anything inside the page, the event will be picked up by document and delegated to a child element according to the selector provided, eg. #edit-account-users.
Use event delegation .on() instead of .click().
$(document).on('click', '#edit-account-users', function() {
$('#account-info .wrapper').load('/partials/account/account_users.html');
});
Read more about .on(): http://api.jquery.com/on/
Related
I have a modal dialog created within a Shadow DOM and injected (using violentmonkey) into a page during document load. This dialog contains a simple form. The idea is to prompt the user for input.
When the dialog is created, it has focus. Elements can be tabbed, and I can hook key/mouse events. The problem arises when the window load event is triggered. Focus returns to the main body (verified by issuing document.activeElement in the console and by hooking focusin/out for both body and the shodowroot). I can hook the focusin event, but so far nothing I have tried will return focus to my dialog.
A cut down version of the dialog:
<div id="twifty-translate-dialogue" style="">
#shadow-root (open)
<div class="outer" style="z-index: 2147483647; pointer-events: none;">
<div class="container">
<div id="header" class="">
</div>
<div id="languages" class="">
</div>
<div class="buttons">
<button id="translate" class="button-translate" type="button">Translate</button>
<button id="cancel" class="button-cancel" type="button">Cancel</button>
</div>
</div>
</div>
I would expect the following to work:
window.onload = () => {
document.getElementById("twifty-translate-dialogue").shadowRoot.getElementById("translate").focus()
}
From what I've read, there should be two active elements. The #twifty-translate-dialogue and the shadow DOMs #translate. But:
document.activeElement
> <body>
document.getElementById("twifty-translate-dialogue").shadowRoot.getElementById("translate").focus()
document.activeElement
> #twifty-translate-dialogue
document.getElementById("twifty-translate-dialogue").shadowRoot.activeElement
> null
How can I restore focus?
Update:
A workaround:
window.onload = () => {
window.setTimeout(() => {
this.shadow.getElementById("translate").focus()
}, 1)
}
I'm guessing that the focus changes after the onload event, meaning that trying to set the focus in the handler will have no effect. By using a timeout, I've scheduled the focus call for after the completion of onload.
Is this a bug or standard behaviour? Is there a prefered way of setting the focus?
HTML:
<div class="channellist"></div>
Using Ajax i am getting the channels dynamically when the page loads and appending in the channellist container. After appending my html looks like this.
<div class="channellist" id="channellist">
<div class="c01" id="c1"></div>
<div class="c01" id="c2"></div>
<div class="c01" id="c3"></div>
</div>
I tried like this
$('.channellist').hover(function() {
alert(this.id);
});
I got the alert message.
when i tried the hover on c01 class i didnt got the alert.
$('.c01').hover(function() {
alert(this.id);
});
I dont know where it is going wrong. Can anyone help to figure it out.
You need use event delegation, try this
$('.channellist').on('mouseenter mouseleave', '.c01', function() {
console.log(this.id);
});
// only for example
setTimeout(function () {
$('.channellist').html(
'<div class="c01" id="c1">1</div>' +
'<div class="c01" id="c2">2</div>' +
'<div class="c01" id="c3">3</div>'
);
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="channellist" id="channellist"></div>
$.on
The name "hover" used as a shorthand for the string "mouseenter
mouseleave". It attaches a single event handler for those two events,
and the handler must examine event.type to determine whether the event
is mouseenter or mouseleave. Do not confuse the "hover"
pseudo-event-name with the .hover() method, which accepts one or two
functions.
Using Ajax i am getting the channels dynamically
This can be sorted using event delegation like:
$('#channellist').on('mouseenter', '.c01', function() {
alert(this.id);
});
syntax of event delegation is something like:
$(staticParent).on(event, selector, callback);
where $(staticParent) should be the element which was available when DOM was ready, In your case it seems to be #channellist element.
Since code is dynamically attached to the div, onload of the document the event will not be present, So use .live event or use .on by delegating the event. Then event will execute. For your reference Check this link:
https://jsfiddle.net/HimeshS/ocxoy6c2/
https://jsfiddle.net/HimeshS/ocxoy6c2/
For .live:
$(.c01).live("mouseenter", function(){
alert(this.id);
});
<div class="channellist" id="channellist">
<div class="c01" id="c1"></div>
<div class="c01" id="c2"></div>
<div class="c01" id="c3"></div>
</div>
Your blocks are empty, their height is 0, and you can't hover on tham.
Try to make height more, or print some text inside,
Like:
<div class="channellist" id="channellist">
<div class="c01" id="c1">1</div>
<div class="c01" id="c2">2</div>
<div class="c01" id="c3">3</div>
</div>
I have a pop-up that has a .close class which is basically just an X plus some extra spacing. My problem is, I can't get the click event to work when it's in my code, however, if I paste it into Google's dev tools console, it works as expected...
The culprit...
$('.modal').bind(touchClick, 'close', function(e) {
$('.modal.active').removeClass('active');
$('.modal.b').removeClass('b');
$('.modal.c').removeClass('c');
$('.modal.d').removeClass('d');
$('.modal.e').removeClass('e');
$('.modal .content').html('');
});
The setup...
<div class="modal">
<div class="content">
<div class="close">
<div class="x"></div>
</div>
</div>
<div class="bg"></div>
</div>
Is your script above your html?
Try this:
$(function(){
$('.modal').bind(touchClick, 'close', function(e) {
$('.modal.active').removeClass('active');
$('.modal.b').removeClass('b');
$('.modal.c').removeClass('c');
$('.modal.d').removeClass('d');
$('.modal.e').removeClass('e');
$('.modal .content').html('');
});
});
Make sure the .modal node is in the DOM before you execute your code.
The code attaches a click handler to .modal. If it isn't in the dom, there is nothing to attach it to.
If the modal is being injected into the DOM, make the click handler attach to the body instead.
$('body').bind(touchClick, '.modal .close', function (e) {
...
});
Note that I added a . to close to make it a class...
I use jquery for my web application. I want it to be correct for desktop browsers and mobile brousers for touchscreen devices.
I have a div, and some elements inside it:
<div class="well listItem element-div alert-error" data-state="removing">
<strong>Item title</strong> <small>Items count</small>
<div class="pull-right" style="margin-top: -5px;">
<a class="btn btn-success approve-button"><i class="icon-ok icon-white"></i></a>
<a class="btn btn-danger cancel-button"><i class="icon-remove icon-white"></i></a>
</div>
</div>
I catch click and touchend event for .listItem class (top-level div) and same events for every a element (for .approve-button and .cancel-button), but when I'm click on desktop browser on 'a' element, it works correct, and when I am pressing on 'a' element in iOS Safari browser, or WindowsPhone InternetExplorer, works only event for parent div, but not for 'a'. If I remove event listener for parent div, events for 'a' elements works correct in mobile browsers. I want parent-div event works when I touch a free space of it, and when I touch 'a' element - I want only 'a' event listener to go on. Can you advise me how to separate them?
Have you tried to check event target?
$(".listItem").on("click", function(event){
if (event.target === this) {
// clicked exactly on this element
}
});
I've had a similar problem, only my content was more nested. You want to exclude the areas (divs, classes or otherwise) where you expect to handle other events, using :not selector, like so:
<article>
<div class="title">
<span class="title"></span>
<div class="buttons">
<div class="minimize">+</div>
<div class="remove">x</div>
</div>
</div>
<div class="post">
...
</div>
</article>
With jQuery:
$("article :not(.buttons, .minimize, .remove)").click(function (event) {
// toggle display value of div.post
});
This triggers a click event anywhere inside article, except for the .buttons, .minimize and .remove divs.
I've been trying to figure out the relatively new (at least for me, I guess) .on() method provided with jQuery versions 1.7.x onwards. We've been using live(), bind() in our code to handle event handlers till now and we're thinking of an overhaul because of the performance issues which .live() seems to have.
So here's my problem. This is the page structure I have in my page:
<div id="header"></div>
<div id="content"></div>
<div id="footer">
<div id="default"></div>
<div class="close">Close</div>
<div id="extras">//some random stuff// </div>
</div>
I've created an object to store frequently used selectors to such as $(document), $("#header"), $("#footer") like this:
var elements = {
$doc: $(document),
$foo: $("#footer"),
$head: $("#header")
};
The behavior expected from the click of .close inside #footer is that #extras must hide from view. I tried to bind the click event of .close to #footer (delegated) like this:
elements.$foo.on("click","div.close",hideFooter)
WHICH DID NOT WORK. But, if bound to elements.$doc like this:
elements.$doc.on("click", "div.close", hideFooter);
IT WORKS. But isn't this how .live() works? (If for every click it should to go to the DOM start and bubble down to div.close)
Am I doing something wrong here?
EXTRA INFO
The contents of the anonymous function hideFooter are :
function hideFooter(event) {
$(event.currentTarget).next().hide("slow")
.closest("#footer").css({ "opacity": "0.8" });
$("#default").show();
}
THE CODE SEQUENCE in default.js
var elements = {
$doc: $(document),
$foo: $("#footer"),
$head: $("#header")
};
elements.$doc
.ready(function () {
elements.$foo.on(events.click, "div.close", hideFooter);
})
.on(events.click, "#content", HideHeaderFooter)
.on(events.hover, "#footer", showFooter);
To make sure the footer element is loaded before your script runs, you can put your script toward the bottom of the page.
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer">
<div id="default"></div>
<div class="close">Close</div>
<div id="extras">//some random stuff// </div>
</div>
<script src="/default.js" type="text/javascript"></script>
</body>
Or if you want your <script> to be in the <head> of the page, you can wrap your code in a jQuery .ready() handler so that it doesn't run until the page is loaded.
$(function() {
// Code in here will not run until the rest of the page has loaded.
var elements = {
$doc: $(document),
$foo: $("#footer"),
$head: $("#header")
};
elements.$doc
.on(events.click, "#content", HideHeaderFooter)
.on(events.hover, "#footer", showFooter);
elements.$foo.on("click","div.close",hideFooter);
});
So now your code will be delayed until the page has loaded, and so your footer element will exist and be ready for DOM selection.
Why don't you put it together in the handler? This should work:
elements.$foo.on("click","div.close", function() {
$(this).next().hide("slow").closest("#footer").css({ "opacity": "0.8" });
});
You have this
elements.$foo.on("click","div.close",HideFooter)
Did you mean this?
elements.$foo.on("click","div.close",hideFooter)
Notice the 'H' in your function name.