I am loading the five php page using jquery load method when clicking the tab dynamically. But some of the jquery functions(datepicker) are working only when the page is getting loaded(ie globel refresh). If i go to another tab and return back means which is not working.
Actually i have added the datepicker control in some of my php pages. The datepicker works only when the page is loaded initially. After that it doesnt work nor throw an issue. I thought the $('selector').load() is the cause for this issue.
Can anyone help.
Try to initialise the datepicker in the callback function:
$( "selector" ).load( "yourpage.html", function() {
//init datepicker
});
I'm just taking a shot in the dark here as you've not given us much code to work with.
Add a callback to your load function to reinitialize the datepicker.
$('selector').load('yoururl', function()
{
$('.datepicker').datepicker();
});
If that doesn't work, please add some code to your question.
Yes that is because maybe you are not initializing it again. Every time you use (.load) you have to re-initialize the datepicker library.
Hope that works for you.
Related
I'm working on a JavaScript script that aims to add some events on a couple of buttons in the barcode interface in Odoo V15.
When I'm trying to add an event on a button in the standard navbar at the top of the page (the navbar that allows, for example, to go back to the applications list) I can't locate the button with jQuery. I select the button through its class, but the returned object remains empty.I'm simply doing something like :
console.log($('.buttonClass'));
I guess that is because my script executes before the button generation.
I tried to place my script at the last position of the assets in the manifest, but it still not working.
How could I execute JavaScript code only when my page is fully loaded, so I can be sure that all of my elements exist?
Thank you,
Regards,
Try to use the DOMContentLoaded event for all your script.
More here: https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
Example:
addEventListener('DOMContentLoaded', (event) => {
// your code
console.log($('.buttonClass'));
});
How about using $(document).ready()?
Example:
$(document).ready(function() {
console.log($('.buttonClass'));
});
See more about ready on jQuery API Documentation.
I am using bootstrap script, mixitup filtering and owl carousel on a SharePoint page. For example on the owlcarousel the data shows up but the actual carousel function does not work. If i leave the page and then go back -1 everything works. It is the only time it works. When I refresh or reload it goes back to the original state.
On the mixitup filtering a similar issue happens. The data does not load initially like it should. When i leave the page and go back then it loads and functions properly.
Any ideas? Something with caching and loading order of scripts? Why would it work when going back?
Try to load the scripts in this order in the end of your body:
jQuery,
Bootstrap,
owlcarousel
Then your custom Script which initiates any own functions
After weeks of searching and deciding to post the question I found my answer so I wanted to make sure i shared.
I found a post from Chris Coyier on how to run JavaScript only after the entire page has loaded... THAT WAS IT! Once i placed my script in this it fixed my issue.
$(window).bind("load", function() {
// code here
});
We have a WP site that uses a 3D Cart Plugin - when you click on "Add to Cart" it opens a new window. This is because *'target='_NEW''* is built into the plugin link code. See the following page and click on any Product Description or Add to Cart button.
http://tipsybir.nextmp.net/freestyle-hummingbird-feeders-375ml/
To override this, I use this code:
<script type="text/javascript">
jQuery(document).ready(function() {
$("a[target='_new']").removeAttr("target");
});
</script>
which I got from a previous question here. We have another WP site using the same plugin, and the above code works perfect, but it is not working on this site. It is the same exact code, placed in the header, but a new window is still opened.
Can anyone help on this? We do not want a new window to open.
You are probably not using jQuery noConflict, so use jQuery instead of $
jQuery(document).ready(function() {
jQuery("a[target='_new']").removeAttr("target");
});
It was indeed that I did not have the JQuery Library loaded.
I'm still quite new to JS and am having some issues with getting JS to run on a dynamically loaded page.
After loading the "Apply Online" page dynamically through the .load method I am unable to then get a jquery date picker to attach to the "appDataOfBirth" input field. After reading through a couple similar posts I've tried things such as .live however even though this works for say an alert, it won't initialize the date picker.
I've been playing around with something link below, where "applyOnlineBtn" is the carasel link to open up the application section displaying the form - however this does not seem to work.
$('#applyOnlineBtn').live("click", function(){
alert('test message');
$("#appDateOfBirth").datepicker();
});
If any one could help me to get this working it would be greatly appreciated.
Resources:
Website URL: http://www.kingsroad.net.au/qutproject/index.php
the JS that loads the content into the mid div is located at kingsroad.net.au/qutproject/js/general.js (this is where I've attempted to use my code to activate the date picker).
the online application content is located at kingsroad.net.au/qutproject/content/applyOnline.php
You May use
$('your_element').load(URL_TO_LOAD,function(){
$("#appDateOfBirth").datepicker();
});
this will apply datepicker to the new loaded content.
Did you check javascript error console?:
Uncaught TypeError: Object [object Object] has no method 'datepicker
So, check your datepicker library, maybe you've not include datepicker library in your page.
I'm working on a site that relies on quite a bit of javascript. The problem is, I'm not a javascript guru in the least. Yes, bit off more than I can chew, here.
I'm using jquery for a spy effect, and use GetResponse for email signups.
If I implement my GetResponse script, it breaks the area later in the page which depends on the jquery script. Pull the GetResponse script and it works just fine.
Problem is, I need them both. ;)
The trick, I suppose, is that the GetResponse script is actually another Jquery script, so it's getting called twice...
Any help?
The site is http://djubi.com/testserver
Check out (urlabove)/nogetresponsescript.php to see it work without the GetResponse script. You should be able to see all the source just fine.
Thanks everyone. jf
GetResponse includes jQuery and is overwriting your plugin ($.fn.simpleSpy) when it loads jQuery again. So what you can try to do is wrap your plugin and initialization in $(document).ready(). For example:
$(document).ready(function() {
(function($) {
$.fn.simpleSpy = function (limit, interval) {
// snipping code out
};
})(jQuery);
$(function() {
$('ul.spy').simpleSpy();
});
});
I pasted your code for simpleSpy into Firebug after the page loaded, and it seemed to work. If $(document).ready() doesn't work, you might want to try $(window).load().