Selecting elements in a usercontrol using JavaScript - javascript

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.

Related

Inject HTML response into an iframe (from an AJAX call)

I won't beat around the bush: my AJAX call returns a message object response (message = {...}), where the messages.description parameter is an HTML string which looks something like this:
"<!doctype html>
<html>
<head>
<style>
...some style
</style>
</head>
<body>
...some content
</body>
</html>"
is there any way to embed it into an iframe? I'm not really familiar with iframes and any help on the matter is appreciated!
Also, I'm using vanilla React without babel or webpack, so React.createElement() aplenty. This is just to give new features an outline since my company wants to shift into React + node.js in the following months
You can inject your html to the iframe as below,
HTML:
<iframe id="iFrameID" src="javascript:void(0);"></iframe>
Javascript:
document.getElementById('iFrameID').src = "data:text/html;charset=utf-8," + escape(htmlContent);
You can't, because it's prohibited in policy of browsers crossdomain.
But you can in one case if you have control over the domain you want to update html in the iframe.
more information https://spring.io/understanding/CORS

change innerHTML to nearby document

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.

Javascript to rotate between pages within ONE HTML page

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

How do I access the element ID in an asp.net masterpage with JavaScript?

I know there are a few answers to this question.
Usually the answers given online involve doing this...
document.getElementById (<%=myElementID.ClientID %>);
rather than this...
document.getElementById("myElementID");
However, even when I do it the first way, my JavaScript code still cannot find the element. It tells me the element is undefined.
So...just for testing...I tried to strip out all my JavaScript code and access the element with an alert box like this...
<script type="text/javascript">
alert(document.getElementById('<%=searchHyperLink.ClientID %>').value);
</script>
It still tells me its undefined.
But its not freaking undefined! When I view the page source, the id rendered by <%=searchHyperLink.ClientID %> exactly matches the id of the control I want to find.
Any suggestions?
To expand on Evan's comment, if you're doing the document.getElementById in a script tag that's before the element in the ordering of the document, it will return undefined. Try this instead:
<html>
<head>
<script>
function postLoadFn() {
alert(document.getElementById('<%=searchHyperLink.ClientID %>').innerHTML);
}
</script>
</head>
<body onload="postLoadFn();">
<!-- Your markup here -->
</body>
</html>
I've used parent to access a higher level in my project asp.net masterpage(home.master).
Instead of:
document.getElementById (<%=myElementID.ClientID %>);
Use:
parent.window.document.getElementById (<%=myElementID.ClientID %>);

Wikipedia-like references without JavaScript?

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.

Categories