I'm using an Ajax call to get a list of checkboxes to appear in a panel after the user presses login. The data loads in fine but there is no JQM styling on it, its only the default browser styling. The id of the checklist is filterlist, and the div where I want to put it is called test1.
javascript:
$(document).on('click', '#loginbutton', function() {
$( "#test1" ).load( "test.html #filterlist" );
});
Try using
$(document).on('click', '#loginbutton', function() {
$( "#test1" ).load( "test.html #filterlist" );
$( "#test1" ).trigger ('create');
});
this will apply the jquery mobile styling to the newly created elements, if it is loading a page you might try 'pagecreate' instead
Related
$( '#list' ).on( "click", ".list-item", function( event ) {
event.preventDefault();
console.log( "toto" + $(this).text());
var $this = this;
$(this).addClass('selected');
$('.list-item').not($this).removeClass('selected');
});
Hello, I have a problem with the line $('.list-item').not($this).removeClass('selected'); which doesn't work for div present in another pages when navigated. thank you for your help.
I don't know that particular plugin, but I looked into it and it seems it caches the 'other' pages somewhere while they are not displayed. At the moment your script is executed the elements are not existing in the DOM.
You will have to run a code similar to yours everytime the plugin loads a page:
// event "loadNewPage" is not an actual event; you will have to figure out which callbacks/hooks/events your plugin offers
$( '#list' ).on( "loadNewPage", function( event ) {
$('.list-item').removeClass('selected');
});
This only works if your changes are cached as well, otherwise you will have to save the selected element in your javascript and reselect it everytime the plugin displays a page.
In the JPList plugin, when you navigate only the content of the div elements are replaced and not the complete div. So, you'll have to reset the selected class upon navigation or any such event.
While initializing the plugin with default options use 'redrawCallback'
i.e.,
redrawCallback: function() {
$('.list .selected').removeClass('.selected');
}
The above code will reset the selected class upon the div.
and also update your code to be
$( '#list' ).on( "click", ".list-item", function( event ) {
$('.list .selected').removeClass('selected');
event.preventDefault();
console.log( "toto" + $(this).text());
var $this = this;
$(this).addClass('selected');
});
Try this approach, as this would first remove the existing selected class from the elements and add selected class to clicked element
I have a conflict with my javascript which is causing elements not to fadein. I have a button set to fadein after 10 seconds which works fine when I remove my javascript that I'm using for something else.
Can anyone help me figure out what the conflict might be?
You can see the test page I'm working on here: https://training.handcraftedbusinessfilms.com/test-fade-in/
I've currently removed the javascript that is causing the conflict but you can see it below.
<script type="text/javascript">
// Custom code by James
jQuery( document ).ready( function ( jQuery ) {
// binds to the plugin's function
jQuery( "input[name='gform_payment_method']" ).on( 'click', gfpStripeToggleCreditCard() );
// triggers the change to default option
jQuery( "input[id^=gform_payment_method_card_]" ).click();
console.log("Hello James");
});
</script>
Bro, your script is correct, but I see that you have 2 calls of "document.ready" in different parts of the html, so just need use once. I have merged and tested the script in the "head" tag and it works:
<script>
$(document).ready(function() {
$("div.button").fadeIn(2000);
//By James
//binds to the plugin's function
jQuery( "input[name='gform_payment_method']" ).on( 'click', gfpStripeToggleCreditCard );
//triggers the change to default option
jQuery( "input[id^=gform_payment_method_card_]" ).click();
console.log("Hello James");
});
</script>
The jquery was being called before it was defined in the header b/c the scripts were injected into the header via the theme and we couldn't control exactly the order of the scripts.
The solution was to create a site specific plugin that set a function to hold off on calling any jquery before the jquery was defined.
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.
This question already has answers here:
jQuery .live() vs .on() method for adding a click event after loading dynamic html
(7 answers)
Closed 7 years ago.
So the structure of my web page is split into three files. I have an index.html file with 3 divs; My navigation bar, a content box, and footer. Then I have two other .html files with different content that I want to load when clicking on links.
My Javascript looks like this:
$( ".content" ).load( "home.html" );
$( ".parents-link" ).click(function() {
$( ".content" ).load( "parents.html" );
});
$( ".home-link" ).click(function() {
$( ".content" ).load( "home.html" );
});
All files use some javascript and when I first open index.html everything works perfectly fine, but once I start clicking on the links the javascript doesn't fire anymore in the content div. My navigation bar in index.html uses javascript and still works regardless.
also, all my custom js is in one .js file for all three .html files. I'm also using some plugins.
How can I fix this issue?
You are loading dynamic content on click. .click() works only for elements currently in DOM, not for future elements. You must use $(staticElement).on('click', 'dynamicElementSelector') for that:
$(document).on('click', ".parents-link", function() {
$(".content" ).load("parents.html");
});
I suggest using dynamic structure:
$(document).on('click', '.loading-link', function (event) {
event.preventDefault(); // Prevent browser from following link.
$.load($(this).attr('href'));
});
There will be only one function for all links that must load some content.
Let's try this:
$('html').on('click', '.parents-link', function() {
$('.content').load('parents.html');
});
$('html').on('click', '.home-link', function() {
$('.content').load('home.html');
});
And as I said in my first comment, we need to bind events to an upper parent and make use of event propagation.
How do I get jQuery(document).ready(function() to fire again when an overlay div is activated?
I'm using this function to hide the a.button:
jQuery(function($) {
jQuery(document).ready(function() {
jQuery(
'.theme-actions a.button.button-primary.customize.load-customize.hide-if-no-customize'
).css("display","none");
});
});
The same button with the same class exists in a "overlay" called .theme-wrap, and within .theme-wrap, the a.button CSS looks like this (the difference being .active-theme ):
.theme-actions .active-theme a.button.button-primary.customize.load-customize.hide-if-no-customize
If I reload the page with the .theme-wrap overlay open, the button disappears, because the jQuery document ready function fires again.
I tried adding both CSS rules to the one function
jQuery(
'.theme-actions a.button.button-primary.customize.load-customize.hide-if-no-customize,
.theme-actions .active-theme a.button.button-primary.customize.load-customize.hide-if-no-customize
').css("display","none");
but it doesn't work.
How do I get document ready to fire again when the overlay opens?
Update 10/14/14
As was pointed out in the answer below: there is no need for jQuery in this instance. The CSS I'm using is the same for each div - the original and the overlay - so a simple {display:none} rule added to the admin stylesheet will suffice.
Instead of using the $(document).ready() function again, try adding the CSS directly to your stylesheet.
Once the overlay is activated run the following:
jQuery('.theme-actions .active-theme a.button.button-primary.customize.load-customize.hide-if-no-customize
').css("display","none");
Or better still create a function:
function hideElement( sel) {
$( sel ).hide(); //.hide() is equiv to .css('display', 'none');
}
Then call the function at DOM ready with first selector:
$(document).ready(function() {
hideElement( 'selector-1' );
});
And then when the overlay is fully activated, call the function with the appropriate selector:
hideElement( 'selector-2' );