Hi I have here a simple representation of the page I want to do.
I want to get the hidden field values of page2.aspx and pass it to the label of page1.aspx using c#.
Can you guys help me tnx :)
HTML
this hidden value is in page 2 that is in iframe
<input type="hidden" id="hdnpage2" runat="server" />
Javascript
on a button click or page load in Page 1 try to call this JS
var iframe = document.getElementById('iframebody');//id of your iframe
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var hdnvale = innerDoc.getElementById('hdnpage2');
alert (hdnvale.value);
You can get values from iframe and assigned to parent page.
basically every page is render as html irrespective of languages and technology, so i am using jquery to get the iframe value and assign to parent controls.
Iframe.aspx
<div>
<asp:Label runat="server" ID="lblInfo">This is Iframe : </asp:Label>
<asp:HiddenField ID="hidfld1" runat="server" Value="this is test hidden value." />
</div>
Parent.aspx
<header>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#uploadIFrame').load(function () {
var $currIFrame = $('#uploadIFrame');
var $hidval = $currIFrame.contents().find("body #hidfld1").val();
alert($hidval);
$("#MainContent_txtInfo").val($hidval);
});
});
</script>
</header>
<body>
<div>
<asp:TextBox runat="server" Text="test" ID="MainContent_txtInfo"></asp:TextBox>
<iframe id="Iframe1" scrolling="no" frameborder="0" style="border-style: none; margin: 0px; width: 100%; height: 40px;" src="IFRAME.aspx"></iframe>
</div>
</body>
once you got the hidden field value in textbox or label then you can user your c# code to process the value in code behind.
Related
I'm trying to get the value from a hiddenfield but I'm getting an undefined alert. What am I doing wrong?
// Masterpage
...
<body>
<div class="container">
<asp:ContentPlaceHolder ID="MasterContent" runat="server"></asp:ContentPlaceHolder>
</div>
<script>
$(document).ready(function () {
alert($('#hiddenPersonId').val());
});
</script>
</body>
// Default.aspx
<asp:Content ID="Content" ContentPlaceHolderID="MasterContent" runat="Server">
<asp:HiddenField ID="hiddenPersonId" runat="server" Value="1" />
</asp:Content>
I tried other solutions but these are also not working:
alert($("#<%= hiddenPersonId.ClientID %>").val());
You could try setting ClientIDMode to static if you're .net 4+. You'll want to check that it is defined first. If you want/need the js to be on master page.
<script type="text/javascript">
$().ready(function () {
alert($('#hdnPersonId').val());
});
</script>
<asp:HiddenField ID="hdnPersonId" Value="1" runat="server" ClientIDMode="Static" />
It will not work from master page. You need to call it from Default.aspx or try
$('[id*="hiddenPersonId"]')
on master page but other pages that uses this master page should not have any control that contains hiddenPersonId in its id
I have an image control on ASPX page. I want to show "Change Picture" option on top it like Facebook. When click on it should go different page.
Any idea how to do this?
Try this code
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
#profile_pic_wrapper{ position:relative; border:#ccc solid 1px; width:200px; height:200px;}
#profile_pic_wrapper a{ position:absolute; display:none; top:0; right:0; line-height:20px; padding:5px; color:#fff; background-color:#333; text-decoration:underline;}
#profile_pic_wrapper:hover a{ display:block; }
#profile_pic_wrapper:hover a:hover{text-decoration:none;}
.profile_pic{ width:200px; height:200px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="profile_pic_wrapper">
<asp:Image ID="imgProfilePic" runat="server" ImageUrl="profile.jpg" CssClass="profile_pic"/>
<asp:HyperLink ID="lnkChangePicture" runat="server" NavigateUrl="ChangeProfilePic.aspx">Change Picture</asp:HyperLink>
</div>
</div>
</form>
</body>
In the above example, I've included the css styles in aspx page for illustrative purpose only. For real world implementation, it is always recommended to have your styles in a separate css file.
May be this is some thing you want:
http://demo.fearlessflyer.com/html/demo/pretty-hovers/
http://thirdroute.com/projects/captify/
Hope this helps.
You can find a how-to here http://www.dreamweavertutorial.co.uk/dreamweaver/articles/transparent-layer-overlay.htm
They are called overlays.
Another example here
http://css-tricks.com/3118-text-blocks-over-image/
You would need some client-side code to actually manage the mouseover event and then to show the overlayed A tag (with the text/image you want)
Wrap the imagebutton in a div and tie jquery handlers to show or hide the link.
Edit: Here is a simple example:
<head runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="mynamediv" style="width: 50px;">
<div id="mydiv" style="display: none;">Change Image</div>
<asp:ImageButton runat="server" ID="myimage" ImageUrl="~/myimage.gif" />
</div>
</form>
<script language="javascript">
$("#mynamediv").mouseover(function () {
$("#mydiv").show();
});
$("#mynamediv").mouseout(function () {
$("#mydiv").hide();
});
</script>
Here's a balloon tip you might like
http://file.urin.take-uma.net/jquery.balloon.js-Demo.html
I've got a form that is displayed inside a jQuery colorbox. When the form is submitted, the fields within that form are not being posted back to the page. I modified the javascript to store the form fields into hidden fields on a submit and those DO post back. The problem is, since this is a login box, I really don't want to move the password around like that. The main form content is inside an update panel. Here is the code for my master page:
<form id="myform" runat="server" clientidmode="Static" method="post">
<asp:ScriptManager ID="ecommerceManager" runat="server" ClientIDMode="Static" EnableViewState="False" EnablePageMethods="True">
<Scripts>
<asp:ScriptReference Path="~/js/jquery-1.6.1.min.js" />
<asp:ScriptReference Path="~/js/jquery.colorbox.min.js" />
<asp:ScriptReference Path="~/js/eCommerce.js" />
</Scripts>
</asp:ScriptManager>
<div style="width: 940px; margin-left: auto; margin-right: auto;">
<div align="left">
TOP OF THE PAGE
<asp:ContentPlaceHolder ID="bodyContent" runat="server" ClientIDMode="Static">
</asp:ContentPlaceHolder>
BOTTOM OF THE PAGE
</div>
</div>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(closeLoading);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(loadData);
</script>
</form>
Here is some of the code from my main default page that uses the master page:
<asp:Content ID="mainContent" ContentPlaceHolderID="bodyContent" runat="server">
<asp:UpdatePanel ID="ecommerceUpdate" runat="server" ClientIDMode="Static">
<ContentTemplate>
<asp:Panel ID="pnlEcomMain" runat="server" CssClass="ecom_main" ClientIDMode="Static">
<asp:HiddenField ID="statusField" runat="server" ClientIDMode="Static" ViewStateMode="Disabled" EnableViewState="False" />
<asp:HiddenField ID="hdnUsername" runat="server" ClientIDMode="Static" ViewStateMode="Disabled" EnableViewState="False" />
<div class="add_product">
<div class="add_product_menu text_12_bold">
<asp:Image ID="imgAddProducts" ImageUrl="~/images/ecom_icon_add_2.gif" CssClass="std_btn" AlternateText="Add Products" runat="server" ClientIDMode="Static" />Add Additional Products:<br /><br />
<asp:DropDownList ID="newproduct" runat="server" ClientIDMode="Static"
onchange="addProduct()">
</asp:DropDownList>
</div>
</div>
</asp:Panel>
<div class="clear"></div>
<!--- HERE IS THE COLORBOX POPUP CONTENT --->
<div style="display: none; visibility: hidden;">
<div id="inline_login">
<p><strong>User Login Details Go Here</strong></p>
User Name: <asp:TextBox ID="loginName" runat="server" ClientIDMode="Static" EnableViewState="False" ViewStateMode="Disabled" /><br />
Password: <asp:TextBox ID="loginPassword" runat="server" TextMode="Password" ClientIDMode="Static" /><br />
<input type="button" name="loginBtn" id="loginbtn" value="Login" onclick="javascript:validateLogin()" />
</div>
</div>
</asp:Panel>
<asp:Label ID="xmlContent" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
The new product field properly posts, but the username and password doesn't UNLESS I copy it to the hidden fields before a post. I'm guessing maybe it's a conflict with the update panel? I was originally trying to get a Login Control working in the Update Panel but read in the forums that there is a known problem with this.
Any insight on this would very tremendously be appreciated. I'm using firebug and can confirm that the fields simply aren't in the post which is why ASP isn't finding them.
Apparently, despite being inside the form, the colorbox actually moves the content outside the form. I was able to resolve this by adding this line of code to my JavaScript submit function:
jQuery('#inline_login').appendTo('form');
Hope it helps someone else!
I have never used jQuery colorbox, but i had a similar problem with jQuery UI modal popup. What it was doing was, when i attached the popup it moved the content div outside of the asp.net form so the controls were not getting posted back.
Another option that worked for me in a particular .NET CMS (DNN) was to take Jack's fix and attach to the cbox_complete event. Posting in case someone else might find this useful.
$(document).bind('cbox_complete', function () {
$("#colorbox, #cboxOverlay").appendTo('form:first');
});
Just had a similar problem with colorbox & form, solved it this way. My problem was that the submit wasn't working since the fieldsets were stripped of the form tag; So if your form isn't posting in colorbox, try this, sending in the form id as the href for the colorbox content
$(document).ready(function () {
$('#login-trigger').click(function () {
$.colorbox({
inline: true,
href: "#login-form",
close: "×",
onOpen: function () { $('#login-content').css({ display: 'block' }); },
onClosed: function () { $('#login-content').css({ display: 'none' }); }
});
return false;
});
OnClick we load a usercontrol in an asp:panel. That works fine. It appears as a modal popup. The question is (and I've looked high and low) is there a way to make this "draggable"?
The only thing I've found is by using this:
http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/DragPanel/DragPanel.aspx
I'd rather not have to include the ajaxcontroltoolkit.
My ImageButton:
<asp:ImageButton ID="btnOpenBox" ImageUrl="~/images/open.gif" runat="server"
OnClick="btnOpenBox_Click" />
The Modal Popup Panel:
<asp:Panel ID="pnlMyModalBox" runat="server" Visible="false" HorizontalAlign="Left"
Style="position: absolute; left: 75px; z-index: 50000; top: 100px;">
<uc1:MyUserControl ID="mdMyUserControl" runat="server" Visible="false" />
</asp:Panel>
The codebehind:
protected void btnOpenBox_Click(object sender, ImageClickEventArgs e)
{
System.Web.UI.HtmlControls.HtmlGenericControl _body = (System.Web.UI.HtmlControls.HtmlGenericControl)this.Page.Controls[0].FindControl("Body1");
_body.Attributes.Add("class", "modalBackground");
mdJournalEntry.Visible = true;
pnlBody.Enabled = false;
pnlMyModalBox.Visible = true;
pnlMyModalBox.Height = Unit.Pixel(350);
pnlMyModalBox.Width = Unit.Pixel(800);
}
I used jquery with great results.
This is the official link with a couple of great examples
http://jqueryui.com/demos/draggable/
You should find everything you need there
EDIT
Download the jquery ui and include the following files in your project and this code in the page
<script src="../../jquery-1.4.4.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
//These include tags have to be in this exact order because the lower one depend on the first ones
<script type="text/javascript">
$(document).ready(function() {
dragAndDrop();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(dragAndDrop);
//this makes the javascript method execute after an ajax action on the page
});
function dragAndDrop() {
$( ".draggable" ).draggable();
}
</script>
Now simply add a class to your pannel like this
<asp:Panel ID="pnlMyModalBox" runat="server" class="draggable" Visible="false" HorizontalAlign="Left"
Style="position: absolute; left: 75px; z-index: 50000; top: 100px;">
<uc1:MyUserControl ID="mdMyUserControl" runat="server" Visible="false" />
</asp:Panel>
If everything is done correctly it should work
Making a panel (renders as a div) draggable can only be done in JavaScript. So check jQuery or Prototype/Scriptacolous or some other JavaScript library. These support this kind of operations
Add this to the head (sorry you'll have to do a search for the $asp function.. very useful!):
<script type="text/javascript">
$(document).ready(function() {
$asp("pnlMyModalBox").draggable();
});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
Hope this helps someone else.
How can i use progress bar in web application c#, without ajax tools... When i click from one page to next page..the page load should be shown as in progress bar.. Can anyone help out, without ajax tools..
Thank you in advance
I think you still need javascript but dont need to use the AJAX update panel.
on your page add a div with an
progress animated image
set the div to hidden using CSS
on your linkbutton/button or
whatever, link up your onClick event
as normal
on the same linkbutton/button add an
onClientClick attribute and call a
javascript function to set the div
style to visible
this will in effect display the progress meter until the page has actually posted back.
Wired up Button
<asp:Button ID="btnProgress" runat="server" Text="show progress" OnClientClick="javascript:DisplayProgress()" OnClick="btnProgress_Click"
CausesValidation="false" />
Progress Meter Div
<div ID="pnlProgress" Class="modalBackground" style="visibility: hidden;">
<div id="content" class="modalDialogClear" style="text-align: center; " >
<br />
<br />
looking up address, please wait...<br />
<img src="/images/progress_bar.gif" />
</div>
Javascript
function DisplayProgress()
{
document.getElementById('pnlProgress').style.visibility = 'visible';
window.setTimeout(HideProgressPanel, 20000); //handles hiding the progress panel should the operation time out
}
function HideProgressPanel()
{
document.getElementById('pnlProgress').style.visibility = "hidden", 20000
}
I did in this way, when page load, before loading complete I am show progress bar...
<body onload="javascript:HidePreloader();">
<div id="preloader" style="width: 100%; text-align: center;">
<img src="../Images/loading.gif" alt="" style="display: block;" />
</div>
<script language="javascript" type="text/javascript">
function HidePreloader() {
if (document.getElementById('preloader') != null) {
document.getElementById('preloader').style.visibility = 'hidden';
}
}
</script>