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>
Related
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
I’m including one HTML file in another, as a way to reuse my header and navigation generation logic.
The trouble is that when I browse to pages on my site, I can see the HTML that isn’t included in the include files load first. Only then you can see the menus and banners load afterwards. I’d like everything to appear to load at the same time.
Here's the rendered HTML.
And here’s a code snippet showing you how I generate these pages:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="assets/js/jquery-2.1.3.min.js"></script>
<script>
$(function(){
$("#includeHeader").load("includes/templates/header.html");
$("#includeNavigation").load("includes/templates/navigation.html");
});
</script>
<div id="includeHeader"></div>
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<div id="includeNavigation"></div>
I’m currently working with the code to try to move any external libraries / CSS to the bottom of the page vs. in the header. But so far, that hasn’t really changed or improved anything.
You should use one of the templating languages.
If your includes are simple HTML files then you could use Handlebars or Dust - you could just copy your code and that's it, then in Javascript you would need just render these templates - see the documentation.
You could use Jade/Pug instead, but its syntax is different from the HTML, so that's not just question of copy-paste.
You are using $(handler) to load them, which is a form for $.ready(). So it waits for the document to load everything before loading your header.html and navigation.html.
Try
<head>
<script src="assets/js/jquery-2.1.3.min.js"></script>
</head>
<body>
<div id="includeHeader"></div>
<script>
$("#includeHeader").load("includes/templates/header.html");
$("#includeNavigation").load("includes/templates/navigation.html");
</script>
</body>
Your problem is that the load function does not run until the document.ready event has fired. Which is probably after your page has started rendering. To get everything to appear at the same time you could use the callback from .load to show everything. So everything is hidden,
$( "#result" ).load( "ajax/test.html", function() {
/// show your stuff
});
You will of course need to know both has loaded.
I would recommend not using javascript to render HTML from a static path and would use a server side lang instead for speed.
I think it make some level fast its not waiting for load all dom element, I am considering #includeNavigation element is under #includeHeader element
<head>
<script src="assets/js/jquery-2.1.3.min.js"></script>
</head>
<body>
<div id="includeHeader"></div>
<script>
$("#includeHeader").load("includes/templates/header.html", function(data){
console.log("header loaded");
$("#includeNavigation").load("includes/templates/navigation.html", function(data){
console.log("navigation loaded");
});
});
</script>
</body>
I have this code in the footer of my html page
<script type="text/javascript">
// using jQuery
$('video,audio').mediaelementplayer();
</script>
the above code is adding video player on the html page.
Now I have created a separate js file in which I have already have some line of code which is creating owl sliders, tooltips, number counters etc.
When I add the above code into that separate js file it does not work, instead when I keep it in the footer of the html page it works fine.
Try placing your code within $(function(){ ... }. This will execute when the DOM is loaded (currently your code is being executed before jQuery is loaded, if you check the JavaScript console, you will see an error something like $ is not defined)
$(function(){
$('video,audio').mediaelementplayer();
});
or
$( document ).ready(function() {
$('video,audio').mediaelementplayer();
});
You can read about what that is doing here. $(function() is the same as $( document ).ready()
your html(basically) should look like this:
<html>
<head>
</head>
<body>
<!-- html code here -->
<!-- add jquery lib -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- your script -->
<script src="you/file/path.js"></script>
</body>
</html>
and your jquery file:
jQuery(function($) {
// your functions here
$('video,audio').mediaelementplayer();
});
Do you have a proper link to the separate js file in your page, generally at the bottom of the body? It should look something like this:
<script type="text/javascript" src="/joyride_odoo_models/static/js/scripts.js"/>
If you've done that properly, have you tried clearing your browser cache? You may need to do that to detect new javascript files.
How do you call your external js file ?
You must add your references js before your external js file.
you must add your function on document.ready.
You may wait until jQuery is full loaded or ready.
Ex.
$(document).ready(function($) {
// Your code goes here
$('video,audio').mediaelementplayer();
});
This code goes in external js file, then you need to include the file in the HTML
<script type="text/javascript" src="path/to/your/js/file"></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'm learning jQuery, and I'm running into a small problem. jQuery code works when I put it directly in my tags in my HTML, but when I import it from a different file, nothing happens. These are my script tags in HTML:
<script type="text/javascript" src="scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="scripts/test.js"></script> <!--This is my jQuery code-->
test.js contains the following code:
$(document).ready(function(){
console.log("Hello");
});
When the page loads, the console is empty. However, when I paste the following code as so, in my html document, everything works fine.
<script>
$(document).ready(function(){
console.log("Hello");
});
</script>
Do you really have a folder named scripts in the folder where your HTML files exist? Otherwise try changing this src="scripts/jquery-1.10.2.js" to probably this: src="/scripts/jquery-1.10.2.js"
You can check by browsing to http://yoururl/scripts/jquery-1.10.2.js, the Jquery code should show up. If it's not there, you have to make sure that you include the right folder/file.
Yes.You will be able to push your scripts in 2 ways::
1-push your scripts in tag like>>
<script>$(document).ready(function(){alert("Welcome Dear");});</script>
2-push your inline scripts with attributes like>>
<button type='button' onclick="$(this).hide()">Hide Me</button>
make sure that the scripts folder contain test.js make sure that the extension is correct ..sometimes I make the same same mistake, instead of test.js i save it as test.js.txt
Try putting
<script type="text/javascript" src="scripts/jquery-1.10.2.js"></script>
in the body rather than the head.
Credits to this answer for giving the idea