I have several files (header.html, nav.html, footer.html). I was wondering if there's a way to include these files into index.html while the page loads (or before) using plain js or jquery library. I know it's better to do it from server-side, but right now I'm working on front-end and don't have access to server-side scripts.
When I try to use $.load('header.html'), it gives me the following error:
Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'load'
The load() function has to be called on a matched element.
$('#myDiv').load('test.html');
In this example, the content will be loaded to the myDiv element.
Related
I'm trying to register the dojo javascript files with Yii 2.0.
According to the dojo documentation, the code block for dojo config must be loaded before the actual dojo.js in order to be considered. However, in the HTML output my custom javascript code is always loaded after dojo.js.
This is my code:
$this->registerJs('dojoConfig="async:true,isDebug:true";', $this::POS_HEAD,'dojoconfiguration');
$this->registerJsFile('/dojo_toolkit/dojo/dojo.js', ['depends' => [\yii\web\JqueryAsset::className()], 'position' => yii\web\View::POS_HEAD]);
And in HTML it looks like this:
<script src="/dojo_toolkit/dojo/dojo.js"></script>
<script type="text/javascript">dojoConfig="async:true,isDebug:true";</script>
Any advise?
For the same position Yii2 always puts the inline scripts first and then the actual external files. So you can't fix this by adding them both to the <head>.
Its best to give the registerJsFile() call a POS_END to load it at the very end. It will still be loaded before the document.ready() call is made.
That way you can be sure that the configuration in the header is parsed before the load. Worst case scenario you can use POS_BEGIN to load it right after the body tag is opened, but since loading javascript is blocking I would try to avoid that.
I use doT.js 1.0 for templating with requirejs.
My goal is to load a file called "length.html" from another file called "freight.html".
The advanced sample states that you can load files with
{{#def.loadfile('/snippet.txt')}}
So I tried using {{#def.loadfile('/length.html')}} in freight.html.
freight.html is in the same directory as length.html.
However, the javascript console throws an error:
Uncaught TypeError: Object #<Object> has no method 'loadfile'
How can I get loadfile to work? Or is the documentation wrong and there is no loadfile function?
It appears as though loadfile needs to be created by you, as per your requirements. If you are using express, I would suggest looking at https://github.com/nerdo/dot-emc. This module wraps doT so that you can use res.render() to return your templates. It also provides a nifty include function to solve the problem you have above. So instead of loadfile you would use:
{{#def.include('length')}}
Just be aware that if you use this module, the default file extension is .def, which needs to be changed with options to use say .html
If I'm loading a script using something like
document.getElementsByTagName("head")[0].appendChild(scriptElement);
…what code can I put inside of that loaded JS file to get the URL of itself?
In other words: I use dom injection to load http://foo.com/foo.js. From within foo.js, how do I get the URL http://foo.com/foo.js?
If you have included the scriptElement object in your dom, then you should know the "scriptElement.src" - so inside foo.js you should know the source:
alert(scriptElement.src);
I've found a solution that works for me here:
javascript - get node reference to script tag that calls a function
The answer that requires you to throw an error in the loaded file, catch it, and then pass it to the global function in the loading page did the trick. (It doesn't work in IE, but for my current project that is not a concern.)
I have a question. I have a aspx control (for e.g textbox). I reference it using document.getElementById('<%=textbox.ClientID%>').value. When I have the code in the same aspx file it works. But as soon reference it from an external file (example MyJSFunctions.js), I cannnot. I get an error saying "the object does not exist or it is null"
I have included the name of the js file like
I did this because I like having all my js functions in a seperate file nad doing this also reduces the load overhead.
Why is this happening? Can I accomplish the same using jquery?
You will need to parametise your Javascript to accept the desired argument, then pass the inline ASP.NET script within the server-side page or control as the value of such. This will allow the engine to render the inline code appropriately.
It happens because the server renders your pages (not in the sense of a browser rendering HTML, but rather the ASP.NET engine making transformations to turn your .NETified web mark-up into standard web mark-up) prior to pushing them down to the client - this will only happen for "registered" types, and that doesn't (and shouldn't) include Javascript files (although you can technically register items to handle, unless you have a bespoke module to handle compilation of inline scripting among Javascript, then it would err anyway.)
jQuery essentially being something of a Javascript framework, you're in the same boat with that, so to speak.
As an example, consider the following...
Your script file:
function doSomethingJavascripty(withThisClientID) {
//do something with...
document.getElementById(withThisClientID).value;
}
Your ASPX page:
<script type="text/javascript" src="/path/to/script.js"><script>
<script type="text/javascript">
//call your function when appropriate...
doSomethingJavascripty('<%=textbox.ClientID%>');
</script>
One thing you could do is have the following Javascript code in your ASPX page:
var myTextbox = '<%=textbox.ClientID%>';
Then, in your external JS file (make sure this is after the above line), have:
document.getElementById(myTextbox).value
Another alternative is just hardcode in the ClientID into your code, but note you'll break it if you change the ID or parent container of that textbox control in the future.
We have a need to parse and extract the content from html files. We are thinking of using jQuery to easily navigate the DOM and extract a small piece of information. We found JavaScript library written in Java from Mozilla. Using this libary, we tried to load a file called file.js that includes jquery script as well as a few lines of jquery script code as shown below.
var content = $('<html> <body><div id="div1"><span> Hello World!</span></div></body></html>').find('div span').html();
print("content = " + content);
print("hello");
We got errors related to undefined document, navigator etc. which are in jQuery library. Can anyone please help us as to how to run jQuery scripts with Java or C# to parse html files.
Using Rhino from Java is fine, but you have to be aware of the fact that Javascript itself does not define the DOM API.
It is instead the role of the navigator that embeds the javascript engine.
You need to initialize the DOM by yourself, using for example the script found here: http://ejohn.org/blog/bringing-the-browser-to-the-server/
which allows to run jquery, according to the author, and then to load your html code in the `virtual' page that is emulated in this environment.