Conditionally set the content inside the facebox modal - asp.net

I am working on a form where I need to conditionally set the content inside the facebox modal. I have created a sample code below where on click of each link I need to open a facebox modal(which is getting opened). Now in this modal I am having a textbox. I want the textbox to be filled automatically with the value equals to the text of anchor which opened the modal i.e On clicking the first hyperlink the textbox should be filled with "Field1" and on clicking the second the textbox should have "Field2" value. Here is the sample code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link href="http://defunkt.github.com/facebox/facebox.css" media="screen" rel="stylesheet"
type="text/css" />
<script type="text/javascript" src="http://defunkt.github.com/facebox/facebox.js"></script>
</head>
<body>
<form id="HtmlForm" runat="server">
Field1 <br />
Field2 <br />
<div id="info" style="display: none;">
<p>
Field: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</p>
<p>
<asp:Button ID="Button1" runat="server" Text="Edit" />
</p>
</div>
</form>
<script type="text/javascript">
$(function () {
$('a[rel*=facebox]').facebox();
});
</script>
</body>
</html>
The one approach with which I am going right now is creating a fake anchor and then triggering its click event to open the modal
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link href="http://defunkt.github.com/facebox/facebox.css" media="screen" rel="stylesheet"
type="text/css" />
<script type="text/javascript" src="http://defunkt.github.com/facebox/facebox.js"></script>
</head>
<body>
<form id="aspnetForm" runat="server">
<a id="afake" href="#info" style="display:none;"></a>
Field1 <br />
Field2 <br />
<div id="info" style="display: none;">
<p>
Field: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</p>
<p>
<asp:Button ID="Button1" runat="server" Text="Edit" />
</p>
</div>
</form>
<script type="text/javascript">
$(function () {
$('a[rel*=facebox]').click(function () {
$('#afake').facebox().trigger('click');
var instance = $(this);
$('#<%= TextBox1.ClientID %>').val(instance.html());
});
});
</script>
</body>
</html>
Looking for more robust solution than mine.

I'm not familiat with ASP.NET enough to know whether the ID '#TextBox1' I reference below is appropriate, but this should help get you started at least. It's simply setting the value of the input element to the text contained in the anchor tag when the anchor tag is clicked.
<script type="text/javascript">
jQuery(function($) {
$('a[rel*=facebox]').facebox().click(function(event) {
$('#TextBox1').val($(this).text());
});
});
</script>

Related

ASP.NET AutoPostBack from dropdown with bootstrap

I am having a problem with the AutoPostBack event. My dropdown"s AutoPostBack does not work. It worked fine until I introduced bootstrap into the mix.
Dropdown
<asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="namesSQL"
DataTextField="Name" DataValueField="EmplID" AutoPostBack="true"
CssClass="form-control">
</asp:DropDownList>
SQL Data Source
<asp:SqlDataSource ID="namesSQL" runat="server"
ConnectionString="<%$ ConnectionStrings:Myapp %>"
SelectCommand="SELECT EmplID, EmpName, LastName,
{ fn CONCAT(EmpName, LastName) } AS Name
FROM Employees
ORDER BY { fn CONCAT(EmpName, LastName) }">
</asp:SqlDataSource>
The data source works fine, I listed it since I know someone will ask for it...
UPDATED
OK, I found that when I plugged that page into another master, it worked. Here is the master that it did NOT work in. From the original that worked, I formatted some divs to encapsulate the content sections, and added bootstrap links.
<%# Master Language="VB" CodeFile="is.master.vb" Inherits="masterPages_subMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Home</title>
<%--<link href="~/App_Themes/default/subpage.css" rel="stylesheet" type="text/css" media="screen" />--%>
<link rel="shortcut icon" type="image/x-icon" href="../images/green_m.ico" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" type="text/css" />
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" type="text/css" />
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="col-md-10 col-md-offset-1"
<form id="form1" runat="server">
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<asp:Repeater runat="server" ID="topmenucontainer" DataSourceID="SiteMapDataSourceMainNavigation">
<ItemTemplate>
<li >
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("url")%>'><%# Eval("Title") %></asp:HyperLink>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
</nav>
<asp:SiteMapDataSource ID="SiteMapDataSourceMainNavigation" runat="server" ShowStartingNode="False" SiteMapProvider="isMapProvider"/>
<div class="row">
<div class="col-md-10">
<h1>Information Services</h1>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<br />
<div class="row">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server" />
</div>
</form>
</div>
</div>
</body>
</html>

bootstrap js not loading asp.net webform

<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$("button").click(function () {
alert("funny");
var $btn = $(this);
$btn.button('loading');
// Then whatever you actually want to do i.e. submit form
// After that has finished, reset the button state using
setTimeout(function () {
$btn.button('reset');
}, 1000);
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">#</span>
<asp:TextBox ID="TextBox1" runat="server" Text="1" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></asp:TextBox>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" class="btn btn-default" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" ></asp:Label>
</form>
<button type="button" data-loading-text="Loading..." class="btn btn-primary">
Loading state
</button>
</body>
</html>
this is my simple code..
i have confirmed that jquery should load first then bootstrap.. still its not loading

Save image to desktop from iframe tag

I am using iframe tag to display image. Also there is a Save Image Button on page. I want that when user click the button, then the image inside iframe should save on desktop.
Remember i want only image to be saved on desktop not the whole page.
How to do this...
eg:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/JavaScript">
var now = false;
function saveIt() {
if (now) { document.execCommand("SaveAs"); }
}
</script>
</head>
<body önload="now=true">
<form id="form1" runat="server">
<asp:Button ID="Button1" runat="server" OnClientClick="saveIt();" Text="Save" />
<br />
<iframe src="Images/findr.png" width="400px" height="400px" id="external" name="external"></iframe>
</form>
</body>
</html>
You can try this code. I've tested this and working fine:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
function saveIt() {
imgURL = document.getElementById('external');
if (typeof imgURL == 'object')
imgURL = imgURL.src;
window.win = open(imgURL);
setTimeout('win.resizeTo(0, 0);', 100);
setTimeout('win.moveTo(0, 0);', 200);
setTimeout('win.document.execCommand("SaveAs")', 500);
setTimeout('win.close()', 1000);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" id="Button1" runat="server" onclick="saveIt();"
value="Save" />
<br />
<iframe src="Images/orderedList3.png" width="400px" height="400px"
id="external" name="external">
</iframe>
</form>
</body>
</html>

Colorbox + ASP.NET WebForm Submit Button

I am having trouble using a Colorbox with an ASP.NET WebForm inside. What I am trying to do is:
User clicks a link, and the colorbox pops up
Inside colorbox, user enters a term in a textbox and clicks submit button
On submit, the page hits the DB and then shows results (still inside the colorbox)
Right now, I have steps #1 & #2 working, but #3 isn't. If I click the submit button, the browser navigates to the page that was loaded inside the colorbox (FAQ.aspx).
Test.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test Page</title>
<link href="css/colorbox.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.colorbox.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a class="cbox">FAQs</a>
</div>
</form>
<script>
$(document).ready(function () {
var colorbox = $("#colorbox");
$('form#Form1').prepend(colorbox);
});
$('a.cbox').colorbox({ href: "FAQ.aspx" });
</script>
</body>
</html>
FAQ.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Frequently Asked Questions</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Search: <asp:TextBox runat="server" ID="txtSearch" /> <asp:Button runat="server" ID="btnSubmitSearch" Text="Submit" OnClick="btnSubmitSearch_Click"/>
<br />
<asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Literal ID="litOutput" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubmitSearch" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<br />
</div>
</form>
</body>
</html>
Can anyone help me figure out what I'm doing wrong?
You have to load the colorbox content inside an iframe:
$('a.cbox').colorbox({ href: "FAQ.aspx", iframe: true, width: 456, height: 100 });

Ajax combobox list shifts to right under Jquery tabs

I have been using the same Ajax Combobox everywhere in my project but as soon as I use Ajax Combobox under the jquery tab controls, the list shifts to the right and UI appears vague.
I don't want to shift from ajax to jquery combobox and autocomplete, as I just want this issue to be resolved.
Below is my code:
<ajax:ComboBox ID="LenCompDpd" runat="server" Width="133px" CssClass="AquaStyle textfont"
OnSelectedIndexChanged="LenCompDpd_SelectedIndexChanged" AutoPostBack="true"
DropDownStyle="DropDown" AutoCompleteMode="SuggestAppend" CaseSensitive="false"
ItemInsertLocation="OrdinalText" />
This is because the css settings for the jQuery UI messes with the css settings for the Ajax ComboBox, here is a simple example where I had to set the styles for the ComboBox in the page to adjust for the css from jQuery to make it look normal:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Tabs.aspx.cs" Inherits="WebApplication1.Tabs" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script type="text/javascript">
$(function () { $("#tabs").tabs(); });
</script>
<style type="text/css">
.ajax__combobox_itemlist
{
left: 28px !important;
top: 103px !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
</ul>
<div id="tabs-1">
<ajaxToolkit:ComboBox ID="ComboBox1" runat="server"
AutoPostBack="False"
DropDownStyle="DropDownList">
<asp:ListItem Text="One"></asp:ListItem>
<asp:ListItem Text="Two" />
<asp:ListItem Text="Three" />
</ajaxToolkit:ComboBox>
</div>
<div id="tabs-2">
</div>
</div>
</form>
</body>
</html>
The trick is to use the css classes for the ComboBox, like .ajax__combobox_itemlist to adjust the style so it works with the jQuery stuff.

Resources