I am trying to do this:
$(document).ready(function(){
$('body').on('load', function(){
alert('ok');
});
});
But it not works.
Any help?
First, you have to use $(window).load() instead of $('body').on('load'()).
Then, you need to separate the onload() function and the ready() function:
$(document).ready(function(){
alert("fires when webpage is loaded");
});
$(window).on('load', function(){
alert("fires once when window/body has been loaded");
});
Have a look at this to understand the difference.
Whay your code does not work?
When DOMContentLoaded event fires... That is the event that triggers the $(document).ready() callback. Obviouly, the body has already loaded too.
So if you wait for the whole DOM to be loaded to define an event handler about body loaded... It will never be executed because that event has fired before the event handler has been defined.
And after a close look: There is squarely no "load" event fired for the body... Whatever its content.
So as in pythan's answer, that should be $(window).on("load", function(){...})
See below:
console.log("before")
$("body").on("load", function () { // That NEVER fires.
console.log("Body loaded");
});
console.log("after")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<img src="https://via.placeholder.com/500" />
</body>
But anyway, you don't need both for sure.
Related
I have a input in a td and the click script is not getting picked up and im not sure why? There are no errors in the console.
<td>
<input type="button" class="edit btn btn-primary" value="Edit"></input>
</td>
Script below:
<script>
$('.edit').click(function () {
console.log("Test")
})
</script>
The 'click' even listener might run before the .edit element is rendered to the page. maybe wrap it in a document ready function to ensure it doesn't run till the page is loaded. like this:
$( document ).ready(function() {
$('.edit').click(function () {
console.log("Test")
})
});
Please add jquery.js file first like this.
<script src="https://code.jquery.com/jquery-3.6.0.js"> </script>
<script type="text/javascript">
$('.edit').click(function () {
console.log("Test")
})
</script>
Im new to HTML and i have this loader code i got from : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5
I adjust it to have a button and when i click on this button it sends an internal GET request to my code /clients.
I want the same code to work but without the button.
I want the loader to finish load and then redirect to the /clients page because now it is depended on the button click.
my code:
</head>
<body onload="myFunction()" style="margin:0;">
</body>
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Pres OK.</h2>
<form method="get" action="/clients">
<button>OK</button>
</form>
</body>
</div>
simply removing the button line is not doing anything, just showing blank page and in my code i see
its not redirecting to /clients
how can i do this ?
EDIT:
SOLVED by changing myFunction like #Bert Maurau
suggested
<script>
var myVar;
function myFunction() {
myVar = setTimeout(function(){ window.location.href = '/clients' }, 1000);
}
So you basicly want to redirect the user if your "loading" is done?
I see you're calling the myFunction() on page load.
You could add a basic
setTimeout(function(){ window.location.href = '/clients' }, 1000);
at the end of the function to redirect the user to /clients after one second.
(or when your loading function has done processing the data.
myFunction() {
// do stuff here
// ...
// wait for a second
const timeout = setTimeout(() => {
// redirect to clients
window.location.href = '/clients';
}, 1000);
}
You could submit your form from myFunction().
<script>
function myFunction() {
document.getElementById("form_id").submit();
}
</script>
This function would be called when the page is finished loading and would submit the form without anybody pushing the button. You could even remove the button entirely.
Solution:
</head>
<body onload="myFunction()" style="margin:0;">
Remove the extra closing tag for BODY
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Pres OK.</h2>
<form method="get" action="/clients">
<button>OK</button>
</form>
</body>
</div>
You can use the below Jquery Script
<script>
$(document).ready(function(){
if($('#loader').hasClass('d-none') || $('#loader').css('display') == 'none'){
// or any other check to ensure that the loader is finished.
$('form').submit();
}
})
</script>
Please feel free to ask if you need more clarification.
I have an accordion element in my page. The problem is that the accordion appears on the page but it is not clickable. By 'not clickable', I mean that when I click on the header it does not expand to reveal the contents. Nothing happens at all. I hope someone can help.
Thanks in advance.
Your jQuery.js module must be loaded before the semantic-ui accordion.js
module.
Simply put
<script src="js/accordion.js"></script>
after
<script src="js/vendor/jquery-1.11.2.min.js"><\/script>
( or whatever your jQuery version is ... )
and initialize the accordion in the html document inside a script tag as :
<script language='javascript'>
$(document).ready(function(){
$('.ui.accordion').accordion();
});
</script>
It happens on nested accordions while you script is under $( document ).ready(function()
So try to call accordion function in an ajax callback like this;
$('input[name=sampleInput]').on('input', function() {
var val = $("input[name=sampleInput]").val();
if (val.length >= 3)
{
$.ajax( {
url: 'sample_handler.php',
type: 'GET',
data: {
data: data
},
dataType: 'html',
success: function ( response ) {
$('.ui.accordion').accordion({});
}
})
}
})
For instance, I've put accordion function in a callback. So I could use it again and again, even I add nested accordions.
In my case I had syntax errors inside javascript/jQuery. After fixing that and importing jQuery module before semantic-ui it works. You can open development tools in the browser and check the console for errors in javascript (F12 in Chrome).
<script type="text/javascript">
$(document).ready(function() {
window.onload = function(){
$('.ui.accordion').accordion();
};
});
</script>
When I try document.querySelector('core-drawer-panel').togglePanel() in the console it works but when I do the following core-drawer-panel is not ready yet?
<template>
<core-drawer-panel forceNarrow>
</core-drawer-panel>
</template>
<script>
document.addEventListener('polymer-ready', function() {
document.querySelector('core-drawer-panel').togglePanel()
console.log('polymer-ready');
});
</script>
Note that I can not wrap it in a polymer element due to issues with other js frameworks.
try this
var template = document.querySelector('template');
template.addEventListener('template-bound', function () {
//code
});
with your element inside a template you need to look for template to be ready not polymer.
First off, I am quite a noob.
Ok, so I have embedded a SoundCloud track into my webpage. My question is, how do you refresh a page (or do anything else) when the track ends?
Can you do it with getDuration(I found that on SoundCloud API page)?
I tried to code it. In the code I tried to get the duration of the track and then print it on the screen/webpage. What is wrong with this code?
<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<span id="headerLeft-content">
<script type="text/javascript">
var duration = 0;
(function(){
var widgetIframe = document.getElementById('sc-widget'),
widget = SC.Widget(widgetIframe);
widget.bind(SC.Widget.Events.READY, function() {
widget.getDuration(function(val) {
duration = val;
});
});
}());
document.write(duration);
</script>
</span>
If that worked, I would just put something like wait(duration) and then refresh...
In other words, can soundcloud embedded track be "hacked" to loop(or to refresh page after track is over, that's what I want to do) even though the original widget doesn't support looping?
Please, take a look at the SoundCloud html5 widget page where I found getDuration command and see if you can help me... => http://developers.soundcloud.com/docs/api/html5-widget#getters
EDIT:
<script>
var html=<iframe blablabla...></iframe>
document.write(html);
</script>
<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<script type="text/javascript">
(function(){
var widgetIframe = document.getElementById('sc-widget'),
widget = SC.Widget(widgetIframe),
widget.bind(SC.Widget.FINISH, function() {
window.location.reload(false);
});
}());
</script>
Page doesn't refresh after the track is over. Can you see what's wrong?
You can bind a function to the SC.Widget.FINISH event documented here. The following code snippet should work:
widget.bind(SC.Widget.FINISH, function() {
window.location.reload(false);
});
Of course if all you want is for the widget to loop, you could use the seekTo and play methods:
widget.bind(SC.Widget.FINISH, function() {
// again, again!
widget.seekTo(0);
widget.play();
});
That would be less intrusive than a page refresh.
widget.bind(SC.Widget.Event.FINISH, function() {
widget.seekTo(0);
widget.play();
});
In the other reply, the first parameter is missing ".Event".
Finally. A truly working version.
var widgetIframe = document.getElementById("soundcloud"),
widget = SC.Widget(widgetIframe);
widget.bind(SC.Widget.Events.FINISH, function() {
widget.play();
});