jQuery Widgets not working on tabs loaded by Ajax - javascript

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.

Related

jQuery selectors not working with added class

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");
}
});

How to bind jquery function to specified element

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.

Trouble Understanding jQuery-UI Popup Menu

I'm trying to figure out how to make a pop-up menu using the jQuery UI menu widget.
After searching around, I finally found the following demo that does what I want:
http://view.jqueryui.com/menubar/demos/popup/popup-menu.html
However, I am having a little trouble understanding this demo. For example:
What is making the menu hidden before any of the buttons are clicked?
What is causing the menu to close when it's open and I click somewhere else on the page?
Any help appreciated.
That demo uses a modified version of jquery.ui.menu.js along with the popup widget: http://view.jqueryui.com/menubar/ui/jquery.ui.popup.js
Menu itself, as released in 1.9, doesn't have any code for showing it as a popup. I recommend writing some custom code to build a popup menu, until a stable release offers a proper solution.
The jQuery UI Popup - Popup Menu you referenced uses unreleased code as Jörn Zaefferer said. (Notice that Jörn is the same guy that closed the bug)
But there is an almost identical-looking solution in jQuery UI Button's Split Button example that doesn't use .popup() and does all the hiding etc. explicitly.
Perhaps you could use that as a starting point instead. I know I'm going to! ;-)
I believe this may be what you're looking for. When you call .menu(), lots of things are triggered in the _create() function (as Derek said), like setting class names etc. Then, at lines 123-135 in jquery.ui.menu.js, this happens:
this.refresh();
// Clicks outside of a menu collapse any open menus
this._on( this.document, {
click: function( event ) {
if ( !$( event.target ).closest( ".ui-menu" ).length ) {
this.collapseAll( event );
}
// Reset the mouseHandled flag
mouseHandled = false;
}
});
The second part makes sure all menus are collapsed when the user clicks on the page (this.document) outside a menu (.ui-menu): this.collapseAll() is called, which calls this._close(), which in turn calls hide(). This should answer your second question.
As for your first question, The first thing the refresh() function does is:
// Initialize nested menus
var menus,
icon = this.options.icons.submenu,
submenus = this.element.find( this.options.menus + ":not(.ui-menu)" )
.addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
.hide()
.attr({
role: this.options.role,
"aria-hidden": "true",
"aria-expanded": "false"
});
This finds all submenus not previously initialized (in this case all of them since we're coming from _create()) and initializes them, which includes hiding them.

JQuery: dialog doesn't fire autocomplete

I'm using the http://docs.jquery.com/UI/Dialog and http://docs.jquery.com/UI/Autocomplete with JQuery 1.7.2 and JQuery-UI 1.8.18.
There is a form with a text box, which will fire the autocomplete fine when loaded in the page as normal. It's nice and simple!
(function() {
jQuery(function($) {
return $("#type").autocomplete({
source: "/auto-suggest/supplies",
minLength: 2
});
});
}).call(this);
However, if the form is rendered via a dialog the autocomplete does not fire (no UI changes, and the server shows no access to the source url). I'm assuming this is because the input field has not been rendered at document load. So, I tried to use dialog's create event to assign the autocomplete, by passing the function to it as a callback. Again, the autocomplete does not fire.
I'm mystified as to how to get this to work. I would be tempted to get the dialog to create and then hide on document load, but in this instance there could be several instances of the dialog as it's related to table data.
Any help with this will be much appreciated.
Try using open event - this will ensure that the DOM elements are ready
$( ".selector" ).bind( "dialogopen", function(event, ui) {
$("#type").autocomplete({
source: "/auto-suggest/supplies",
minLength: 2
});
});
You can even get the values and then in the success call dialog
$.get('/auto-suggest/supplies', function(data) {
//call dialog here
});
Try delegate
Delegate autocomplete
BEST SOLUTION IS WROTE BY: ManseUK

jQuery .live() only works one time

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.

Categories