I've recently ran into a problem and I would really use a bit of help from the community. I'm trying to load a HTML file using jQuery load().
The index file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question</title>
<meta http-equiv="Content-Type" Content="text/html; charset=euc-kr" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function restart(){
$("#wrap").load('new-content.html').hide().fadeIn('slow');
}
</script>
</head>
<body>
<div id="wrap">
<div id="content">Text before restart: 남성</div>
</div>
<br />
Restart
</body>
</html>
The new HTML file includes some simple HTML content and a call to a .js file (used for some animations). The new content file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question</title>
<meta http-equiv="Content-Type" Content="text/html; charset=euc-kr" />
<script src="main.js" language="javascript" type="text/javascript" />
</head>
<body>
<div id="contentInner">Text after restart: 여성</div>
</body>
</html>
As you can see I've included the correct encoding charsets (for both files) and I've double checked and I can confirm that every file used for this part of the code it's encoded as "KOREAN" (checked in different apps like Dreamweaver, Notepad++, Sublime Text 2).
Yet still once I load the content the characters are not encoded properly; question marks appearing instead of characters.
Of course I made some searching before posting and I found a few helpful topics about this called the PHP header solution, but this isn't an options since it need to use HTML/JS/CSS only.
The same behavior occurs when I'm using the Japanese language too. In other latin based languages everything is working perfectly fine of course.
Any sort of input/advice/help would be much much appreciated.
Thank you!
Related
I use IE 11 with the scripting option enabled. Even on other browsers it does not work. Using notepad++ to code and run... I'm currently learning javascript. I have a .js and .html file - the html has 3 sets of headings/paragraphs where the paragraphs should only show if i click the headings. This does not work. I downloaded a copy of the java library as well... I assume it has something to do with the Doctype statement ?
Any thoughts:
mcode.js
$(document).ready(function() {
$("p").hide();
$("h1").click(function() {
$(this).next().slideToggle(300);
});
});
myhtml.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Heading one</h1>
<p>This is just some text for heading 1</p>
<h1>Heading two</h1>
<p>This is just some text for heading 2</p>
<h1>Heading three</h1>
<p>This is just some text for heading 3</p>
<!-- FIRST BELOW POINTS TO WHERE THE JAVA SCRIPT LIBRARY IS -->
<!-- SECOND IS MY JAVASCRIPT CODE THAT WILL BE USED -->
<!--<script type="text/javascript" src="jquery-1.8.0.min.js"></script>-->
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>
</body>
</html>
You have listed your javascript as mcode.js in the question, but referenced src="my_code.js". Change your src in the html to the correct file and it should work fine.
<script type="text/javascript" src="mcode.js"></script>
That should be what you are after :)
You have to add mcode.js in your html file. Add a script in your head linked to mcode.js.
This is the file I am trying to run, but all it does is open the web page with the page title, it doesn't run the script.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html lang=”EN” dir=”ltr” xmlns=”http://www.w3.org/1999/
xhtml”>
<head>
<meta http-equiv=»content-type» content=»text/xml;
charset=utf-8» />
<title>HelloWorld.html</title>
<script type = «text/javascript»>
//<![CDATA[
// Hello, world!
alert(«Hello, World!»);
//]]>
</script>
</head>
<body>
</body>
</html>
I tried running on aptana and notepad, neither show the dialog box. I feel like I am forgetting a small yet significantly important part?
Your quotes are a combination of angled quotes (« and ») and smart quotes (“ and ”). You need "regular" quotes, ", in both HTML and JavaScript. If your keyboard is automatically configured to do that replacement somehow, try using single quotes instead, or just swapping keyboard layouts for coding.
You need to enclose single ' ' or double " " instead of « ».
Here is the corrected codes,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/
xhtml">
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>HelloWorld.html</title>
<script type = "text/javascript">
//<![CDATA[
// Hello, world!
alert("Hello, World!");
//]]>
</script>
</head>
<body>
</body>
</html>
I have come across http://redactorjs.com which is a very nice wysiwig editor that has on air ability. In other words, in one single line you can turn a static div into an editable text area on the fly.
I -do not- want to pay for it (for some reasons I won't disclose) hence I am looking for an alternative.
Have you ever used a lightweight wysiwig jquery based editor that is easily usable on the fly?
I am looking for something I would use as follow:
$("#edit_btn").click(function({
$("#my_div").turnIntoEditor();
}));
$("#save_btn").click(function({
$("#my_div").post_content("http://target");
$("#my_div").turnIntoStatic();
}));
Please do not mind the post_content thingy and other function names as they are just given for reference to show the kind of usage I am looking after.
Thank you
I finally went for ckeditor. I could use it easily as follow (poc):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
<title>Title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#edit").click(function(){
$( '.editable' ).ckeditor();
});
$("#save").click(function(){
var editor = CKEDITOR.instances['editor'];
if (editor) { editor.destroy(); }
alert($('#editor').html());
});
});
</script>
</head>
<body>
<span id="edit">EDIT</span> <span id="save">SAVE</span><br/><br/>
<div class="editable" id="editor">
Some useless content
</div>
</body>
</html>
I'm trying to embed a simple Quartz Composition into a webpage using the embed tag. According to Apple's documentation and the API reference, this should be a very simple task, but selecting the embedded object in JavaScript doesn't expose the API.
Here's my page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Quartz Test</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="main">
<h1>Quartz Test</h1>
<hr/>
<div id="content">
<embed type="application/x-quartzcomposer"
src="lineTest.qtz"
id="myComp"
width="300px"
height="150px"
opaque="false"/>
</div>
</div>
</body>
</html>
and here's my js:
var composition;
$(document).ready(function() {
composition = $('#myComposiiton');
});
With this simple setup I should be able to write something like...
composition.loaded() //should be true
or
composition.inputKeys() //should return Array
Instead all I get are errors in the debugger like, TypeError: Result of expression 'composition.loaded' [undefined] is not a function.
Has anybody been through this or have suggestion on how I might be able to debug it?
Thanks
Have you tried the obvious composition[0].loaded() ?
The jQuery $ function returns an array of DOM elements that match your selection, even if there is only one element that matches.
I have an XHTML 1.0 Strict document in which I'm trying to make Shadowbox work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="Content-Type" content="text/html; charset=UTF-8" />
<title>Test page</title>
<link rel="stylesheet" type="text/css" href="shadowbox.css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
console.log('Howdy there!'); // displays, so no JS error in Shadowbox.init
</script>
</head>
<body>
<p>
<a href="image.jpg" title="Howdy" rel="shadowbox">
<img src="image.jpg" alt="Click to zoom." />
</a>
</p>
</body>
</html>
This document is completely valid according to my Firefox extension.
For some reason Shadowbox seems to do nothing. When I click the image link, the browser just opens the image as usual. No box at all.
I've tried not loading JQuery and only load Shadowbox but that didn't help, so it's not JQuery's fault either. This is with Shadowbox 3.0b by the way. Any ideas?
EDIT: I just got thinking... Shadowbox does some internal magic to figure out the path to it. However, this page is completely static and loaded directly from file on disk. Could this be the problem? Looking in the DOM, I see that Shadowbox.path is correctly set to "file:///C:/..." so maybe not?
You need to have (nebo have to have) all directories from showbox.zip in the directory with the file showbox.js, because showbox adds other scripts to the page.