I have an external Javascript file initialize_database.js that uses JQuery to call a PHP script to create a database and some tables. I've tested my PHP script by adding some HTML to it to run it on its own, and it works fine. My HTML is as follows:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<title>Test Webpage</title>
</head>
<body>
<script src="initialize_database.js"></script>
<div>
<h2>Nothing here yet!</h2>
</div>
</body>
</html>
Here is initialize_database.js:
$(document).ready(function() {
$.get('testPhp.php' {
alert('Databases were initialized');
});
});
I'd like to have the Javascript run as soon as the page loads so that the database can be created right away. All files are in the same directory. What am I doing wrong?
Comma and function initialization is required after the URL for executing the function correctly.
$(document).ready(function() {
$.get('testPhp.php', function() {
alert('Databases were initialized');
});
});
Check this
you can use this code . if you want to run when dom ready then
$(document).ready(function() {
$.get('testPhp.php', function() {
alert('Databases were initialized');
});
});
if you want to run this full load then use bellow
$( window ).load(function() {
$.get('testPhp.php', function() {
alert('Databases were initialized');
});
});
Related
'turbolinks:load' is not getting triggered on the directly loaded pages but, on the pages loaded with turbolinks 'turbolinks:load' event is working fine.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://rawgit.com/turbolinks/turbolinks/master/dist/turbolinks.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>
test
</title>
<script>
function loadScript(src) {
if(!document.querySelector("script[src='"+src+"']")){
var n = document.createElement("script");
n.src = src;
n.async = false;
document.getElementsByTagName("head")[0].appendChild(n);
};
};
</script>
</head>
<body>
<p style='color:red'>
Hi Priority Rendering With inline css to improve start render
</p>
<script type="text/javascript">
loadScript("dynamic_load_turbolinks_script.js");
</script>
</body>
</html>
Code of dynamic_load_turbolinks_script.js
console.log('This file will contain all functionally required script');
document.addEventListener("turbolinks:load", function() {
console.log('Inside turbolinkss Load')
});
window.onload = function(){
console.log('Inside window onload')
};
document.addEventListener('DOMContentLoaded', function(){
console.log('Inside DOMContentLoaded')
});
$(document).ready(function() {
console.log( "Inside document ready" );
});
Browser Console output of above code is
dynamic_load_turbolinks_script.js:1 This file will contain all functionally required script
dynamic_load_turbolinks_script.js:6 Inside window onload
dynamic_load_turbolinks_script.js:12 Inside document ready
I know that the issue is because dynamic scripts are executed outside of DOM parsing but, is there any way to achieve the desired behavior?
Is it possible to call a function declared in a .js file from the body of the HTML. I'm assuming the reason it won't work is because the .js file is called after the function has been called in the HTML body. Is there a way around this.
I've had a look at some answers here, but can't seem to find what I'm looking for. My apologies if it's staring at me as a beginner I may not be using the correct terminology.
jqueryfunctions.js:
function someFunction() {
// do.something;
}
index.html:
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<script src="jqueryfunctions.js"></script>
</head>
<body>
<script>
someFunction();
</script>
</body>
</html>
Here is the full/actual .js file returnedMessage() is the function I was reffering to as someFunction().
The console error I'm getting is "returnedMessage() is not defined".
$(function(){
var timer = null;
function appendmessageBox() {
$('body').append('<div id="messageBox" class="datamessagebox"> </div> ');
}
// just before body tag.
appendmessageBox();
// makes MessageBox Disappear on MouseOver
$('#messageBox').on('mouseover click', function(){
$(this).fadeOut(300);
});
function returnedMessage(message) {
if (timer) {
clearTimeout(timer); //cancel the previous timer.
timer = null;
}
$( '#messageBox' ).css('display', 'inline-block');
timer = setTimeout(function(){
$( '#messageBox' ).fadeOut( 499 );
}, 5000);
$( '#messageBox' ).append('<msg>'+message+'<br /></msg>').fadeIn( 200 );
$( '#messageBox > msg:last-of-type' ).delay(3000).fadeOut( 3000 );
setTimeout(function(){
$( '#messageBox > msg:first-of-type' ).remove();
}, 5999);
}
// This test message bellow works correctly.
returnedMessage('hello world - test 1');
});
EDIT:
you should define your function like so:
var someFunction = function() {
// do something
}
Or like so
function someFunction() {
// do something
}
But always use the function word. More information on function definition in Javascript.
More about JS file import
Javascript code is inserted between <script> tags in an HTML file
<script>
console.log("Hello World!");
</script>
You usually place those script tags inside the <head> tag. However it's recommended you put them after your <body>. This way you allow the DOM to load before you run your JS script. This is important for exemple when you want to select elements in the DOM. If you put the JS code before the actual HTML that creates this element, then JS will not find the element you would be looking for because it doesn't yet exist.
Now it's not really efficient to work with script in your HTML code so it's helpful to write JS in .js files and then import them in you HTML file like you would for a CSS file. Use the <script> to do so:
<script src="myScript.js"></script>
You can use multiple <script> tags to pull in multiple JS files. But you need to be careful of the order you write them. For instance you have a functions.js file that holds all your functions, and a menu.js that handles the menu on your application. You're using functions from the code functions.js in menu.js so you need to import the files in this order:
<script src="functions.js"></script>
<script src="menu.js"></script>
First declared, first loaded.
You can write own function like this:
Here you can see simple example: https://jsbin.com/munowupipo/edit?html,output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Define a Function in jQuery</title>
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.fn.myFunction = function() {
alert('You have successfully defined the function!');
}
$(".call-btn").click(function(){
$.fn.myFunction();
});
});
</script>
</head>
<body>
<button type="button" class="call-btn">Click Me</button>
</body>
</html>
Maybe you want to take the function on document is ready, so you must to write:
<script>
$(document).on("ready", function() { yourfunction(); });
</script>
The code below runs fine on my first PHP file, but when I load another file and use the same script, it does not appear to work, I get no alert from alert (idstate);. The CSS/HTML works fine.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("li").click(function(){
if (event.target.id!=""){
var idstate=(event.target.id)
alert (idstate);
$.post( "somepage.php", { variable: idstate}, function(data)
{
alert(data);
});
}
});
});
</script>
when You load another file you have to link that with your php page.<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
<script src="path/custom.js"></script>
Whenever I put the script in another file in the same folder as script.js, it doesn't run. It only runs when I include my code in the script tag.
I tried it out with this simple jquery code. Whenever the third script tag is uncommented, it works, but the set up I have right now doesn't run.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" scr="script.js"></script> // <!-- doesn't run -->
<!--script> // <!-- only runs inside the html file -->
$(document).ready(function(){
$('p').click(function(){
$(this).hide();
});
});
</script-->
</head>
<body>
<p>Click to hide.</p>
</body>
</html>
script.js
$(document).ready(function(){
$('p').click(function(){
$(this).hide();
});
});
Does anyone know what I am doing wrong?
scr is not src. Use a validator to make sure you haven't misspelt attribute names.
Your jQuery code is being duplicated inside the script.js file and .html file so that's why the code won't run.
Remove the jQuery code from the .html file and your code will run. Also like was mention above replace scr with src in your .html file.
Finally, I'd replace the code in your script.js file with the new code listed below as click(function(){} is older code:
$(document).ready(function(){
$("p").on("click", function(){
$(this).hide();
});
});
I moved a function from an html page to an included reference file. It stopped working.
The complete contents of the file are:
alert('file included');
function doAlert() {
alert('functions work');
}
In the html page, I have
<html>
<head><title>Page</title></head>
<body>
HTML Template Header
Some Content
ASP.NET MVC Partial View Starts
<script type="text/javascript">
doAlert();
</script>
ASP.NET MVC Partial View ends
HTML Template Footer
<script type="text/javascript" src="/Scripts/wtf.js"></script>
</body>
</html>
The 'file included' alert works, but the 'functions work' does not. What am I doing wrong?
Make sure you include the file before you execute the function.
<script src="file.js" type="text/javascript"></script>
<script type="text/javascript">
doAlert();
</script>
you should call your function(s) in the following way:
window.onload = function() {
doAlert();
// func_1();
// func_2();
// func_3();
// ...
// func_n();
};
See this for more information about the window.onload event.
Code example on jsFiddle