I have the following line of code:
$('#text').append('<h2 style="color:white">afdghadfg</h2>');
If I paste this code inside of a script tag in the html, it works fine. However, when placed inside a .js file it does nothing.
Know that the .js file has plenty of other working javascript and jQuery code, it is only this line that won't work.
Try this in your JS file:-
$(document).ready(function(){
$('#text').append('<h2 style="color:white">afdghadfg</h2>');
});
Could be the context you are putting it. Make sure it's not wrapped in a function and directly executable. Also check the JavaScript console (Firebug / CDT) to see if there are any errors.
Another thing to check is if it's getting executed before DOM ready, but I can't really tell you without seeing more code.
Related
I am new to angularjs,so I am assuming there is something simple which I am missing about this. I am facing an issue where my back-end sends some html which includes a script tag which has some js example is as under.
<!--some html-->
<script>
//some js code
caption_class_fn = function(){
$('.jwcaptions').addClass('%s')//%s as its added from backend
}
caption_class_fn()
</script>
This html is then filled into $scope.htmlval which is bound with an html element like this ng-bind-html="htmlval". The issue I am facing is that I want to execute a js function which is present in side the script tags. I tried alert, console.log but nothing seems to work. Although once the page is loaded if I try the same fucntion from console it works.Any idea how can i achieve this with minimum code change. I also tried to this solution here but this also isn't working for me.
I have been trying to put together this basic cart using external javascript. It works perfectly in jsBin but when I try to run through a browser it wont work. I am guessing it is my html. Any help would be greatly appreciated.
here is my jsBin
The code in the jsBin is executed at the end of the <body>, which means all elements are accessible. Make your code is executed (which accesses specific DOM elements) after they are rendered/ready. A normal way to do this is to put your code in window.onload, or do what jsBin does and put your JavaScript at the end of the <body>.
I presume that inline JavaScript bound to orerror, onclick, ... run.
But would a <script type="text/javascript">...</script> element run javascript as well when wrapped with $(...) ?
If it does run is it sand-boxed?
Sorry for the misunderstanding:
Wanted to make sure that JavaScript loaded within the $ method would NOT run. I'm aware of other methods on how to load JavaScript scripts within the page and I generally use require.
Just wanted to figure out how much of a security risk wrapping HTML (containing script tags) within $ could be.
If someone can give me some insight/directions on how JavaScript is interpreted within the jQuery method that would give me my answer thanks.
Thanks :)
You always need to write
<script type="text/javascript"></script>
or
if you use the html5 Doctype
<script></script>
when you want to execute Javascript. in your html files.
If you want to execute javascript without writing these tags then you need to add a extern .js file and link to that file like this:
<script src="pathtofile/javascript.js"></script>
Friend please excuse me if my understanding of the question was wrong.
if you wrap some code in $() it will consider it as either the javascript or jquery code. But as we know script is a tag not a javascript code, so finally it will be throwing an error.
In order to execute any code which is in script tag, please place the code in a file and use getScript() function of jquery by enclosing in $(). Finally your requirement might be met :).
$(function() {
$.getScript(pathoffile);
});
I am using jquery ui dialog. In that dialog box, a php file(ex:test.php) is getting loaded using ajax call. Inside the test.php file, it contains some javascript code.
The problem is, after loading the test.php file in to jquery ui dialog, the javascript code inside the test.php file are not getting loaded. Any idea to solve this.
Thanks in advance.
If it is pure inline JavaScript, it should be executed. Does it implement $(document).ready()? In that case the JavaScript will not be executed because the event will never fire. Also be sure your JavaScript code comes after all HTML to allow your script to find the HTML elements.
Interesting problem here from some inherited code I recently looked at. I'm trying to add a compression module to a project. It is loading all the JS and CSS files, combining them, minifying them, and compressing them. I've tried a number of solutions, but all of them have one fatal problem.
I have some javascript that is being loaded via Page.ClientScript.RegisterClientScriptBlock in the PreRender of the MasterPage. The compression module is loading as a Script Tag link in the MasterPage, but when I run the page... the code from the PreRender is lopped on top and is giving me a '$ is undefined' error, telling me jQuery isn't loaded yet.
Furthermore, I can't seem to get past the same problem when it comes to inline javascript on content pages.
Any ideas as to what is causing this? Enlighten me as I have no clue.
If have done this before with RegisterStartupScript (instead of RegisterClientScriptBlock) and called the $(document).ready(function() from WITHIN that script.
If the script tag link that eventually expands out to jquery is not in the head, but in the body of the page, then $ will be undefined when the script block executes, unless it is included in the html before the opening <form /> tag in the rendered html, which I understand is where RegisterClientScriptBlock spits out its script (just after that opening tag).
If this is not the case, and the joined/minified script is in the head, then I'd use a browser debugger such as Firebug or IE Dev Tools to verify that the jquery script is being correctly included in your combined script.
I know this answer is late to the party, but try calling ClientScript.RegisterClientScriptBlock in your OnPreRenderComplete (rather than OnPreRender) handler. This inserts the code later in the page rendering process.
All your jQuery code should be written inside the DOM-ready function:
$(function() {
// your code here
});
indipendently from where you place it in the page, 'cause the jQuery() function isn't avalaible before.