Colorbox + ASP.NET WebForm Submit Button - asp.net

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 });

Related

ASP.NET Google Analytics won't find the script

So I put the Google Analytics script into a separate .js file (obviously without the tags should someone ask) and included it on the Master Page but Google keeps telling me "Tracking not installed". The script does show up when running the page inspector.
Here is a link to the code of my Master Page:
http://pastebin.com/mJ8WRWYP
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Dictionary.master.cs" Inherits="Dictionary" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="shortcut icon" href="~/Resources/favicon.ico"/>
<title>Dictionary</title>
<script src="Resources/GoogleAnalytics.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label runat="server" ID="WordCount"></asp:Label>
<br />
<asp:ContentPlaceHolder id="Content" runat="server">
</asp:ContentPlaceHolder>
</div>
<footer>
<asp:HyperLink ID="LoginHPL" NavigateUrl="~/LoginPage.aspx" runat="server">Login</asp:HyperLink>
<asp:HyperLink ID="AddWordsHPL" NavigateUrl="~/AddWords.aspx" Visible="false" runat="server">Add Words</asp:HyperLink>
<asp:HyperLink ID="ApproveHPL" NavigateUrl="~/ApprovePage.aspx" Visible="false" runat="server">Approve Words</asp:HyperLink>
<asp:Button ID="LogoutBtn" Visible="false" Style="position: absolute; right: 50px;" runat="server" Text="Logout" OnClick="LogoutBtn_Click" />
</footer>
</form>
</body>
</html>
I'd be very grateful for some help.

Implementing Ajax components with ASP.net Components

it contains ajax uploader and text box and label
what i need to do it
when upload complete what i wrote in text box go to label without refresh page
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server"
onuploadcomplete="AjaxFileUpload1_UploadComplete" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>
</html>
and here is my C# code
protected void AjaxFileUpload1_UploadComplete(object sender,AjaxControlToolkit.AjaxFileUploadEventArgs e)
{
string path = Server.MapPath("~/nn/") + e.FileName;
AjaxFileUpload1.SaveAs(path);
Label1.Text = TextBox1.Text;
}
the problem is that the ajax controller event cant feel .net components
any help ?
I believe that you need to wrap your code in an update panel control.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server"
onuploadcomplete="AjaxFileUpload1_UploadComplete" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>

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.

JQuery BlockUI - Growl Notification not firing. Just Refreshes page

I can't seem to get my JQuery Growl notification to fire.
I have included pretty much the entire masterpage of my site for reference.
What I've Tried.
This started out in a content page but didnt work so i moved it to the master page to try and eliminate the issue as not having anyting to do with the content pages themselves.
I have a reference made in my masterpage to a jquery.blockUI.js CDN which i beleive is valid.
I tried throwing a button directly in my masterpage's footer and using the default blockUI example for a growl notification.
I can't seem to get it going. Basically on button click it just seems to do a screen refresh and thats it. Any help would be stellar.
Below is my code:
<!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>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<!-- <link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'> -->
<link href='http://fonts.googleapis.com/css?family=Tangerine|Lobster+Two|Rochester|Dancing+Script|Damion'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../style/style.css" media="all" />
<script src="../script/modernizr.custom.51561.js" type="text/javascript"></script>
<script src="http://code.google.com/p/yes/source/browse/trunk/jquery/blockui/1.2.3/jquery.blockUI.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="container">
<div id="header">
<div id="logincontrol" style="text-align: right">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ Log In ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold">
<asp:LoginName ID="HeadLoginName" runat="server" />
</span>! [
<asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out"
LogoutPageUrl="~/" />
]
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
<div id="nav">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" Orientation="Horizontal"
DataSourceID="WebSitemap" ItemWrap="false" />
<asp:SiteMapDataSource ID="WebSitemap" runat="server" ShowStartingNode="false" SiteMapProvider="XmlSiteMapProvider" />
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
<div id="footer">
<button id="LoginButton1">GROWLL</button>
</div>
</div>
</form>
<script>
$(document).ready(function () {
$('#LoginButton1').click(function () {
$.growlUI('Growl Notification', 'Have a nice day!');
});
});
</script>
</body>
</html>
The reference you were adding for the js was actually retrieving html instead of js
I also had to add an onlcick to prevent the page to post
see here the fiddle http://jsfiddle.net/ySz8x/
and just in case here is the code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<!-- <link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'> -->
<link href='http://fonts.googleapis.com/css?family=Tangerine|Lobster+Two|Rochester|Dancing+Script|Damion'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../style/style.css" media="all" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://yes.googlecode.com/svn/trunk/jquery/blockui/1.2.3/jquery.blockUI.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="container">
<div id="header">
<div id="logincontrol" style="text-align: right">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ Log In ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold">
<asp:LoginName ID="HeadLoginName" runat="server" />
</span>! [
<asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out"
LogoutPageUrl="~/" />
]
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
<div id="nav">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" Orientation="Horizontal"
DataSourceID="WebSitemap" ItemWrap="false" />
<asp:SiteMapDataSource ID="WebSitemap" runat="server" ShowStartingNode="false" SiteMapProvider="XmlSiteMapProvider" />
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
<div id="footer">
<button id="LoginButton1" onclick="return false">GROWLL</button>
</div>
</div>
</form>
<script>
//$(document).ready(function () {
$('#LoginButton1').click(function () {
$.growlUI('Growl Notification', 'Have a nice day!');
});
//});
</script>
</body>
</html>
btw... this is not the jGrowl I've used in the past :)

Conditionally set the content inside the facebox modal

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>

Resources