On my index.html I am doing the following:
<script src="jquery/jquery.js"></script>
<script src="managment.js"></script>
<script src="jquery/jquery.mobile-1.1.0.js"></script>
After doing some calculation, I have the need of using a function from the managment.js file:
$.getScript("managment.js", function(){
alert("Script loaded and executed.");
login();
});
}
And finally the managment.js file:
<script type="text/javascript">
function login(){
alert("asdasdasdasdasdasd");
}
</script>
My issue, is that the login() function is never called. Actually the alert I have inside getScriptfunction is not called either, but the strange thing is that if I check if the jquery.js file is loaded the alert is called. More, if I try to call login() without doing getScriptnothing happens has expected. My files structure is the following:
(note: you can see that I am using 2 managment.js files. I tried both approaches to see if the problem was with the path of the file.)
What am I missing here? For relevance, I am using PhoneGap, but this isn't working on the browser as well.
The management.js file should not contain the <script type="text/javascript"> tag. It should be:
function login(){
alert("asdasdasdasdasdasd");
}
Hope it helps! :)
Related
I'm working on a spring mvc application, and my javascript is directly in my html files. For whatever reason, this code is never executed. I even have a coded in breakpoint and it's never hit. No errors or anything are thrown from the chrome debugger. It seems like nothing runs at all, even when I write jibberish. I've tried explicitly defining jquery in case there were any conflicts, but there is nothing. This is the code on the bottom of my page.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
$(document).ready(function(e){
debugger;
alert( "ready!" );
});
</script>
You should not use any script inside the script tag which is used to link a js file. Create another script tag and paste your code in it:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("ready!");
});
</script>
I currently call a file using onload in javascript.
It works fine, I just can't seem to get it to work in Laravel, if I load an html file it's fine, but not a php file.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#query").load("test.php");
});
</script>
</head>
<div id="query"><img src='https://m.popkey.co/163fce/Llgbv_s-200x150.gif'/></div>
<div id="query2"><img src='https://m.popkey.co/163fce/Llgbv_s-200x150.gif'/></div>
Results are blank.
The test.php file is located in the public folder, it just has a simple echo in it:
<?php echo 'This is Working';
I have a test.html in the same folder that returns what ever I put in it perfectly, it seems to be an issue with javascript pulling the php file.
If i run this url : https://domain/Home/public/test.html it works fine, if i run this url https://Domain/Home/public/test.php it also works fine. The test.php echo's out This is Working
I had a similar issue a while back.
What i did was not run the file directly from the public folder, i created a Route.
Route::get('test.php', function(){
echo 'This is Working';
);
Now you can either run what you want directly from this function or return it to your view.
Now you can use :
<script type="text/javascript">
$(function() {
$("#query").load('test.php');
});
</script>
What Configuration are you using? This link shows that it's a problem using Laravel Valet. Github Issue Here.
I would recommend that you use an API route for loading these images and try to keep everything within the Framework for the sake of neat and tidiness?
But for a quick solution:
Route::get('foo.php', function () {
return 'foo';
});
API: (Within routes/api.php
Route::get('/test', function () {
return asset('assets/images/image.jpg');
});
and your JS would point to your URL of the Route.
Add the script tag of jQuery function in body and make sure you have used jQuery CDN for access the jQuery function
Can you please try this?
$("#query").load("{{ asset('public/test.php') }}");
I think this solve your problem
HI i am facing some problem while calling function from index.html on load event
it return error readjson is not defined in console.
index.html
<script type="text/javascript">
$(window).load(function () {
readjson('a','s');
});
</script>
main.js file
<script type="text/javascript">
function readjson(val1,val2){
//some code
}
</script>
Can anyone tell me why it is not able to call, i have link main.js file to index.html
JavaScript files shouldn't include any HTML.
Remove <script type="text/javascript"> and </script> from main.js.
You should see an error when that file is loaded (along the lines of Unexpected token <).
Call it like this inside the js file without the "script" tag :
function readjson(val1,val2){
//some code
}
In index.html you need the "script"
And follow the advice given in the comments, always include first the .js file and then the function in the index.html
Did you add jquery link properly??
If not, you should add jquery link for $(window) to be called. such as..
<script src="http://code.jquery.com/jquery-latest.js"></script>
If you actually have two script declarations as you are showing here the the window load will fire first. It then look for your function, which has not been created yet. That's why you are getting undefined.
You could have one script declaration on the page and place your function in the load function.
<script>
$(window).load(function () {
readjson('a','s');
function readjson(val1,val2){
//some code
}
});
</script>
Remove tags from main.js:
<script type="text/javascript"> and </script>
and remember to include jquery and main.js with:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script src="test.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<script>
functionFromAJS();
</script>
</body>
</html>
this works OK most of the time, but on production server, its not 100%. It says that functionFromAJS() doesnt exists, which is ok, if the .js is not gets loaded in time. But then what to do?
EDIT: Using the window.onload function should not do any difference as long as the script you're embedding is loaded before the function call. Then the a.js file will be loaded before <script>functionFromAJS();</script> anyway and you should be able to execute the function if it exists.
Try using:
<script>
window.onload = function() {
functionFromAJS();
};
</script>
So that the function is not called before the document is fully loaded.
Or if you're using jQuery you can use:
<script>
$(document).ready(function() {
functionFromAJS();
});
</script>
If the function doesn't exist, then it's not a matter of the file not being loaded in time, then the file isn't loaded at all.
When the browser encounters a script tag for loading a file, then it will stop the parsing of the page until the file has been loaded, or until the file fails to load. The functionFromAJS will never be called before the browser has completed the attempt to load the file.
If the file fails to load, then there isn't much you can do. You can check if the function exists before you call it to avoid the error. You could even try to load the script again, but if it failed the first time then it's likely that it will still fail.
I am trying to call a function that, on the load of the script above it, will run some JavaScript.
<script src="../Layout/jquery.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="helperscript.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var itemid = '1';
if(itemid)
{
idselect(itemid);
}
})
</script>
helperscript.js contains the function idselect.
When I load the page I get an error saying that 'idselect is undefined', even though it is in the above file. I suspect that this is due to helperscript not being fully loaded yet, but that is just a hunch.
Can anyone help me?
Scripts load in order and are blocking.
There must be a problem with the loading of the script, not the timing.
Most likely you have either a mistake in the URL (resulting in a 404) or a JavaScript error (which would show up on the error console)
I don't think your hunch is right, because this script tag:
<script type="text/javascript" language="javascript" src="helperscript.js"></script>
should block any other javascript from executing until helperscript.js is downloaded and executed.
Use jQuery.getScript() and register a success function. It will be safe to use idselect on or after the success function is executed.
http://api.jquery.com/jQuery.getScript/
Make sure your path to the script to the .js file is correct.
Also cut the language="javascript" part.