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
Related
::SOLVED::
I have an index.php and I define some JavaScript function for do some thing in this page. I use jQuery in this functions. When I put the functions in the index.php between tags all thing work good but I need to put this functions in external is file. When I do it and then import it in index.php, the js file load and the part that don't use jQuery, work good but the jQuery actions not work! I have put the jQuery before is in head of index.php. the jQuery load and I test it by simple alert. I tried to put $(function).ready() surrounding the js function and other time surrounding the function content but it doesn't work!
<script language='javascript' src="/js/jquery-3.4.1.js"></script>
<script type="text/javascript" language='javascript' src="/js/external.js"></script>
And external js file like this:
function doSomething(){
//some JavaScript code that work good
//some jQuery code that doesn't work!
}
Where is wrong?!
Excuse me for my stupid question!
First of all write better HTML code.
<script src="/js/jquery-3.4.1.js"></script>
<script src="/js/external.js"></script>
function doSomething(){
console.log("I'm executed");
if (typeof jQuery !== 'undefined') {
console.log(jQuery.fn.jquery);
} else {
console.log("jQuery library not loaded check your Network tab");
}
}
Then seems your jQuery not loaded check your network tab for loaded scripts.
I hava many jsp page using the common function in body's onload and onunload event when using ocx control.So I extract the common function in one js file call common.js and import the js file in the jsp page.But I find the sometimes the jsp page could not execute the function in js file.Finally,I solve the problem in two way but I think there must have the other simple way?How to simplify my js code?
write all the js function in each jsp,it works well
in the each jsp file,includ the common.js,and in the jsp file the script call the function before load the common.js,but I think it have already be loaded two times
//init(),asynclogin_onclick(),logout_onclick() function is in the common.js file
<head>
<script type="text/javascript" src="/js/common.js"></script>
</head>
<body onload="init()" onunload="logout_onclick()">
$(function(){
$.getScript("/js/common.js")
.done(function(script,textStatus ) {
asynclogin_onclick();
});
});
I try to write the code like this,but it could not work.
$(function(){
asynclogin_onclick();
});
jQuery:
$(document).ready(function(){
var url='http://query.yahooapis.com/v1/public/yql?q=select * from html where url=\'http://stackoverflow.com/\' and xpath=\'//div[#id="question-mini-list"]//h3//a \'&format=json&callback=?';
$.getJSON( url, function(data){
$.each(data.query.results.a, function(){
$('#stack').append('<div>'+this.content+'</div>')
})
})
});
HTML
<section id="stack">
</section>
The jQuery code is borrowed from an earlier post (Thanks!), but my question is: Shouldn't the jQuery code run when the page loads, the way it's displayed here? Im using coda 2. The jQuery is saved as .js-file, and the html is saved as .html. Both files are located in the same directory.
Thanks for any and all help!
Make sure you define a link to your javascript file in the <head> of your index.html page.
<script rel="javascript" type="text/javascript" src="path/to/javascript.js"></script>
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! :)
I am trying to write my javascript functions in a separate file functions.js. Right now that file consists of one function:
function noOverlay() {
$('.overlay').css('display','none');
};
In my html I have these two lines:
<script type="text/javascript" src="/functions.js"></script>
<script>
$(document).ready(
noOverlay()
);
</script>
Essentially what I am trying to do is house a function in an external file and call it in my html. Maybe $document.ready isn't the right way to do this. Or maybe I am just making a silly mistake. Thanks!
Make sure you are importing jQuery and try:
<script type="text/javascript" src="/functions.js"></script>
<script>
$(function () {
noOverlay();
});
</script>
$(document).ready(function(){
noOverlay();
});
Check to make sure the js file was loaded with firebug or chrome's dev tools
Also make sure you load jQuery beforehand as well.