I know this shall be a very silly question but some years have passed since the last time I developed some javascript.
I'd like to brush on that and so I decided to learn some Dojo.
The problem is that I can't manage to get this simple Dijit example working
As far far as I understand it should produce a button with a Click Me label but the only thing I get is an empty button. It seems the script is not executed. What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Dijit</title>
<!-- load Dojo -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dijit/themes/claro/claro.css">
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad: true"></script>
</head>
<body class="claro">
<button id="btn"></button>
<script>
require(["dijit/form/Button", "dojo/domReady!"], function(Button) {
var button = new Button({
label: "Click Me!",
onClick: function(){ console.log("First button was clicked!"); }
}, "btn");
button.startup();
});
</script>
</body>
</html>
If you're loading the page using a file:// URL (or double-clicking the file), it won't work due to the schema-less URI's you're using to load the stylesheet and dojo.
Try adding the protocol "http" before the leading pair of slashes in the respective link & script tags.
See also Can I change all my http:// links to just //?
Related
I am evaluating GrapesJS. I installed it like described here and added the module "blocks basic" and installed it like described here. (Simple basic installation.)
On a very simple, empty HTML5 page, I wanted to try things out:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="dist/css/grapes.min.css">
</head>
<body>
<div id="gjs"></div>
</body>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="dist/grapes.min.js"></script>
<script src="node_modules/grapesjs-blocks-basic/dist/grapesjs-blocks-basic.min.js"></script>
<script type="text/javascript">
var editor = grapesjs.init({
fromElement: 1,
container : '#gjs',
// components: '',
style: '.txt-red{color: red}',
plugins: ['gjs-blocks-basic']
});
</script>
</html>
Everything is working great, but I cannot add any column block. When I drag on the one/two/three columns-elements on the editor, absolutely nothing happens. There is no error on the browser's console. Everything else works fine.
So I guess, I am missing some sort of configuration flag or so?
(Posted on behalf of the OP).
The code above works fine, it was an issue with my local development environment. After uploading this sample to http://brokenlande.de/grapesjs/ to share it with the lead developer on GitHub, the code works perfectly fine.
I am trying to use jQuery for the first time and I am coding it by hand. But my jQuery code doesn't work at all... Here's my setup :
Index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="mainCSS.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="mainJQuery.js"></script>
</head>
<body>
<div class="test"> </div>
</body>
</html>
mainCSS.css
.test {
background-color:#FF0004;
border-radius:25px;
display:block;
height:500px;
width:500px;
}
mainJQuery.js
// JavaScript Document
$(document).ready(function() {
$('.test').click(function() {
$('.test').fadeOut('slow');
});
});
Just to state it for the record:
In order for your jQuery code to work, you need to link to the jQuery library in your HTML.
If you are following a tutorial that doesn't include this in the first step, you should find another tutorial to follow. If you got to this question because you did not follow the first step of your tutorial, you should read more carefully before falling back on StackOverflow, or risk getting some serious downvotes.
The two most common ways of including jQuery in your HTML page are:
1) Downloading the library, and linking to a local copy. In your <head> section:
<script type="text/javascript" src="/url/path/to/local/jquery.min.js"></script>
2) Linking to a remote copy of the jQuery on Google's CDN. Again, in <head>:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
If you don't link to jQuery using one of those options, or something similar, your code will not work. In most browsers you will be able to tell that this is the problem by opening the Javascript console, typing "jQuery" and getting an error like jQuery is not defined.
It's amazing that I couldn't find a duplicate question to close this in favor of, but then again I didn't click on every single "Why doesn't this simple jQuery script work" question on StackOverflow.
And there are a lot.
I am trying to create a webpage including an iframe where the iframe has customizable content. Its an API project.
My main issue is not how to manage appending content to an iframe using jQuery, but in this case I have an empty iframe where I want to insert a full webpage into it. The code for the webpage going into the iframe is received using a .post function where I in return get the full webpage in the data variable.
I can't manage to insert the full code, which include local javascript with important javascript libraries. It is as if it doesn't execute the code inside the iframe. The code is inserted but all the main html/body etc tags are deleted from the code passed in data variable, which prevents various javascript code from working.
I have of course checked that the page received in data variable is ALL of the code. It is correct. The missing tags are missing when displayed in the iframe.
(parent page, domain unknown to me as a API provider)
<body>
<iframe id="EMSNLframe" srcdoc="" seamless></iframe>
<script>
$("#EMSNLframe").load(function(){
$.post("https://api.educationalmedia.se/API_displayNTNewsLetterMenu",
{
ResUID:"[secret code]",
MenuLanguage:"English",
PDFLanguage:"" // Blank for all languages, or state a language
},
function(data,status){
$("#EMSNLframe").contents().find("html").html(data); //<---- this is the line I need a solution for! If there is any.
});
$("#EMSNLframe").contents().find("head").append($("<style> #EMSNLmenu{font-family:'Arial',sans-serif;font-size:12px} </style>"));
});
</script>
</body>
Webpage received in data variable:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<meta charset="utf-8">
<link href="https://data.educationalmedia.se/styles/kendo.common.min.css" rel="stylesheet" type="text/css" >
<link href="https://data.educationalmedia.se/styles/kendo.default.min.css" rel="stylesheet" type="text/css" >
<script src="https://data.educationalmedia.se/js/jquery.min.js"></script>
<script src="https://data.educationalmedia.se/js/kendo.core.min.js"></script>
<script src="https://data.educationalmedia.se/js/kendo.popup.min.js"></script>
<script src="https://data.educationalmedia.se/js/kendo.menu.min.js"></script>
</head>
<body>
<div class="EMSNLmenu">
<!--#4DHTML HTMLmenu_t--> Don't mind this line of code. It is server side tags for data
</div>
<script>
$("#EMSNLmenu").kendoMenu({
animation: { open: { effects: "fadeIn" } },
orientation: "vertical",
closeOnClick: true,
openOnClick: true,
direction: "bottom right"
});
</script>
</body>
</html>
I am trying to use jQuery to open an href inside a div, rather than simply linking to the new page. I have viewed a number of tutorials but the load() function does not seem to be working for me.
Please take a look at my code and let me know what piece of puzzle is missing.
Here is my HTML page:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Jquery</title>
</head>
<body>
<!-- nav links to open in div#content area -->
<a class="menu_top" href="pages/home.php">Home</a> | <a class="menu_top" href="pages/about.php">About</a> | <a class="menu_top" href="pages/contact.php">Contact</a>
<!-- div for links to open in -->
<div id="content-area"></div>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
</body>
And my jQuery Javascript:
$('.menu_top').click(function() {
var href=$(this).attr('href');
alert (href);
$('#content_area').load(href);
//return false;
});
I added alert to make sure the URL was being retrieved, and it is, then it would completely load then new page. So I added "return false" and it did nothing after the alert suggesting that the load() was not working.
Initially was running this through WAMP so I tried running the page directly from the folder and the browser tried to download the linked pages instead of opening them. I also tried uploading to a remote web site and got the same result as on WAMP.
Try:
$('.menu_top').click(function() {
var href=$(this).attr('href');
alert (href);
$('#content-area').load(href);
//return false;
});
Because your div is called #content-area, not #content_area.
So, I would like to be able to have people click on a link, and the an input field with a file will open. But I only want this to happen if the browser has support for it. As pointed out in this answer, chrome supports this. Firefox 3.6 does not, but Firefox 4 should.
I know you can frequently test for support of features in javascript, but I'm unsure how to test for this feature.
If you'd like to see what I mean, the below code shows the feature when clicking on the link. You can also play with this on my page.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Upload Field Click Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var clicker = document.getElementById('clicker');
var uploader = document.getElementById('uploader');
clicker.addEventListener("click", function(e) {
uploader.click();
e.preventDefault();
}, false);
});
</script>
</head>
<body>
<form>
<input type="file" id="uploader">
</form>
Should click the uploader
</body>
</html>
Things that do not work:
testing !uploader.click
seeing if uploader.click() throws an exception
You could use JQuery to dynamically write the HTML into the document at the appropriate place
$("#mylinkID").after('Whatever');`
and the link would be added after the element that contained the ID "mylinkID". If no support for JS, the link doesn't get displayed.