Inserting Script Tag using Jquery - javascript

Can I insert script tag below any div tag in html using this:
$("<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>").html("").insertAfter($('#sidebar'));
I tried it but seems not working, not appearing in the page source.

You have to remove the .html("") and split the script tag otherwise it causes the browser to think you are closing the script tag you are working in. JSfiddle
$("<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></scr" + "ipt>").insertAfter($('#sidebar'));
** Solution requires the both the suggestions by #HerrSerker and #AlexK. to get it to work properly

Related

Inline Javascript is breaking my HTML/CSS

This is my first attempt to use jquery, javascript and HTML/CSS in one site. I have a working inline script tag that utilizes jquery and javascript. Unfortunately I can't seem to create ANY structure on the page (an h1 title, an aside, moving the rendered javascript anywhere...) while this script is in my index.html. I've done lots of research but there is some fundamental I'm missing here as I can have only one or the other. Can anyone point me in the right direction? Here's a curtailed section:
<body>
<script>
$(document).ready(function(){
var $body = $('body');
$body.html('');
//code code code
}
});
</script>
I've tried putting my html within the body and outside of the script, in the script but outside of the jquery function, and inside the jquery function. How could I get a simple "Hello World" up on this page?
What's happening is that once the page is finished loading, or ready, you are setting the HTML to nothing via $body.html('').
You could try changing it to $body.append('This was generated by jQuery!') and you'll see your hardcoded HTML in addition to some text.
Your Script is a Child of the Body, which inner html you are clearing by asigning an empty String - deleting your inline Script in the process. Have you tried moving your Script to the Head section?

Script tags in TinyMCE fields are not saving correctly

I am running tinyMCE on my site and I'm trying to insert script tags. I am trying to insert my script tags into the body of the source of the tinyMCE instance.
However, when I do I get problems. When I submit the form including the tinyMCE element It strips the tags.
I have tried the following lines below with still no success.
allow_script_urls: true
valid_elements : '*[*]'
extended_valid_elements: 'script[language|type]'
One thing I have noticed though that if I have to post the script code to the section of the source code of the tinymce instance and it works. However, I need to be able to add it to the <body> of the tinymce instance so I can see previews etc of it.
Below is the script tag I'm trying to upload.
<script type="text/javascript" src="http://resources.32red.com/ad.aspx?pid=237638&bid=3344"></script>
Can anyone shed any light on this?
Thanks
Try the following:
extended_valid_elements: 'script[language|type|src]'
I see that you've already tried updating the extended_valid_elements property using
'script[language|type]' but you forgot to allow the src attribute for the script tags
so right now the src attribute is being stripped out.
There seems to be a bug where if a script tag is wrapped in a div TinyMce dumps the script.
(even if you have extended_valid_elements correctly)
TinyMCE can be very annoying to use
What I did to solve the problem was putting the script block inside a tag <code> tag.
<code>
<script>alert("abc");</script>
</code>
I ended up with this method
hiding from tinymce all inside script tag
protect: [/<script>[\s\S]*?<\/script>/g]
check https://regex101.com/r/cH35d9/1 for regexp:
\s - all space
\S - all not space
*? - repeat to first of </script>
and this is muililine because group of []* ignoring newline borders
Supports tinymce5, tinymce6 - https://www.tiny.cloud/docs/tinymce/6/content-filtering/#protect

How to output HTML tags to copy to elsewhere using JavaScript

I have made a code that outputs data as html tags using document.write and the xmp HTML tag.
However, I have come across a problem. I have tried executing html, style, head and other tags but they do not work. Basic tags such as div, img, etc. seem to work fine. Can anybody help?
Thanks

FF View Source | Script highlighted red

FF14 is highlighting my script tag red on a view->source
out of all my tags, just this on here:
<script type='text/javascript'>
Is there something it doesn't like ?
Thanks.
Try placing your script within the HTML tag. Perhaps it doesn't like that it is out there on its own.
SGML/HTML permit only one root element. In HTML, that should be html. You, however, have put the script element after the html element is closed.
It's not valid for an element to thus appear outside the root element. A script tag should occur inside the head or the body. (It shouldn't stop it from working, because browsers are very lenient, but it's not valid.)

jQuery append doesn't work fully with <script> tag

Appending a script element using jquery rather than putting it in the html by hand seems to lead to very different results. For instance
snaphtml = '<script src="http:\/\/seadragon.com\/embed\/lxe.js?width=auto&height=400px"><\/script>';
$('#content').append(snaphtml);
destroys the layout of my page, but putting the script element in the page directly works fine.
I have posted a test case online:
Working example with script in html.
Broken example with script appended via jquery.
The second div should not be deleted / invisible once the silverlight object is added.
Ideas?
I would recommend you to use $.getScript method for loading external script files programmatically:
$.getScript('path/to/script.js', function() {
alert('Script loaded.');
});
The script load is made asynchronously, and as you see in the above example, you can specify a callback function that will be executed when your external file has been loaded and is ready to use.
Tristan, you will not be able to include the script you reference dynamically onto the page after it has finished loading. The external script is using document.write which will only work correctly when called before the page has finished loading. This is why your static implementation works fine, and your dynamic one tears the page apart.
You might want to put together a dummy HTML file that just has a basic HTML structure and this script in it already. Then dynamically add an iframe to your page that loads the HTML. There are even more dynamic ways to make it work with an iframe, but that would be the easiest.
Try to use $.getScript:
$.getScript("http://seadragon.com/embed/lxe.js?width=auto&height=400px");
Edit:
The provided script is using document.write, which is likely causing your problems: you cannot add it dynamically at the middle of the page. Try loading SeaDragon as shown here:
http://www.seadragon.com/developer/ajax/getting-started/
try to break script tag like
snaphtml = '</sc'+'ript>'

Categories

Resources