I have a simple jQuery AJAX code which generates XHTML code:
$("a.close").live("click", function( e ){
e.preventDefault();
$( '#info' ).fadeOut( 'slow' );
});
This code works great once. My div closes and everything is fine, but if I click on the link that opens up my #info div a second time then I can't close the div. I get no errors in Firebug and I can't solve the problem.
Could you try returning false instead of calling e.preventDefault?
Try the following:
$("#info").fadeOut('slow').remove();
It's possible you're adding multiple '#info' boxes, but not actually removing the old ones - just hiding them.
Related
I have an application that has many tabs, apart from the first tab - all others are loaded via Ajax.
The tab content all loads correctly.
However if I have a jQuery widget in a (ajax loaded) tab, the widget does not work.
I attempted to use:
$(document).on('click', '#dateOfBirth', function() {
$( '#dateOfBirth' ).datepicker();
});
But the datepicker does not display.
Confusingly (for me):
$(document).on('click', '#dateOfBirth', function() {
alert('This works properly');
});
Works properly! The alert displays when the date field is "clicked".
And of course if I have a simple page without the tabs / ajax content - the datepicker displays as expected when the date field is clicked.
I am using the jQuery 2.2.0 and
jQuery UI 1.12.0 with the "redmond" theme / CSS.
The view html follows the following;
<div class = "emr-bodycontent">
<div id="tabs">
<ul>
<li>Patient Details</li>
<li>Carers</li>
...
...
Here is the JS used for the TABS;
$( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.fail(function() {
ui.panel.html(
"There seems to be an error retrieving the data you requested."
);
});
}
});
Instead of using click use focus and datepicker will work . Assumes that the element id is valid and is an input
$(document).on('focus', '#dateOfBirth', function() {
$( '#dateOfBirth' ).datepicker();
});
For any other plugins inside tabs you can use load callback of tabs ... see api docs
DEMO
I will suggest you to setup the datepicker() after Ajax content loaded, do not use click event. Because the initiate call of $('#dateOfBirth').datepicker() is to set up the datepicker, you may need to click again to trigger the calendar.
Or, you can try to manually trigger it right after set.
$(document).on('click', '#dateOfBirth', function() {
$(this).datepicker();
$(this).datepicker("show");
});
Firstly, thanks very much for the answers / comments.
Both answers work successfully.
Kieran's worked straight away as it was manually triggering the event.
Charlie's worked, too - but only after I clicked several times.
Though after fixing my underlying issue, Charlie's worked straight away, too.
The underlying issue was indeed a duplicate ID.
(thanks for the prompt to check, Charlie).
Because the TAB contents are their own individual forms / pages - I only ever worried about making ID's unique within individual TABs.
After ensuring that ALL IDs are unique, the widget works correctly / as expected.
I had a project with jQuery 1.11.2.1
where this jquery statement was working with no problems:
$( document ).ready(function() {
$(".clickme").click(function(){
$("#menu").toggleClass("fixed", $( $("#panel").is(":visible") ) );
$("#panel").slideToggle();
});
});
after I moved to jQuery 1.11.3.2
browser freezes whenever I click the ".clickme" button and ask me to block a script (jquery) that was hanging too long.
I had to remove the is visible condition to avoid browser hanging:
$( document ).ready(function() {
$(".clickme").click(function(){
$("#menu").toggleClass("fixed");
$("#panel").slideToggle();
});
});
the problem is I need to check the visibility of the #panel element.
element #panel default state is display:none
the issue is present in all browsers I can check.
The first example is almost correct, except that you're putting a boolean (from .is()) in to a jQuery object. The boolean needs to be given directly as a parameter to the toggleClass method. Try this:
$(".clickme").click(function(){
$("#menu").toggleClass("fixed", $("#panel").is(":visible"));
$("#panel").slideToggle();
});
More info on toggleClass()
I have a simple jQuery code that looks like this:
$( "#resp-navigation" ).one("click", function() {
$( "#navigation" ).slideToggle(500);
});
My HTML looks like this:
<div id="resp-navigation"> ... </div>
<nav id="navigation"> ... </nav>
My problem is that when I click on the #resp-navigation div, the #navigation keeps toggling. Does anyone meybe know why?
Thanks.
If your intention is to have the '#navigation' div toggle each time someone clicks on the '#resp-navigation' div, then:
This: $( "#resp-navigation" ).one
Should be: $( "#resp-navigation" ).on
And then it works fine in this fiddle:
http://jsfiddle.net/us0dm62c/
If, however, your intention is to only ever have the '#navigation' div toggle once (so it disappears and cannot be shown again), then your code does exactly that with no modifications, as you can see in this fiddle:
http://jsfiddle.net/gktnhhm5/
As #trevor said, it should be on('click'), not one('click').
If you are seeing it ping ponging my guess is you have another on-click listener assigned elsewhere in the code that is doing the same thing.
Because you are using .one(*). Using like $(".btn1").click(function(){...} will work for multiply click.
I'm working on a php/jQuery store and have run into the following problem:
I have a few div boxes as articles and as soon as a box is clicked, it is moved into the shopping cart and therefore has to become inactive.
That's my code so far:
$( ".artbox" ).not( ".inactive" ).on('click', function(){
$(this).addClass("inactive");
$(this).find("#artbox").addClass("inactive")
})
It adds the class .inactive to two div objects, which are positioned inside each other. The rest of this function is left out here to keep it short. The problem is that while the according styles for .inactive are applied, I can still click on the box again and again and the function will be called again and again (although I have added the .not() selector) which results in having this specific article in the shopping cart multiple times - and this is what I would like to prevent. If I reload the page manually everything is fine and this
$( ".artbox.inactive" ).on('click', function(){
$(this).effect( "shake", {distance:1});
})
works, too (it doesn't for the items added without reloading).
But I am looking for a solution that works without reloading because I am displaying a popup window with a sucess message after the item was added to the cart.
JSFiddle
I've tried this here https://stackoverflow.com/a/12202186/2842292 but unfortunatly can't get it to work in my example.
Thanks in advance!
You can do it in two ways:
You unregister the event listener upon the click.
You can do it adding this to the event listener: $(this).unbind();,
You add an additional check at the very top of the listener:
if($(this).hasClass("inactive")) return;
Then if it even runs, it will quit and will not do the job.
The eventbinding happens on page load, so you should build the logic in the function:
$( ".artbox" ).on('click', function() {
if ($(this).hasClass("inactive")) {
$(this).effect( "shake", {distance:1});
} else {
$(this).addClass("inactive");
$(this).find("#artbox").addClass("inactive");
}
});
I want to make function working only on page with specified element.
I have search page, search fields and results are in search-block div.
I want to bind function to this block, so function will not work on other pages (without <div id='search-block>...</div>)
I have next js code atm:
$(document).ready(function()
// instructions for another page (handlers for some links)
$(function(){
setInterval(findSomething,1000);
});
});
It working fine on page with search-block div, but it works fine on the other pages too. Browser tries to run this function on all other pages. I don't need this.
I tried jquery bind, but it now worked for me, don't know why :(
$("#search-block").bind(function(){
setInterval(findSomething,1000);
});
How I can bind handler to speciges too.fied block?
Instead of bind you have to check for the length of that elem:
$(document).ready(function(){
if($('#search-block').length > 0){ // <---checks the availability
setInterval(findSomething,1000);
}
});
Bind is always used with an event to bind to:
$( "#foo" ).bind( "mouseenter mouseleave", function() {
});
if you want to execute that only when the block is available on the page, use this:
if ($('#search-block').length) {
setInterval(findSomething,1000);
}
This checks the number of times #search-block is found on the page and if it is not 0(false) it executes the code.