get label value in javascript through iframe - asp.net

i have an aspx page containing following code
<body>
<script language="javascript" type="text/javascript">
function Hidee()
{
alert(window.frames["frame1"].document.getElementById("Label1").text);
}
</script>
<form id="form1" runat="server">
<div>
<iframe id="frame1" name="frame1" class="frame" frameborder="0" src="Default4.aspx"></iframe>
<a onclick="javascript:Hidee()" style="cursor: pointer">close</a>
</div>
</form>
</body>
in Default4 page i have a label with id Label1
when i click on close button i get undefined alert message

getElementById("Label1").text
An HTMLLabelElement doesn't have a text property.
If it's a simple label that contains only a single Text node, you can say:
getElementById('Label1').firstChild.data
If it might contain more complicated text and element nodes, you'd have to iterate over them to pick up the text, or use the DOM Level 3 Core textContent property, with backup for IE which doesn't support it:
var label= frames['frame1'].document.getElementById('Label1');
var text= ('textContent' in label)? label.textContent : label.innerText;

try with:
function Hidee() {
var ifr=document.getElementById("frame1"),
cd=ifr.contentDocument || ifr.contentWindow.document;
alert(cd.getElementById("Label1").innerHTML);
}

Related

<a href or <asp:hyperlink.....tag does not render at runtime

i am trying to display a simple div with hyperlink that represents x
like this:
So, when my run my app i see the div but i dont see the x which is <a href tag
and here is my code:
<div class="success">×status message here...</div>
and when i looked at the source of the page this is what it renders:
<div id="ctl00_ctl00_ContentMain_ContentMain_employee_status" class="success" style="display:block;">status message here...</div>
and then i tried with <asp:hyperlink....
<div class="success" id="divStatus" visible="false" runat="server"><asp:HyperLink id="success" runat="server" CssClass="close" Text="×"></asp:HyperLink></div>
and i still dont see href tag, what is going on here and why i am not able to render the <a href or <asp:hyperlnk tag any clue?
i am writing InnerHtml divSuccess.InnerHtml ="status message here...
if thats the case that erasing its static contents then what is the
alternate?
If divStatus contains controls that you want to keep, then you can append HTML to it by using a Literal control and adding it to the controls collection, like:
var lit = new Literal();
lit.Text = "my text or <strong>html</strong>";
this.divStatus.Controls.Add(lit);
Alternatively, you could use another control inside divStatus and alter its inner HTML:
<div id="divStatus" runat="server">
<a id="lnk1">This is the link that we don't want to be removed.</a>
<asp:Literal runat="server" id="litStatusHtml" />
</div>
here is how i able to solved my question
divStatus.InnerHtml = "<a href='#' class='close'>×</a>" + "status message here...";

Open aspx page as a modal popup

I have a grid with edit option ,and on edit button click i need to redirect to an edit page .
the requirement is to get this edit page as a popup with background (prev page) greyed out.
i tried modal popup, but the controls are on a separate page .
i tried modal popup with panel and a Iframe : this works..but thean another problem arises.i need to close the page on 'SAVE' or 'Cancel' butotn click .these controls would be on the edit page and not on the prev page .any help is appreciated .
Thanks
Rajat
i'll strongly suggest to use user control as it'll be more handy for you to manage and there is no point creating a whole page for it bcz modal popup uses ajax request and if you try to load the page in it then you have to do form post ... which doesn't go along either use ajax request or form post back ...
plus i was looking for the answer of ur question and i came across this article where it says:
You May use Modal Popup Extender to open some part of the page as
Popup. But there we don't have any property to open other html or aspx
page in Popup window.
http://wiki.asp.net/page.aspx/1378/open-different-page-using-ajax-modal-popup-extender-control/
and also found people asking same question as you did and the response they got is here
use Iframe or user control
Is there a way to open another page using ModalPopup Extender?
and i'll suggest to modify your design as it doesn't do any harm, instead it'll be much more helpful ...
hope this help ...
I've used the Modal Popup Control from the AJAX Control Toolkit several times with good success:
http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/ModalPopup/ModalPopup.aspx
If you are using bootstrap Modal then you can add an iframe into the modal body and load the url of your page inside it.
<div class="modal fade" id="modalC" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Cantidad reservas mensuales</h4>
</div>
<div class="modal-body" id="content">
<iframe src="your new page url">
</div>
</div>
</div>
</div>
Just an idea but what about using the jquery "contents()" function?
You could set an interval to look for an element within the iframe from the parent page.
(You're using .net so you could make it appear upon postback on the iframe's page).
<%# Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="admin_test" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function () {
var watchForClose = setInterval(function () {
if ($('#testIframe').contents().find('#closeModal').length > 0) {
clearInterval(watchForClose);
/* call function to close modal here..*/
alert('Close modal');
};
}, 100);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<iframe id="testIframe" src="Default.aspx" width="300" height="300"></iframe>
</div>
</form>
</body>
</html>
The above is looking for an element within the iframe-page with an id of "closeModal". When that element appears you can make a call to the modal's close function, (just replace the alert with the call).
We can open an aspx as popup using IFrame as follows,
First take a button and provide onclick event as follows
<input id="btnSymbol" type="button" value="..." onclick="OpenMyPopUp()" runat="server"/>
Next In the page provide a "Div" tag with id as follows
<div id="MyDialog">
</div>
Then find below the two methods which take the present URL and opens a aspx page in a popup using IFRAME
function OpenMyPopUp(){openPopup('OpenPage.aspx', 530, 800, 'Page Title');}
The Four parameters are sent as follows URL,height,width,title
function openPopup(url, h, w, t) {
if (url != null && h != null && w != null && t != null) {
urlBase = location.href.substring(0, location.href.lastIndexOf("/") + 1);
url = urlBase + url;
$('#MyDialog').html('<iframe border=0 width="100%" height ="100%" src="' + url + '"> </iframe>');
$("#MyDialog").dialog({
title: t,
modal: true,
autoOpen: true,
height: h,
width: w,
resizable: false,
position: ['right-10', 'top+30'],
closeOnEscape: false,
dialogClass: "alert"
});
}}

Using custom css within a Sharepoint webpart as a Embedded Resource is not working, why?

I've read in another question here how could I use custom CSS within my Sharepoint WebPart. So I followed this link:
http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=42
And I put my css as an embedded resource. Everything ok, I launch the page.
But my style doesn't appear.
I peek at the source code, and I find my resource:
<script src="/WebResource.axd?d=YuTREer2woiGbjiSaZdP0bLrdm6vpTygUffdwMFJr0zmn76B3vav0QRpmxzvYvKzZRnmgKpNbLHpnJf-W4rfrv-MrIZEoz6tWi5xHXTiN3lcxdP3s7ysDExW-eBQTlH8cUrMRw2&t=634369276247430484" type="text/javascript"></script>
Which leads me to my css:
.webPartContainer
{
background-color:Aqua;
}
.webPartContainer .Text
{
font-size:xx-large;
}
And here's where it references the styles:
<td class="ms-WPBorder" valign="top">
<div WebPartID="2109154d-6921-46ac-84d4-8ce24a926617" HasPers="false" id="WebPartctl00_m_g_2109154d_6921_46ac_84d4_8ce24a926617" width="100%" class="ms-WPBody" allowDelete="false" allowExport="false" style="" >
<div id="ctl00_m_g_2109154d_6921_46ac_84d4_8ce24a926617">
<div class="webPartContainer">
<span class="Text">Hello World with container!</span>
</div>
</div>
</div>
</td>
What's possibly happening ?
Thanks in advance !
EDIT: CssRegistration gives me permission errors, why ?
The browser don't expect the content of a <script type='text/javascript'> tag to be CSS.
So you should change your code to something like this:
string tempLink= "<link rel='stylesheet' text='text/css' href='{0}' />";
string location = Page.ClientScript.GetWebResourceUrl(this.GetType(), "myStyleSheet.css");
LiteralControl include = new LiteralControl(String.Format(tempLink, location));
Controls.Add(include);

Dojo.. cannot execute javascript in contentpane

I have a standalone html page that contains a dojo DataGrid that works just fine. I am including the relevant code below.
<script type="text/javascript">
var readStore, grid;
var gridLayout = [
new dojox.grid.cells.RowIndex({ name: "Row #", width: 5, styles: "text-align: left;" }),
{
name: "Name",
field: "name",
styles: "text-align:right;",
width:30
},
{
name: "Type",
field: "type",
width:20
}
];
function initGrid()
{
readStore=new dojox.data.QueryReadStore({url:"/EG3/orgUnit/getChildren", requestMethod:"get"});
console.info("readStore initialized");
grid=new dojox.grid.DataGrid({store:readStore,
id:"grid",
delayScroll:true,
structure:gridLayout,
query:{id:2},
loadingMessage:"Loading..."
}, document.createElement('div'));
dojo.byId("gridContainer").appendChild(grid.domNode);
grid.startup();
}
dojo.addOnLoad(initGrid);
</script>
</HEAD>
<BODY class="claro">
<div id="list" class="list">
Table goes here
<div id="gridContainer">
</div>
</div>
Now, the problem happens when I try to include this page as a contentpane within a TabContainer. The TabContainer loads the page markup as is and does not fire the onLoad script of the page that contains the grid.
<div dojoType="dijit.layout.TabContainer" region="center" tabStrip="true" id="orgUnitTabs">
<div dojoType="dojox.layout.ContentPane" title="Info" selected="true" id="orgInfo" jsId="orgInfo">
</div>
<div dojoType="dojox.layout.ContentPane" href="/EG3/app/orgUnit/orgUnitChildren.gsp" executeScripts="true" parseOnLoad="true" extractContent="true" title="Children" id="children" jsId="children">
Children of the selected Org
<script type="javascript" event="onLoad">
initGrid();
</script>
</div>
Any ideas on how the onLoad script of the child page can be fired?
Thanks in advance.
you should check if the param executeScripts set to TRUE, and if you wanna use declarative method, you have to parse the domNode manually, see the detailed dojo.parse method:http://docs.dojocampus.org/dojo/parser
Not sure what the right answer is, but if I were you, I would try doing it all programatically instead of declaratively, trap errors, use console outputs to see what's happening and log events as it loads.

Can i give print option to print webform data in asp.net

I have a webform on which i display all the details of a particular record now i want to give my client print functionality so he can print those detail. Can this be done in asp.net and if yes then how?
You can use css to specify stylesheets to use for printing. There's not really anything asp.net specific about it - it's handled by the browser.
http://www.alistapart.com/articles/goingtoprint/
Based on what I understood, you want to print part of the page, right?
One option is to use a pop up a new page with content to be printed passed from the current page and let the user print it from the pop up page.
Please refer the following demo:
Print Demo
<script language="javascript" type="text/javascript">
function doPrint()
{
bdhtml=window.document.body.innerHTML;
sprnstr="<!--startprint-->";
eprnstr="<!--endprint-->";
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
window.document.body.innerHTML=prnhtml;
window.print();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="WithoutPrint">
This area will not print!
</div>
<div id="Print">
<!--startprint-->
This area will print!
<!--endprint-->
</div>
<input id="btnPrint" type="button" value="Print" onclick="doPrint()" />
</form>
</body>
</html>
Hope it helps...Thanks.

Resources