There's one thing I want to do with javascript, but don't know how. In a perfect world it would look like this:
<p>My very cool page!</p>
<script type="text/javascript">
document.write('<div>some content</div>');
</script>
And this script would insert <div>some content</div> right before (or after, or instead of) script tag. But in the real world, document.write starts writing html anew, removing any static content in the page (<p> tag, in this case).
This is simplified example, but should give you the idea. I know that I can statically put <div id="some_id"></div> before script tag and insert html in it from js, but I wanna be able to use multiple instances of this snippet without changing it (generating random id manually) each time.
I'm ok to use jquery or any other existing library as well. Is there any way to achieve this? Thanks!
We are actually in that perfect world...
and your example would work as it is ..
http://www.jsfiddle.net/BtKGV/
Yes, but you always add or write it in relation to something else.
If you wanted to write something AFTER the first p tag, in jQuery, you could do something liek this
$('p:first').after( '<div>some content</div>' );
If you look at jQuery's API you will see they have many functions for this, such as before, after, append, etc.
You also might want to read about adding and removing elements to/from the DOM, such as in this article:
http://www.dustindiaz.com/add-remove-elements-reprise/
look up appendChild()
To close the question, here's how it has worked out in the end.
The trick was to store each widget's data in html tag, not in javascript. User inserts content like this
<div class="my_widget" feed_id="123"></div>
...
<div class="my_widget" feed_id="456"></div>
User also links script from our server. When page's loaded, script does $('div.my_widget').each and populates contents of each widget depending on its feed_id and other attributes.
Thanks to everyone (and +1 to Gaby and Kerry for attempts to help with such vague problem)
Related
In a legacy application I'm working, somehow the jQuery scripts between
<script type="text/javascript"></script>
are being rendered as plain text instead of being executed.
Does someone have a suggestion of what can cause this behavior?
If you are using something like style : {display:block} it will behave like that.
Since we can not see all your code I will give you a few possible causes.
1.you could have forgot a closing tag for an element above it.
2.You could have forgot a pair of parenthesis on an element above.
3.You might have put the tag in a wrong spot so it might print depending on it's position.
Try to disable css. If it works fine after it, then you've styled tag 'script'.
Remember to read how to ask a question here on StackOverflow
But based on the little information given i'll make a longshot and think it might be something with parsing, read about CDATA
And check for unclosed html tags.
I'm writing a userscript. What I'm trying to do is really simple. I need to block the UI while the script does some background tasks. I saw this method in another SO question and I changed it a bit to suit me.
Check this fiddle. When you click on the button, it covers up the UI.
Now since this is gonna be used on a webpage, I need to inject the following HTML part to the webpage through the script.
<div id="blocker">
<div>Loading...<img src="http://www.socialups.com/static/images/fbinventory/ajax_loader.gif"></div>
</div>
I did it like this.
var blockUI = document.createElement("div");
blockUI.setAttribute("id", "blocker");
blockUI.innerHTML = '<div>Loading...<img src="http://www.socialups.com/static/images/fbinventory/ajax_loader.gif"></div>'
document.head.appendChild(blockUI);
Check this fiddle for a clear idea.
But it does not work. I tried several ways to tackle the problem but to no avail .Can anyone please point out what I'm doing wrong here?
Thank you.
P.S - I need to do this without using jQuery or the library blockUI.
You are trying to append stuff to head; append it to body instead.
http://jsfiddle.net/dAKQX/
Don't put the block div in the head section of your document. Use document.body.appendChild(blockUI); instead.
you need to append your div to the body of the document. See: http://jsfiddle.net/zkzQy/1/
or like this in your code:
document.body.appendChild(blockUI);
I have got some detail content pages on my site where I don't have the complete control over the html content that is displayed in a certain div. Now when the content of the external resource contains invalid html, like having no ending my navigation in the right-bar is also italic. I don't want to use iframes, like ebay, and there is probably other ways to fix this. Hope on an answer.
<html>
<body>
<div id="page">
<div id="content">[content of external resource]</div>
<div id="right-bar">[My navigation]</div>
</div>
</body>
</html>
A simplified structure of my page is above.
I hate to tell people to use Tables when they aren't necessary, but in this case, I feel that it could solve your problem.
The issue that you are facing is one of the browsers well-formed html check, so, you could have some browsers that work as you hope, and others that work the way that bothers you, as each rendering engine is going to perform it's own well-formed html check flavor.
If you wrap it inside a td, then I don't think that it will be able to bleed styling the way that you are seeing. Just a thought. The reason that a td container is going to help more than the div container that you are currently using is the following: Since you are wrapping their stuff in a div, and they are most likely wrapping their own stuff in divs, the browser doesn't know where the mistake is at. It doesn't know where the missing div tag should be inserted. So essentially, div in div in div creates problems for the well-formed html check, as it is not sure which of the tag you forgot. However, div in div in td, that is more distinct. If the td open and closes, then it knows that the missing tags belong to a smaller group of possible elements. In other words, you are making it easier on the well-formed check to do it's job by wrapping it inside different tag types.
This makes sense to me. I hope that I have explained it ok.
I think that there is no other way than using iframes. If you don't use an iframe to host the external content means that the external content will be included in the DOM structure of your page, so unless you parse all the external content code to check all the possible things that should affect your page (and this could be a madness), you will never be sure that your page will be safe from collateral effects coming from the external code.
And even using iframes, you should parse anyway the external content to look for script tags, to prevent any undesired javascript code been executing inside your page.
I've started working on a project that loads all of the different pages content dynamically.
On the surface this seems simple enough, an AJAX call to a script that returns the content that is placed inside a DIV. Except that not only HTML but JS is returned as well. I'm seeing a lot of things like this:-
<img src="spacer.gif" height="1" width="1" onload="SOMEJSHERE"/>
Dotted in the code to execute JS functions. This doesn't provide the kind of HTML/JS code separation I've come to love using JQuery.
I can understand that they don't want to load all the JS and HTML at once, there is an awful lot of it... But this just doesn't feel like the best way.
Some experience and suggestions please?
Lyle
Have a look at the jQuery .live() event. It can apply behaviors (event bindings) to all current and future elements on the page, which match the given selectors.
This means that your newly-loaded HTML need not contain any script. Just make sure the loaded elements have the right selectors (class names and id's).
hey i use "eval" to execute js dynamically.
e.g.
<script>
var strjs = 'function execute(){alert("foobaring");} execute();';
eval(strjs);
</script>
In the end I used the tabs.select option from JQuery UI (which we were using for the ajaxed pages) and executed the appropriate JS as needed.
I'm facing a problem while working with iFrames. What I need to do is, get the contents of a division 'contents' , display it in an iframe, and then remove all forms/form elements ONLY in that iframe. When i use $("#form").remove(), it removes the form both in iframe and in the window. Can someone help?
Thank You.
You can wrap the iframe in a DIV with an ID and remove forms only inside of that. Can you post some code? Would be easier to work off that. Or just grab the iframe (although I'm not sure it will work, haven't tested it).
$("iframe").find("#form").remove();
Do both the forms have the same id (#form)?
Give them separate ids (eg: <form id="inner"> and <form id="outer">) and you should be able to target them individually: $(#inner).remove()
I don't know it in jQuery but I think that this in strait javascript might help you.
var forms = document.getElementById('iframe_id').getElementsByTag('form')
for (var form in forms) {
forms[form].parent.removeChild(forms[form])
}
Disclaimer: I havn't tested this code, but with some debugging it should work... eventually. I just put it here so you maybe can guess to what you need to to do.
Perhaps the jQuery (now I'm just guessing) that you need is something like:
$('iframe_id').('#form').remove()
Or maybe dlabaeb's code already posted.