I would like to have a section of my webpage's contents to change upon a button click. However, the content I'd like to have change includes formatting itself, and I would prefer to have the content in a separate document.
I would like it to look something like this, but I'm okay with any solution:
<html>
<head>
<script type="text/javascript">
function swap() {
document.getElementById('toChange').innerHTML = '<!--#include virtual="../newContent.htm"-->';
}
</script>
</head>
<body>
<span id="toChange">Temp Text</span>
<input type="button" onclick="swap()" value="Change" />
</body>
</html>
The problem is obviously with the include statement in swap() but I don't know how to change it appropriately. Thanks.
Basically server side includes don't work in this context; you will have to resort to AJAX requests.
You didn't tag your question with jquery, but you could read up what it does behind the scenes:
function swap() {
$('#toChange').load('../newContent.htm');
}
jQuery.load() reads the contents from ../newContent.htm using an AJAX call and then stores that HTML inside the toChange span.
As far as I know your probably going to need JSON and AJAX for your request. I do know that changing the data content without making a new request is what JSON and AJAX are used for mostly. It will update the page dynamically without reloading. JSON is built-in to Javascript so your actually on the right path. Hopefully it helps somewhat.
Related
So, I'm trying to make an html5 website, and I'm trying to make a popup, "error" message using javascript, but I'm currently using html. and so when I tried
alert("nope wrong >:D")
and it didn't work. it was inside of a script tag but it still didn't work and so I'm not sure if I'm just meant to use html for that. the question overall is, do I have to use something like
<!DOCTYPE html>
like when youre making an html website or just like
<!-- container -->
or what I need help. thx in advance for any help I get :)
<!DOCTYPE html> & <!-- container --> have nothing to do with javascript notifacations. You are correct about the <script></script> part. You just need to put it in a function:
<script>
function myAlert() {
alert("nope wrong >:D");
}
</script>
and then to call that function, use a button:
<button onclick="myAlert()">Click Me</button>
or call it on the body so when the page loads you get notified:
<body onload="myAlert">
EDIT: Here is a runnable code snippet
<button onclick="myAlert()">Click Me</button>
<script>
function myAlert() {
alert("nope wrong >:D");
}
</script>
also, good luck!
We have page like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="abc"></div>
</body>
</html>
I want to insert script in div and run it.
So im doing something like this:
document.getElementById("abc").innerHTML="<script>alert('sup');</script>";
Good, script is inside that div, but how can i run it now?
I propably didn't make it clear:
I have an external script that i need to put in specified place on the page.
I don't have access to the website, so i can't put it on the page code.
I want to do this, becouse this script makes new objects on the place where it is putted.
I don't have access to that script. I just have link (not direct) to it.
Make it a function. Use <script>function myAlert(){alert('sup');}</script> instead. You can then call it with myAlert();.
Please use createElement for that
var div = document.getElementById('abc');
var script = document.createElement('script');
var code = document.createTextNode('alert("sup");');
script.appendChild(code);
div.appendChild(script);
To put a script in a div is only useful for document.write And please don't do that. :-)
I would like some help displaying contents (to different pages) within one HTML page using JavaScript.
This is a sample of what I have found so far: http://www.swan10.nl/stuff/test.htm however instead of displaying "FAQ question #blabla" in the box every time a link is clicked, I would like to display words and images like a normal content. Is there a way to do this?
I tried removing the CreateDiv function and replacing it with HTML codes but it doesn't work.
Thank you in advance :)
Umm, well you would need to use AJAX to pull the data into the page and display it in whatever method you choose. If you want to use a framework look into JQuery. It has nice AJAX functions. Otherwise read HERE
After re-reading your post I think you might just want to choose which div is displayed on a form at one time. This you can achieve by placing all of your divs in the same container. Then toggle their display css property.
Using jQuery it's as simple as
$('#divname').load('/path/to/file.html');
Note that the result should probably not include <html> and <head> tags (although you don't seem like you care about well formed HTML code).
I should probably also mention that you shouldn't make the client load content for you, that's what server side code is for.
Personally I would use the innerHTML property on one of your elements. It will allow you to add markup to that element. Check it out here: http://www.w3schools.com/jsref/prop_html_innerhtml.asp
<html>
<head>
<title>Multiple DIV</title>
<style type="text/css">
DIV#db {
border : 1px solid blue;
width : 400px;
height : 400px;
}
</style>
<script type="text/javascript">
var Content = new Array();
Content[0] = '<i>test1</i>';
Content[1] = '<b>test2</b><br><img src =http://www.w3schools.com/images/w3schoolslogo.gif>';
Content[2] = '<u>test3</u>';
Content[3] = '<s>test4</s>';
function Toggle(IDS) {
document.getElementById('db').innerHTML = Content[IDS];
}
</script>
</head>
<body onLoad="Toggle(0,10)">
FAQ #1
FAQ #2
FAQ #3
FAQ #4
<p />
<div id="db"></div>
</body>
</html>
I updated it to work all javascripty with the innerHTML
I have a blog with annotated references like [1] that.
[1]Jake Smith. http://example.com ..............
[2].............
I want it so the [1] in the text is an anchor that links to the [1] in the References. I know I could do this by doing something in the text like [1]and then making every list item in the references have an id, , that is, that is,
<ol>
<li id="ref1"></li>
...
</ol>
But that's a lot of work for me to go through all the blog posts. I'm sure I could make a JavaScript or jQuery function to add this functionality, but then it would not work with JavaScript disabled. So is there some other function I don't know? Like some fancy CSS trick, or should I just use JavaScript to do this?
What are your recommendations?
You could have the links inline so it displays normally when the user has JavaScript disabled. With JavaScript on, just style it as a Wikipedia reference.
Demo: http://jsfiddle.net/6A8nX/
Your options are:
A blog plugin that detects this in the content and forms the link and adds the related id to the appropriate element for you when the HTML is being output
A script that runs and does the same thing after the HTML has loaded.
Manually adding the links by hand.
A blog plugin is your best bet, since surely this is a solved problem (though it would depend on your blogging platform, of course).
CSS is for styling, it can't add links/ids.
In addition, remember that if you are ever going to display multiple blog posts on each page, you will want to add the blog id to the anchor as well. Instead of ref1, you'll want:
ref_[blogid]_[refid]
JavaScript and CSS are the way to go, if you cannot do this on the server side. The following will do what you want:
<html>
<head>
<style type="text/css">
ref {
display:none;
vertical-align:super;
font-size:small;
}
references {
display:block;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" language="javascript"></script>
<script language="javascript">
window.onload = function(){
$("references").append("<ol>");
$("ref").each(function(index) {
$("references").append("<li><a name=\"ref_"+(index+1)+"\">"+$(this).text()+"</a></li>");
$(this).html("["+(index+1)+"]");
$(this).css("display", "inline"); // hides references unless the script runs
});
$("references").append("</ol>");
}
</script>
</head>
<body>
<p>This is a reference.<ref>http://www.google.com</ref></p>
<p>This is a another reference.<ref>http://www.yahoo.com</ref></p>
<references>
</references>
</body>
</html>
CSS is for presentation, and does not provide logic. Javascript is the best answer in this case, because it provides the tools and logic you need to accomplish the task.
I have a web form that contains a usercontrol and I would like to be able to access the html elements within the usercontrol from the form page using javascript.
I tried the following:
document.getElementById('<%= usercontrol.clientid %>')
but this returned null.
I had a look around with firebug and found that the tags in the usercontrol render with clientids like usercontrolid_myelement. I'm guessing that something like this might work:
document.getElementById('<%= usercontrol.clientid %>'+'_myelement')
Is there a better/nicer way of doing this?
I have seen through your question with my psychic powers!
Your problem is that your serverscript in your main page can't access the ASP.net elements of your usercontrol.
The solution is to expose the elements, or just the ClientIDs of the elements you need, through properties in the usercontrol. Then you can use the ClientIDs in Javascript like you want to.
Your problem is likely due to the javascript running before the html is fully loaded.
following results in null
<head>
<script type="text/javascript">
alert(document.getElementById('main'));
</script>
</head>
<body>
<div id="main">
</div>
</body>
this is better and returns the object
<head>
function foo(){alert(document.getElementById('main'));}
</head>
<body onload="foo();">
<div id="main">
</div>
</body>
If your using .net 4 then you can stop the generated ids from being in that weird format.
Just add this property the asp.net ClientIDMode="Static"
e.g.
That should make it easier to access in the dom from javascript.