I am testing a view WYSIWYG editors (ckeditor, sceditor, wysibb). They work all same. A textarea with a ID is the anchor and holds the entire dom-object.
Example in the source:
<textarea id="example"></texarea>
Becomes in DOM to:
<textarea id="example" style="display:none"></texarea>
<div id="editor">
<head>
</head>
<body>
Content of the Editor
</body>
</div>
Question:
How is it possible to write something inside of the body, when the body is not in the source?
The reason is, I have a to sync everything from the textarea (example ID) to the editor body, when something is added to the textarea.
I tried:
$("#example, #editor.body").on("change keyup", function(){
$("textarea").not($(this)).val($(this).val());
});
You could do something like this.
$(window).bind("load", function() {
Your stuff
});
This loads callback only after the whole page has finished loading.
Related
I have created two short javascript files, each containing a $(document).ready function that has javascript to detect a button click from the html file that has included it. My main html file has the script tags pointing to each file in the header:
file1.js:
$(document).ready(function(){
$('.wrapper').on('click', '.click_1', function(){
alert('hello from the first file');
});
});
file2.js:
$(document).ready(function(){
$('.wrapper').on('click', '.click_2', function(){
alert('hello from the second file');
});
});
My goal, however, is to be able to dynamically remove one of the script tags (the javascript from the second file) from the header, and its functionality along with it. To do so, I created a script in my main html file to remove the target script tag via the src attribute. However, while an inspection of the page source reveals that the third script tag has indeed been removed, its functionality remains. For instance, even after clicking the .remove_2 button, I can still click the .click_2 button and receive the "hello from the second file" alert:
main.html:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
</head>
<body>
<div class="wrapper">
<button class='click_1'>File1</button>
<button class='click_2'>File2</button>
<button class='remove_2'>Remove File2</button>
</div>
</body>
<script>
$(document).ready(function(){
$('.wrapper').on('click', '.remove_2', function(){
$('script[src="file2.js"]').remove();
});
});
</script>
</html>
In short, I wish to be able to dynamically remove a script tag so that the javascript in the file that the tag points to no longer has any affect on the html page. However, I have not been able to accomplish this. Can anyone tell me what is wrong with my code? Also, is what I am trying to accomplish even possible? Thank you.
Removing an external script does not remove event handlers. They are attached to current document.
A solution can be:
remove the script
get all html page
replace html page with new content
$('.wrapper').on('click', '.remove_2', function(){
$('script[src="file2.js"]').remove();
var html = document.documentElement.innerHTML;
document.open('text/html');
document.write(html);
document.close();
});
In jQuery, replacing only the header after removing the script:
$('.wrapper').on('click', '.remove_2', function(){
var header = $('html head');
header.find('script[src="file2.js"]').remove();
$('html head').replaceWith(header);
});
Try unbinding the click event from the second button before removing it:
$('.click_2').unbind("click");
Although unbind is now deprecated. The newer form is 'off':
$('.click_2').off( "click", "**" );
http://api.jquery.com/off/
That said, you do seem to be using a rather peculiar approach to disable click functionality.
I have problem with jquery.
I want change link to src when is only "document.write".
My code:
myscript.js
document.write("TEST ABCD");
test.html
<html>
<body>
<button id="example">click me</button>
<div>my site example text</div>
<div id="my_div_important">
Old test
</div>
<script>
$(function(){
$('#example').on('click',function(){
$('<script>').attr('src', 'http://example.com/script.js').appendTo('#my_div_important');
});
});
</script>
</body>
</html>
If click "#example" than in page write: TEST ABCD but all the rest is HIDDEN... URL is to same (no redirect).
When is problem?
--- UPDATE
I want to do a widget where users will use on their sites.
The panel of users want to do a preview of different sizes and therefore need to update the script SRC tag script (example.com/widget/normal/250|300 itp.)
document.write deletes all the content if your page is already fully loaded (as you do a write on the document object).
Also you should use jQuery.getScript() for dynamic loading of scripts.
I'm sure this is a fairly basic question, but I'm relatively new to jQuery so was hoping someone might be able to help.
Basically, I need to load an HTML snippet into a page. This works fine when the snippet contains just HTML, but not when it contains a script.
I've stripped down my code to the bare minimum for clarity. This is index.html:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<h1>Heading</h1>
<div id="banner"></div>
<script>
$(document).ready(function(){
$('#banner').load('banner.html');
});
</script>
</body>
</html>
And banner.html contains just the following (as an example):
<h2>Subheading</h2>
<script>
document.write('Hello');
</script>
The script is executed, but for some reason it strips out the rest of the HTML in both index.html and banner.html (i.e. it just displays "Hello" and nothing else).
Any help greatly appreciated!
document.write after the page has load writes to the document, and at the same overwrites everything else currently in the document, that's why you end up with only the string "hello".
Just remove the document write :
<h2>Subheading</h2>
<p id="test"></p>
<script>
document.getElementById('test').innerHTML = 'hello';
</script>
that is becuase when banner.html is loaded .. the script inside banner.html get executed, which writes "hello" in your document(the document here is your entire index.html)
one way to understand this is by replacing certain content of banner.html rather than the whole document.
banner.html
<h2>Subheading</h2>
<div id="divID"></div>
<script>
$('#divID').html('hello'); //using jquery .. gets the element with id as divID and replace the HTML
</script>
here i am replacing just the div whose id is "divID" rather than replacing the enrite document
I'm new to Javascript, as in just really getting started with it today. I'm testing some very basic code in the first chapter of a book and encountered a problem on the first example. I wrote the code in Notepad++, but even in that program my second line of commenting is black and not green. Why does the line right after </noscript> render?
The output to my browser is rendered as: Hello World! // Display a message dialog after the page has loaded.
<!DOCTYPE html>
<html>
<body>
<div id = "panel">
<script type = "text/javascript">
// Dynamically write a text string as the page loads.
document.write("Hello World!");
</script>
<noscript>Javascript is Not Enabled!</noscript>
// Display a message dialog after the page has loaded.
<body onload = " window.alert('Document Loaded!');">
</div>
</body>
</html>
That's because you're writing your comment not in a JavaScript part but in an HTML one.
Comments in HTML are like this :
<noscript>Javascript is Not Enabled!</noscript>
<!-- Display a message dialog after the page has loaded. -->
Note that you've put a body element inside the body, that's not good. You probably wanted this instead of the second body :
<script>
window.onload = function(){
alert('document loaded!');
};
</script>
<!-- This is a comment in HTML -->
/* This is a comment in Javascript */
Your comment are not between script tag. You can move it into an script tag or use the HTML comment just like #22kar said.
Also you need to put the parameter "onload" in the first body tag and remove the other one.
The reason the line you tried to comment out is rendered is because you have attempted to comment out the text with JavaScript comments.
The browser rendering html sees the two slashes (//) as part of the text, not as markup designating a comment.
The correct way to comment out something in html is with <!-- and -->.
I want to add a javascript google ad but I can't insert the javascript into the div using jquery. I try to simulate my problem with this test, which is using some advice I found on stackoverflow , but it does not work.
I want <script type='text/javascript'>document.write('hello world');</script> to be inserted in the div, and "hello world" be displayed between the tag_1 and tag_2.
Here is the code :
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var str="<script type='text/javascript'>document.write('hello world');";
str+="<";
str+="/script>";
$('#insert_here').append(str);
});
</script>
</head>
<body>
tag_1<br/>
<div id="insert_here">
</div>
tag_2<br/>
</body>
</html>
Tanks for your answers,
Lucas
See my answer to Are dynamically inserted <script> tags meant to work? for why you can't use innerHTML, which jQuery's functions map to when passed a HTML string, to insert a script element. document.write will also fail when used after the document has been fully parsed.
To work around this, you will have to use DOM functions to insert an element into the div. Google ads are iframes, so it's usually a case of finding the iframe code and appending that instead.
To correctly insert a script element, you need to use DOM functions, for instance:
var txt = 'alert("Hello");';
var scr = document.createElement("script");
scr.type= "text/javascript";
// We have to use .text for IE, .textContent for standards compliance.
if ("textContent" in scr)
scr.textContent = txt;
else
scr.text = txt;
// Finally, insert the script element into the div
document.getElementById("insert_here").appendChild(scr);
I figured out a great solution:
Insert your Google Adsense code anywhere on your page - e.g. if your CMS only allows you to put this on the right hand side then stick it there.
Wrap a div around it with display:none style
Add some jquery code to move the div to the location you desire.
Since the javascript has already run there is no problem then with moving the block of script to wherever you'd like it to be.
e.g. if you wish to put 2 blocks of google adverts interspersed throughout your blog (say after paragraph 1 and after paragraph 4) then this is perfect.
Here's some example code:
<div id="advert1" style="display:none">
<div class="advertbox advertfont">
<div style="float:right;">
<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxxx";
/* Video box */
google_ad_slot = "xxxxxxxxxxxxxxxxx"
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#advert1').appendTo("#content p:eq(1)");
$('#advert1').css("display", "block");
});
</script>
p.s. #content happens to be where the content starts on my CMS (Squarespace) so you can replace that with whatever you have in your CMS. This works a treat and doesn't break Google ToS.
You cannot use document.write after the page has finished loading. Instead, simply insert the contents that you want to be written in.
<script type="text/javascript">
$(function() { // This is equivalent to document.ready
var str="hello world";
$('#insert_here').append(str);
});
</script>