In my html code i have this
<li class="register">Registreer</li>
and
<div id="content">
</div>
I try to load a html file into the div using the following code in the head
<script type="text/javascript" src="includes/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="includes/js/navbar.js"></script>
navbar.js :
$(document).ready(function() {
$(function(){
$(".register").click(function(){
$("#content").load("/signup.html");
document.write("test");
});
});
});
I have copied signup.html all over my webpage folders. But it does not work.
However it does display test for 1/4th of a second.
I also tried putting my js code directly in the html file but that doesn't work either.
$(document).ready(function () {
$(".register").click(function(){
$("#content").load("/signup.html");
return false;
});
});
By returning false from the click event the hyperlink element will know not to perform its default action (which is why the page is refreshing).
You are repeating yourself:
$(document).ready(function() {
$(function(){ //same as $(document).ready(function() {
$(".register").click(function(){
$("#content").load("/signup.html");
document.write("test");
});
});
});
Try just doing this:
$(function(){
$(".register").click(function(){
$("#content").load("/signup.html");
document.write("test");
});
});
Also you might want to try stopping the default event of your link:
$(function(){
$(".register").click(function(){
$("#content").load("/signup.html");
document.write("test");
});
$(".register").on('click', 'a', function(e){
e.preventDefault(); //prevents action of the link
});
});
When using a relative URL, the URL is relative to the page on which the JavaScript is run. In your case, since you are using the string '/signup.html', It will look for the singup.html file up one directory from the directory of the page currently being viewed.
Use the F12 Development Console in IE or Chrome, FireBug, of Fiddler to view your AJAX requests and results to see whether your 'singup.html' is being loading from the appropriate directory. You can also view source after the load completes to see if there is HTML beiing loaded into your DIV.
Related
I want to make this JS function go from a button to a page load
I am integrating a jira issue collector into our webpage.
Bug Report
<script type="text/javascript" src=""></script>
<script type="text/javascript">window.ATL_JQ_PAGE_PROPS = {
"triggerFunction": function(showCollectorDialog) {
//Requires that jQuery is available!
jQuery("#myCustomTrigger").click(function(e) {
e.preventDefault();
showCollectorDialog();
});
}};</script>
To load when the page reloads I used the window.onload but that didnt work
Add a document complete jquery handler:
$(document).ready(function(){
showCollectorDialog();
});
This will run as soon as the document is fully loaded.
here you can do it it with jquery just like like this.You can place this at the end of your html file.And also include jquery cdn in script tags in your html file.
$(document).ready ( function(){
alert('hello world');
});
or you can do this like this
function functionName() {
alert('hello world');
}
window.onload = functionName;
Looking for an easy answer, nothing works from existing googles.
No custom triggers needed.
Put this into your html head and it will trigger the form, I just tested it ;-)
<script type="text/javascript">
setTimeout(function() {
$('#atlwdg-trigger').trigger('click');
},100);
</script>
on my php page I want to click a button on page load.
I have tested it with jQuery and JS.
While jQuery does not work, the JS works fine.
Any idea why this is the case?
jQuery:
<script>
$(document).ready(function() {
$('#button_id').click();
$('#button_id').trigger('click');
});
</script>
JS:
<script>
window.onload = function() {
document.getElementById('button_id').click();
};
</script>
The button I want to click has a data-filter inside. Might this be the problem?
<button id="button_id" data-filter=".parkett" class="sub">Button</button>
EDIT:
No errors in the console, libary is added at the top.
This is my console output if I log both buttons:
Screenshot of console
$("document").ready(function() {
setTimeout(function() {
$("#button_id").trigger('click');
},10);
});
$('#button_id').click();
You have defined no click handler - so nothing going to happen. You need to drop a function in there to use as the callback. Like this:
$( "#button_id" ).click(function() {
$(this).trigger('click');
});
Sounds like you haven't included the jquery script in your head
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
I want to load an external html to my actual html with load but not triggered by click. I want to load it on page on document ready event. I did like this but the jquery doesn't apply to the loaded content.
<script>
$(document).ready(function(){
$( "#rezervations" ).load("http://websoftit.ro/wayoutz/calendar.php");
});
</script>
I mean content is loaded but the jquery from the main doc doesn't work for the loaded content. Example for script that should work on loaded content
<script>
$(".table").on("click", "td", function() {
$(this).closest("tr").siblings().removeClass("td_select");
$(this).toggleClass("td_select");
});
</script>
Ok then you might need to write it as below:
$( "#rezervations" ).load("http://websoftit.ro/wayoutz/calendar.php",function(){
$(".table").on("click", "td", function() {
$(this).closest("tr").siblings().removeClass("td_select");
$(this).toggleClass("td_select");
});
//Your other initialization here
});
i have checked it and there is not problem with your code its working fine just check that you have particular div with id rezervations.
$(document).ready(function(){
$( "#rezervations" ).load("http://websoftit.ro/wayoutz/calendar.php");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="rezervations">HELLO</div>
Regards
Example loading a header:
$(document).ready( function(){
$("header").load("http://localhost/js/header.html", function() {
$('body').trigger('headerReady');
});
});
From the api: https://api.jquery.com/trigger/ , then
$('body').on('headerReady', function(){
//do ur stuff here
});
I'm using a loading screen for a webpage and I use window.onload function.
Everything works great except in Mozilla Firefox browsers. When we first visit or refresh the page with ctrl+F5 combination, the loading screen never disappears. if we refresh the page only with F5, then it works.
I use the code below
$(window).load(function(e) {
$("#body-mask").fadeOut(1000,function(){
$(this).remove();
});
});
I have also tried the code below but nothing changed.
window.onload = function () {
$("#body-mask").fadeOut(1000,function(){
$(this).remove();
});
}
Why this is happening?
Please help.
Thanks in advance.
The problem is caused by another jquery background plugin which is placed inside $(document).ready()
I moved it inside $(window).load() function, now it works perfect.
I have also moved another function to resize images on the page load. When it was inside $(document).ready() block, sometimes it was malfunctioning if loading time took too long but now it also works great.
function resizeImages(){
//Some Code
}
$(window).load(function(){
$("#body-mask").fadeOut(1000,function(){
$(this).remove();
});
$.vegas({
src: backURL , fade:0
});
resizeImages();
});
$(document).ready(function(){
//Some Other code
});
I got the same problem when mistyped the type attribute in the script tag:
<script type="text/javascript">
Try This:
$(document).ready(function(e) {
$("#body-mask").fadeOut(1000,function(){
$(this).remove();
});
});
Read for load and ready functions difference What is the difference between $(window).load and $(document).ready?
You must call function on initialization like :
window.onload = init();
in other word modify your code to:
window.onload = function () {
$("#body-mask").fadeOut(1000,function(){
$(this).remove();
});
}();// Added
Copy following code in file then open it with firefox
<script>
window.onload = function () {
alert('saeed')
}();
</script>
I'm loading from DB some html (using ajax post request), it looks like:
<div id="slides_control">
<div>
</div>
</div>
With html I also load JS-code:
<script>
$('#slides_control a').bind('click', function() {
alert('achtung');
});
</script>
Script goes right after the html (in received data).
But when I click at some link inside new html, I don't see the alert. What's wrong?
I also tried to bind it after ajax ended:
$.post('page.php', {}, function(data) {
document.write(data);
$('#slides_control a').bind('click', function() {
alert('achtung');
});
});
Didn't help me.
You probably running bind function before your html has been loaded, so it does not find element
So, put your code to run on dom load:
$(function(){
$('#slides_control a').bind('click', function() {
alert('achtung');
});
}):
Try wrapping the jQuery call:
<script>
$(function(){
$('#slides_control a').bind('click', function() {
alert('achtung');
});
});
</script>
execute this script when data is loaded. You are executing this script before data is loaded.