I'm trying to use JSON for the first and I use the code:
var url = 'http://where.yahooapis.com/geocode?q=Vancouver&flags=J&count=10&lang=en&appid=' + myAppId + '&callback=?';
$.getJSON(url, function(data){
console.dir(data);
});
but I get on IE8 the error :
'$' is undefined
what am I doing wrong?
thanks.
Looks like you are trying to use jQuery and the script include is missing.
Include the URL for jQuery.js before using the $.
Try to place something like:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
before the getJSON
$ is provided by a couple JavaScript libraries, the most common of which is jQuery.
If you're not including jQuery in your page, that's likely your issue.
Looks like you're not including JQuery before making this call?
the $ symbol is used by JQuery. Do you have the script for jquery included in the web app before you are using it ?
add this at the top of the offending page.
<script src="{Change this to the path to your jquery.js file}"></script>
Related
I have a static site hosted on GitHub Pages which is starting to grow in size. Normally I would use server side includes (<?php include('path to file'); ?>) to bring in header, footer and any navigation files. However php doesn't run on GitHub Pages.
Is HTML5 embedding which adopts a sort of iFrame technique my only option here?
I have seen threads such as this, this, this, this however they do not seem to apply for GitHub pages.
Not really ideal.
Thanks.
Jekyll is a common solution for this. It is a static site generator that allows you to use Liquid templates, and is made to run on GitHub's servers.
A great example of the {% include %} feature can be seen on the documentation pages from Twitter Bootstrap, which make use of includes for header.html and footer.html:
Use templates and preprocess them at build time (as opposed to run time). You could set them up to build as a git commit hook.
There are a lot of tools for doing this listed here, I'm fond of ttree.
I know this is a late answer, but here's something I stumbled on recently.
Turns out that the guys over at http://w3schools.com/ created some simple JavaScript code as an alternative to SSI:
<!DOCTYPE html>
<html>
<script>
function w3IncludeHTML() {
var z, i, a, file, xhttp;
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
if (z[i].getAttribute("w3-include-html")) {
a = z[i].cloneNode(false);
file = z[i].getAttribute("w3-include-html");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
a.removeAttribute("w3-include-html");
a.innerHTML = xhttp.responseText;
z[i].parentNode.replaceChild(a, z[i]);
w3IncludeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
return;
}
}
}
</script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
Here's an example.
I wrote two bashscripts that does what you are looking for (same reason you are askimg actually). Right now it is extremly basic, but it may be helpful for you. Documentation is nonexistamt, but should be easy to figure out and make work for your site.
https://gitlab.com/frc-team-8733/website/-/tree/master/tools
I made a video about how to Import custom HTML templates using AJAX. It will run the script tags in the imported HTML without using eval(), and the script tag you use to make the import call will replace itself with the imported code, so there's no nesting in divs. It's basically a really clean AJAX site builder. Here's the link: https://www.youtube.com/watch?v=ZqD61tIoG2s&t=18s&index=1&list=PLRJ8uW8FBcZJMiFbPNG67lsFHhFF1k322
The source code can be found in the video description.
jQuery load() works well for this.
SSI should be supported!
<!--#include virtual="layout.html" -->
The file that contains the above line must end with ".shtml" or ".shtm" extensions!
When I load Jquery from CDN, it is working but the problem is I cant do validation of fields that are defined in rules() method. But when I don't
load custom Jquery version from CDN then validation is working.
Also, I am getting jQuery(...).yiiActiveForm is not a function in the console when I load Jquery from CDN and if I use inbuilt Jquery then no error.
You can use jQuery.noConflict for your second, non-yii jQuery and use another var name instead of $. In this example i use jq
var jq = jQuery.noConflict();
// Do something with jQuery
jq( "div p" ).hide();
// Do something with another library's $()
$( ".content" ).hide();
You can add this line in your template after your tag with jQuery.
<script>var jq = jQuery.noConflict();</script>
If you use an Asset, just load an additional .js script with that line.
Anyway, you should avoid this entirely if you can.
From the documentation:
If for some reason two versions of jQuery are loaded (which is not
recommended), calling $.noConflict( true ) from the second version
will return the globally scoped jQuery variables to those of the first
version.
I'm using the angular-fullstack yeoman generator in my project.
It contains Jquery by default.
<script src="bower_components/jquery/dist/jquery.js"></script> is correctly inside the index.html
Curiously, in my js file, Jquery works perfectly inside this:
window.onload=function() {
//my jquery code working here
}
But, it doesn't work at all if I put in this instead :
$(document).ready(function() {
// my code is not working here :(
});
And from there, I'm getting some trouble. When I switch from a page to an another one, Jquery stopped. I need to refresh the page to keep Jquery working.
I might not have this problem if my Jquery code was inside $(document).ready(function()
As I'm using angular-fullstack generator which already makes almost every thing in my project, I don't know where I need to make some change to make it works ..
Any suggestion ? Thanks a lot. :)
As far as I know using jQuery with AngularJS is not a good practice. Generally if in your angular project you need to use jQuery it means you have to create a custom directive to have some logic there or less ideal alternative is to use angular.element which comes with jQuery lite features.
Regarding your problem please test if this will work:
jQuery(document).ready(function($) {
// example $('.btn').hide();
});
I have a local test-page. The URL is:
file:///C:/Users/User/Desktop/HTML/TEST/URLREST/Test.html
I only want to change the URL in
file:///C:/Users/User/Desktop/HTML/TEST/URLREST/Test.html?id=2
or something like that. Just a different URL.
How i can manage that?
I wrote this site in html.
With javascript
<script type="text/javascript>
window.location.href = 'file:///C:/Users/User/Desktop/HTML/TEST/URLREST/Test.html?id=2';
</script>
I'm doing a simple AJAX post request in jQuery to another page on my site to get an XML document response. I'm putting the response into a pre element with syntax highlighting enabled. The response comes through fine (I can alert it), but it isn't being added to thepre element when I attempt to assign it in the handlResponse function with jQuery.
<head>
<script>
...
function handleResponse(response, status)
{
$("#output").text(response);
}
$.post(url, data, handleResponse, "text");
...
</script>
</head>
...
<pre id="output">
</pre>
Just to be clear, the javascript code above is in jQuery's document ready function. Any help would definitely be appreciated.
Three things:
Is the response being passed correctly? Check by doing alert of response from within the function itself.
Is the function being called correctly? Check by having it do an alert unrelated to the response variable (alert("Yo!")).
Is the text being inserted correctly? I can tell it should work, but for sake of full debug, add a ternary like this:
var preText = (response != "") ? response : "The problem is with the reponse";
Try using html instead of text...
$("#output").html(response);
EDIT: If you think escaping is the issue, the following should escape it well enough to display...
response = response.replace(/</g, "<");
$("#output").html(response);
Apparently this is a bad question. I'm using the javascript lib SyntaxHighlighter and had preloaded the syntax highlighting on the pre tag I was attempting to use. My solution was to remove the tag and dynamically create it when the ajax response comes in. This worked well other than the fact that I'm trying to determine how to load the highlighting on a dynamically appended dom element.
Thanks for the responses.