Can document.write get me into troubles in this case? - javascript

I have a simple question. Basically I have index.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">
<head>
<title>Title of document</title>
</head>
<body>
<script src="x.js"></script>
<script>
iny();
</script>
</body>
</html>
// x.js
console.log("x.js");
document.write("<script src='y.js'></script>");
// y.js
console.log("y.js");
function iny() {
console.log("iny");
}
As you can see, x.js loads a.js which, in turn, loads y.js. Here are the 2 scripts which live in 2 different files:
As you can see a.js syncronously loads y.js using document.write.
Now my question is: can document write get me into trouble in this case? My aim is to load y.js syncronously and that is the only reason why I am using the write. As far as I know there is no other way. Also it is not an option to have the code of y.js copy/pasted in to x.js. The 2 scripts must remain separate.
Thanks

Related

Error in my first ExtJs 6 application. Ext.app is undefined

I am new to ExtJs.
I have create sample ExtJs app and I am getting error 'Ext.app is undefined' in the console. I am not getting desired output on the screen.
Following is my app.js file and HTML file:
Ext.application({
name: 'HelloWorld',
launch: function () {
console.log('App created');
}
}
)
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript" src="Scripts/ext-debug.js"></script>
<script language="javascript" src="app/app.js" type="text/javascript"></script>
<link href="Styles/extjs.css" type="text/css" rel="stylesheet" />
</head>
<body>
</body>
</html>
Following is the image of project
The ext-debug.js script only includes the types under the root Ext namespace. Try including ext-all-debug.js instead.
<script language="javascript" type="text/javascript" src="Scripts/ext-all-debug.js"></script>
Try requiring Ext.app.Application as per for the following forum thread.
https://www.sencha.com/forum/showthread.php?304087-ext-debug-receiving-Ext-app-setupPaths-undefined-Full-source-debugging
Ext.require([
'Ext.app.Application'
], function() {
Ext.application({
...
});
});
you need to reference the framework's bootstrap.js (while in debug mode) in order the have Ext.Loader (aka the mini-loader) available; after compiling, it's source code + framework concatenated into a single file. loading the pre-built ext-all.js or ext-all-debug.js is not exactly how this framework works (despite it may solve your problem); better use SenchaCmd, else you'd be lost with dependencies easily. here would be one example (mine) for an ExtJS project; eg. see the Application.js and compare that to the live example's application.js, to see what I mean.

HTML1527: DOCTYPE expected. The shortest valid doctype is "<!DOCTYPE html>"

Good day,
I am working on a c# web application, everything is working until I add in a normal JavaScript.
The html code is something as follow:
<!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 runat="server">
<title></title>
<script src="scripts/JScript.js" type="text/javascript"></script>
<asp:ContentPlaceHolder id="headContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<asp:ContentPlaceHolder id="title" runat="server"></asp:ContentPlaceHolder>
<asp:ContentPlaceHolder id="bodyContent" runat="server"></asp:ContentPlaceHolder>
<!-- some code here -->
</body>
The JScript.js is the JavaScript that put in.
The JavaScript code is something as follow:
function getCookie(catId) {
var ebRand = Math.random() + '';
ebRand = ebRand * 1000000;
document.write('<scr' + 'ipt src="HTTP://bs.serving-sys.com/Serving/ActivityServer.bs?cn=as&ActivityID=553971&rnd=' + ebRand + '"></scr' + 'ipt>');
}
This JavaScript function will be trigger when a link button is click.
I hit error in IE but Chrome and Mozilla is working fine.
My error in IE console is
HTML1527: DOCTYPE expected. The shortest valid doctype is "<!DOCTYPE html>".
After search in Google, I try to put in
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
as new DOCTYPE, but it not working also.
and I have try put
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
inside <head></head>
But I still get the same error in IE also.
Is is problem in ContentPlaceHolder?
Other than that, I have go to W3C Markup Validation Service to do some validation of the address :
http://validator.w3.org/check?uri=HTTP%3A%2F%2Fbs.serving-sys.com%2FServing%2FActivityServer.bs%3Fcn%3Das%26amp%3BActivityID%3D553971%26amp%3Brnd%3D20079.082210606393&charset=%28detect+automatically%29&doctype=Inline&group=0
And go to http://validator.w3.org/check to put in <script src="HTTP://bs.serving-sys.com/Serving/ActivityServer.bs?cn=as&ActivityID=553971&rnd=20079.082210606393"></script>
as well.
But not understand what is the validation result means.
Kindly advise.
IE issues a warning about <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">, because such a string is not a valid doctype according to HTML5. The warning as such has no impact on anything. It’s just part of HTML5 evangelism.
After you changed it to <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">, the issue was removed. But you probably saw the results of using some cached copy that has a wrong doctype. Testing with a fresh file (with a new name) should fix this issue.
Of course, the code as such does not validate, since the ASP tags are taken literally and interpreted as body content, but that’s a different issue.
The practical move is to use <!DOCTYPE html> as suggested. If you wish to still validate against the XHTML 1.0 specification for example, you can do this using the validator’s user interface to override the doctype.
But it’s not a big issue; you can just as well simply ignore the warning. If you have some functional errors, they are caused by something else and should be asked separately, with sufficient data provided.

Common Header and footer error

I just learnt about common header and footer technique .. Below is the code i have written
I can't figure out what is wrong with this code ..
<!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>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
</head>
<body>
<div id="header"></div>
<script>
$("#header").load("header.html");
</script>
</body>
</html>
I tried your code with other jQuery library version and it was running to me.
I had use the jquery#1.10.1 library, and the header.html in the same directory.
You could see this running here.
you can do this easily using jquery. this is an alternative way that i use and works fine.
$(function(){
$("[data-load]").each(function(){
$(this).load($(this).data("load"), function(){
});
});
})
now use data-load on any element to call its contents from external html file
you just have to add line to your html code where you want the content to be placed.
example
<nav data-load="sidepanel.html"></nav>
<nav data-load="footer.html"></nav>

trying to load data from api using json and ajax and it throws an error

I am trying to load data from an api using ajax and json however it keeps giving this error.
ReferenceError: Can't find variable: $
Global code
This is the html code used
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="test.js"></script>
</head>
<body>
<div id="div1">Old Content</div>
<button>Load</button>
</body>
</html>
Below is the jQuery Code
$(document).ready(function(){
$("button").click(function(){
var url = 'http://creative.coventry.ac.uk/~bookshop/v1.1/index.php/genre/list';
$.get(url, function(data,status){
console.log(data);
});
});
});
The "$" keyword is used by the jQuery library, which you haven't included in your HTML to be loaded alongside the rest of the document.
Add this before your existing script tag to load jQuery from Google's CDN:
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
Note that you might run into problems trying to retrieve cross domain json files. Consider looking up jsonp if that's the case.
Edit: fixed the URL

jQuery load() encoding for Korean (and Japanese) lang

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!

Categories