I would like to remove everything inside of an HTML-section, using JS, but there are <script>-tags inside of the section and JS does not remove them, why and how can I do this?
Code:
document.querySelector(".desktop_only").remove();
<section class="desktop_only">
The JS removes this text.
<script> alert("It does not remove the alert, why?"); </script>
</section>
The problem is HTML scripts are usually run first, then come any included scripts at the bottom of the HTML, so the alert script is probably removed after it already ran. It would be helpful if you added a codepen.io link!
Related
So I have this function called redireccionar()
function redireccionar(){
alert("activaste la funcion");
}
gyazo
and redireccionar() gets called by this:
<button class="btn btn-default" onclick="redireccionar()" type="button">Go!</button>
gyazo
But I do click and nothing happens, its because I render them? How can I fix it? Why it doesnt work? Thanks.
You need to make a separate <script> tag for your custom JS, your first screenshot (http://gyazo.com/c86b48f3f96137bba0e32e1ae72c0daf) shows you have a script tag pulling in bootstrap and within that tag you are specifying your code.
Example solution:
<script src='/path/to/bootstrap/cdn'></script>
<script>
function redireccionar(){
alert("activaste la funcion");
}
</script>
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-src
Oh! I just checked your picture and found something like this:
<script src="......bootstrap.min.js">
//your code here
</script>
You shouldn't include your script within that bootstrap framework. Do like this:
<script src="path-of-boostrap.min.js"></script>
<script>
//your code here
</script>
¡Hola Ruben! Your first screenshot shows the problem. Your function has to be surrounded by separate <script></script> tags, not inside of the linked bootstrap js file. Everything else should be fine so far.
As my website has only one page, and the index.html was getting really long and impossible to read. So I decided to put each section in a different HTML file and use jQuery to included it.
I used jQuery's include in the way as it has been mentioned here to include a external HTML file but apparently it doesn't work for my website. I really don't know what is the problem.
Here is the link of my workspace.
Here is what I am doing in index.html file to include other sections
<script src="./js/jquery-1.11.1.min"></script>
<script>
$(function() {
$("#includedContent").load("./page1.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page2.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page3.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page4.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page5.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page6.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page7.html");
});
</script>
I also used this method to make sure the file is accessible and everything was fine. So the problem is not the accessibility of the files
You are overwriting the contents of #includedContent seven times (see documentation of jQuery.load). With AJAX, there is no guarantee which request will complete first so you will end up with random page content inside the container.
The solution is to create containers for each page and load each page inside its dedicated container, something like this:
<div id="includedContent">
<div class="page1"></div>
<div class="page2"></div>
<div class="page3"></div>
</div>
$(document).ready(function() {
$("#includedContent .page1").load("page1.html");
$("#includedContent .page2").load("page2.html");
$("#includedContent .page3").load("page3.html");
});
NB: Having said all that, I do not understand how AJAX solves the problem of the page being too long/impossible to read.
There are several things that look odd to me:
all your load functions run at document ready, which is weird while having all the same target. load replaces (not adds) the content of the selected element with what is being loaded, you probably are trying to add all the html contents, but your current setup would actually just load page7.html into #includedContent
the paths look strange to me, i guess ./ may cause errors, try to leave out ./ everywhere.
rather than loading an entire html page, you might just want to load a piece of that file (i dont know how pageX.html looks), for example you would not want to load the <html> node entirely, rather the content only: .load('page1.html #content')
are you including jquery correctly? there is no .js in your inclusion
I just added CKEditor to my website, but I'm getting the following error in my console:
I followed the installation guide as it's written so I have no idea what's wrong.
Here's, briefly, what my call looks like:
<textarea id="full-editor" name="full-editor" rows="10" columns="6"></textarea>
<script type="text/javascript">
CKEDITOR.replace('#full-editor');
</script>
Aah.. try this
Remove # from the selector inside CKEDITOR.replace('#full-editor');
According to installation guide you shared, this is what u need
CKEDITOR.replace('full-editor'); // NO #. You must have got confused with jQuery
This also happened whenever we put initializer script before <textarea>.
Ensure to put
<script>
CKEDITOR.replace( 'editor1' );
</script>
before the </body> tag (i.e. closing body tag).
<script type="text/javascript">
CKEDITOR.replace('#full-editor');
</script>
Please add above code in external js file and include this js in html page after title page like
$(document).ready(function () {// save as like ckEditorInclude.js
CKEDITOR.replace('#full-editor');
}
<script src="Your folder path/ckEditorInclude.js" type="text/javascript"></script>
This also happened whenever we put initializer script before .
Ensure to put
CKEDITOR.replace( 'editor1' );
before the </body> tag (i.e. closing body tag).
This append to me because i was trying to use CKEDITOR.replace("editor") but there was no element in dom with Id or name "editor"
The issue for me was I copied the code locally from the cdn so that I can work on it if I am not online. I am using version 4.9.2 standard.
Examining the chrome console gave several 404 errors which were not obvious using FireFox. Reverting back to the cdn resolved the issue.
Unfortunately, no working offline with this it seems at least not for this version of ckeditor.
A simple script tag inside the body tag doesn't seem to work. The alert doesn't get triggered in the code below:
<body>
<script type="text/javascript">
alert('Hello');
</script>
{{>main}}
</body>
Any idea why?
Edit:
Just tried it with a fresh meteor app, no alert tag still:
<head>
<title>test</title>
</head>
<body>
<script type="text/javascript">
alert('Hello');
</script>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click" />
</template>
Weird thing is when I copy paste the source of the html, made a new html page, and the alert will work.
Edit3: I deployed this app here: http://alert-in-body-test.meteor.com/
Do you get an alert box?
This question is still relevant in the current version of Meteor (version 0.5.4) so I wanted to describe how to include script at the end of the body.
To execute javascript at the end of the body, register a Handlebars helper and put the relevant code there, like this:
In client.html:
<body>
{{renderPage}}
{{afterBody}}
</body>
...
In client.js:
if (typeof Handlebars !== 'undefined') {
Handlebars.registerHelper('afterBody', function(name, options) {
$('body').append('AFTER BODY');
});
}
(For a great description of why this is required, see Rahul's answer to a similar question here: https://stackoverflow.com/a/14002991/219238 )
Its working for me
in onrender call this jquery
$.getScript('yours url')
It should work.
I have just pasted this inside one of my projects and it worked.
Your {{>main}} is strange for me tough. Also make sure that <body> is inside <html> tag.
Meteor is constructing the entire DOM from Javascript by rendering your page as a template -- the 'source' for your page as seen by the browser is basically:
<script type="text/javascript" src="/5a8a37bef5095c69bcd3844caf3532e1ba6d49bf.js"></script>
I can't find a definitive page stating that embedding a script tag in a template like this won't cause it to be executed, but it definitely feels against the spirit of what the framework is trying to achieve.
If the point is to achieve a clean separation of your markup and logic then why put it in the template. A better solution would be to use the meteor.startup call
Instead of looking the rendered html at developer tools, try looking the real downloaded html.
You will find a (probably) empty tag, with tons of script tags inside the .
In other words, the body of your meteor application is not the body of the final html, it's just your main template.
Instead, this ton on scripts shipped by Meteor, will load your templates.
So, your code will not run, cause it's been placed there. It's like when you manipulate DOM (with jQuery, for exemple), placing a script tag in DOM, after it's loaded. This script tag will not run.
I want the html are fully loaded then execute the inline javascript because this script stops the load of the html document.
To try to solve this problem I put the inline javascript code at the end inside a div then i use the jquery .append method
$("#subhimedia").appendTo("#himedia");
This works and appends the inline js that is located inside #subhimedia and takes it inside the #himedia div.
The probblem is that duplicate the #subhimedia div and in internet explorer it freeze the browser.
The inline javascript is:
<!--JavaScript Tag // Tag for network 258: Hi-Media Portugal // Website: Lifecooler // Page: HOME // Placement: HOME_MREC_300x250 (1653713) // created at: Aug 29, 2008 1:35:27 PM-->
<script language="javascript"><!--
document.write('<scr'+'ipt language="javascript1.1" src="http://adserver.adtech.de/addyn|3.0|258|1653713|0|170|ADTECH;loc=100;target=_blank;grp=[group];misc='+new Date().getTime()+'"></scri'+'pt>');
//-->
</script><noscript><img src="http://adserver.adtech.de/adserv|3.0|258|1653713|0|170|ADTECH;loc=300;grp=[group]" border="0" width="300" height="250"></noscript>
<!-- End of JavaScript Tag -->
You could see the url here: http://www.niceoutput.com/jquery/
Thanks in advance for your help
Mário
Since you are using jQuery, wouldn't
$(document).ready(function(){
//your code to execute when HTML is fully loaded
});
work?
use
$(document).ready(function(){
// your code here
});
before writing any jquery codes..