I have a web application, and the requirements need to show jquery lightbox as a confirmation message including some information.
After some research I found fancybox FancyBox Jquery Light box
I followed this step by step till I could show the required confirmation message in a fancy box, which is triggered by Open
I need to trigger or show the fancy box from code behind of an asp:button
I've searched a lot and all results that I got when applied did not work.
Can any one please show me a sample about triggering fancybox from code behind of asp button in c# and attach it here?
that is a sample of my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery /1.7/jquery.min.js"></script>
<link rel="stylesheet" href="/source/jquery.fancybox.css?v=2.1.0" type="text/css" media="screen" />
<script type="text/javascript" src="/source/jquery.fancybox.pack.js?v=2.1.0"></script>
<script type="text/javascript">
$(".fancybox").fancybox({
openEffect: 'none',
closeEffect: 'none',
afterLoad: function () {
this.content = this.content.html();
}
});
</script>
<body>
<form id="form1" runat="server">
Open
<div id="test" style="display:none;width:300px;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<input id="Hello" type="text" />
</td>
</tr>
<tr>
<td>
<input id="Button1" type="button" value="Press Here" />
</td>
</tr>
</table>
</div>
</form>
</body>
This code is work correctly and show the fancybox after click on open link
all my need is to show the fancybox after click on asp:button
Thanks in advance
To call javascript from Code Behind, you can do something like this in your button click event handler:
ClientScript.RegisterStartupScript(this.GetType(), "fancyBoxScript", "[JAVASCRIPT TO INVOKE FANCYBOX]", true);
This javascript will be sent to the page and executed after the post-back is finished.
Edit: You can find more information here about invoking FancyBox through javascript. It basically requires you to simulate a click on a hidden button: http://thingsilearned.com/2010/01/27/dynamically-calling-fancybox-from-javascript/
Make sure that you have a script tag for JQuery in your < head > like this:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Also in the head, reference the script file themselves, along with the stylesheet like this (assuming you've copied the files to therootofyourwebsite/fancybox/source):
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.0" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.0"></script>
Then, at the bottom of your < body > (but still inside body) make sure you wire up fancybox, something like this:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
If I understood correctly, you want to launch fancybox from a html button like :
<button id="newOpen" type="button">open fancybox from button</button>
....what it matters here is the rendered html button, via asp or any other programming language. Also notice that this button is not part of the form (opened in fancybox)
If the above is correct, since you already have the code to launch fancybox from the open link, then just add this piece of jQuery code :
$("#newOpen").bind("click", function(){
$(".fancybox").trigger("click");
});
Related
I have a jQuery UI tab control, created using asp.net repeater, and am trying to make sure on page load first tab is selected and also keep the selected tab on postbacks.
I have worked out the postback part but am having problem getting first tab's name. I have applied styling to tabs. This is what I have and what have tried:
<div id="divCategories">
<asp:Repeater runat="server" ID="rptCategories">
<HeaderTemplate>
<ul class="bronze nav nav-tabs" role="tablist">
</HeaderTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
<ItemTemplate>
<li>
<a href='#<%# Eval("Abbrev")%>' data-toggle="tab" aria-controls='<%# Eval("Abbrev")%>'>
<p class="tab title"><%# Eval("CourseCategory")%></p>
</a>
</li>
</ItemTemplate>
</asp:Repeater>
</div>
<asp:HiddenField ID="hfSelCat" runat="server" />
<script type="text/javascript">
$(function () {
debugger
//$("#divCategories").tabs();
var tabName = $("[id*=hfSelCat]").val() != "" ? $("[id*=hfSelCat]").val() : 'AnOps';//$("#divCategories").tabs('option', 'active');
$('#divCategories a[href="#' + tabName + '"]').tab('show');
$("#divCategories a").click(function () {debugger
$("[id*=hfSelCat]").val($(this).attr("href").replace("#", ""));
});
});
</script>
if I uncomment first line in the script that initializes the tabs; I lose tab styling; if I comment it out, I get an error on next line when I try to access .tabs('option','active') because tab is not initialized yet. So, I am using hard-coded tab name ('AnOps');
Because the tab names are generated dynamically, basically I am trying to get the name of the first tab, whatever it may be.
Update (based on Dee's suggestion)
I modified the script like below; it does set the selected tab to first one but none of the styling is applied.
<script type="text/javascript">
$(function () {
var $categories = $("#divCategories");
$categories.tabs({
active: 0
});
debugger
//$("#divCategories").tabs();
var tabName = $("[id*=hfSelCat]").val() != "" ? $("[id*=hfSelCat]").val() : 'AnOps';//$("#divCategories").tabs('option', 'active');
$('#divCategories a[href="#' + tabName + '"]').tab('show');
$("#divCategories a").click(function () {
$("[id*=hfSelCat]").val($(this).attr("href").replace("#", ""));
});
});
</script>
According to documentation of active option it can be specified with integer value which tab will be active at initialisation (zero will activate the first tab). If I am not wrong this is all you need to keep the first tab selected whenever the page loads. HTH
Example:
<script type="text/javascript">
$(function () {
var $categories = $("#divCategories");
$categories.tabs({
active: 0
});
});
</script>
To define your own look some classes of jquery-ui can be edited in Theme Roller. So you create your style-css file and link it the the page (probably master-page). Then just call tabs() function and the style will be applied. You shouldn't define style inside of the repeater yourself. Maybe this is your problem you mentioned in the comment?
First use Theme Roller and generate your style. For example I have changed the background and border of active item to black-red (pretty ugly :)).
Then save the generated files to local folder, I saved it to folder named js but the name is not important. Link the generated css files to your asp.net page. Here I have example with simple html file, but that is not important. As you can see the <ul> doesn't have any style.
Nobullman.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script src="js/external/jquery/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="js/jquery-ui.theme.css">
<link rel="stylesheet" type="text/css" href="js/jquery-ui.structure.css">
</head>
<body>
<!-- This content will be generated by the Repeater, but withou any styles -->
<div id="divCategories">
<ul>
<li>1.Tab</li>
<li>2.Tab</li>
<li>3.Tab</li>
</ul>
<div id="tabs-1">
<p>Text 123</p>
</div>
<div id="tabs-2">
<p>Text 456</p>
</div>
<div id="tabs-3">
<p>Text 789</p>
</div>
</div>
<script type="text/javascript">
$(function() {
// tabs will do the trick and create the tabs css styles inclusive
var $categories = $("#divCategories");
$categories.tabs({
active: 0
});
});
</script>
</body>
</html>
The relation of the Nobullman.html and the saved files from Theme Roller looks like this:
When this html file is loaded by browser it looks like this. The styles were applied by jquery-ui-tabs() them selves.
I have added fancybox v.2.1.5 in my webpage just like follows:
<script type="text/javascript" src="http://localhost/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="http://localhost/fancybox/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="http://localhost/fancybox/jquery.fancybox.css?v=2.1.5" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/fancybox/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="http://localhost/fancybox/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<link rel="stylesheet" type="text/css" href="http://localhost/fancybox/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="http://localhost/fancybox/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript" src="http://localhost/fancybox/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
This is my html code:
<form id="aspnetForm" runat="server">
<a href="#fancyBoxDiv" class="fancybox" />//When the anchor is clicked, shows fancyBoxDiv
<div id="fancyBoxDiv">//This div is shown in fancybox
<asp:Button ID="btn" runat="server" OnClick="btn_Click" />
</div>
</form>
This is my c# code-behind:
protected void btn_Click(object sender, EventArgs e)
{
//This function is never called
}
And I have one c# button on one fancybox div, but when I press this button, the callback function in codebehind is not called.
What I'm doiing wrong? What I have to change?
You may need to put your asp:Button element inside a form tag like below:
<form id="form1" runat="server">
<a href="#fancyBoxDiv" class="fancybox" />//When the anchor is clicked, shows fancyBoxDiv
<div id="fancyBoxDiv">//This div is shown in fancybox
<asp:Button ID="btn" runat="server" OnClick="btn_Click" />
</div>
</form>
If you think your html structure is proper then you can check if you're getting any exception on client side in firebug. Or second option will be to check if you're able to call a client side function by using OnClientClick. If so then call the client side function and use _doPostBack.
i am using bootstrap in my c# asp.net project and i want to show to show the modal popup from code behind.
in my page header i have a javascript function as follows:
function LoginFail() {
$('#windowTitleDialog').modal('show');
}
and on the click of my button i am calling the javascript as follows
ScriptManager.RegisterClientScriptBlock(this, typeof(System.Web.UI.Page), "LoginFail", "LoginFail();", true);
this does not show the modal popup. however, if i use something like alert('login failed'), it works fine.
can anybody please help with this?
By default Bootstrap javascript files are included just before the closing body tag
<script src="vendors/jquery-1.9.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/easypiechart/jquery.easy-pie-chart.js"></script>
<script src="assets/scripts.js"></script>
</body>
I took these javascript files into the head section right before the body tag and I wrote a small function to call the modal popup:
<script src="vendors/jquery-1.9.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/easypiechart/jquery.easy-pie-chart.js"></script>
<script src="assets/scripts.js"></script>
<script type="text/javascript">
function openModal() {
$('#myModal').modal('show');
}
</script>
</head>
<body>
then I could call the modal popup from code-behind with the following:
protected void lbEdit_Click(object sender, EventArgs e) {
ScriptManager.RegisterStartupScript(this,this.GetType(),"Pop", "openModal();", true);
}
This is how I solved:
The Script function
<script type="text/javascript">
function LoginFail() {
$('#windowTitleDialog').modal();
}
</script>
The Button declaration
<asp:Button ID="LaunchModal" runat="server" Text="Launch Modal" CssClass="btn" onclick="LaunchModal_Click"/>
Notice that the attribute data-togle="modal" is not set.
The Server-side code in the LaunchModal_Click event is:
ScriptManager.RegisterStartupScript(this, this.GetType(), "LaunchServerSide", "$(function() { LoginFail(); });", true);
I hope this help you.
I assume, you are using one of jQuery modal plugins. In that case, I suspect, plugin code isn't initialized at the time it is called (which would be immediately after it is rendered into page). You have to postpone call to the function after plugin code is executed. Implementation for your case might look like this:
ScriptManager.RegisterClientScriptBlock(this, typeof(System.Web.UI.Page), "LoginFail", "$(function() { LoginFail(); });", true);
I have the same problem, tried to find online solution but i was unable to do so. I am able to call other javascript funcionts as you said from the code behind but when i add the modal js function the modal does not show up.
My guess is that the modal.('show') function is not being call because when i insepct in crhome the modal element the class is modal hide fade and not modal hide fade IN and other attributes stay the same.
A possible solution is to change those attributes from the code behind, i mean you can do what the js does from the code behind, possible not the best solution but i did not what else to do. By doing this i got the modal to show up with the background grey but could not make the effect to work.
I do this in the aspx page:
<asp:Panel ID="MessagePanel" runat="server" CssClass="hide" EnableViewState="false">
<div class="modal-header">
<asp:Button type="button" ID="btnClose" runat="server" data-dismiss="modal" Text="x" />
</div>
<div class="modal-body">
<h4>What's new in this version</h4>
... rest of bootstrap modal stuff....
</div>
</asp:Panel>
Then in code-behind to show the modal popup on any event such as page.load or a button click I just change the CssClass of the Panel:
MessagePanel.CssClass = "modal fade in"
No need for js or ScriptManager.
I have made this example and it works fine on a plain aspx webpage. I use Visual Studio 2010.
Head-part:
<title>Show/hide element</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#CheckBoxShowHide').click(function () {
$("#ShowHideElement").slideToggle();
});
});
</script>
<style type="text/css">
#ShowHideElement
{
width:400px;
height:100px;
background-color:Aqua;
}
</style>
Body-part:
<form id="form1" runat="server">
<asp:CheckBox ID="CheckBoxShowHide" runat="server" Text="Show/hide" />
<div id="ShowHideElement">
This is the element for show/hide
</div>
</form>
When I have a masterpage and the same code on the child webpage JQuery dosent work. The loading of the JQuery javascript file fails. The child page and the masterpage are in the same folder. If I put the code on the masterpage it works fine but I want JQuery on the child page too. Please help me.
I can see another problem as well, you are trying to grab the checkbox ID based on its server ID not ClientID. Once a asp control has been rendered onto the client its ID gets changed. Try the following code:
<title>Show/hide element</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=CheckBoxShowHide.ClientID%>').click(function () {
$("#ShowHideElement").slideToggle();
});
});
</script>
<style type="text/css">
#ShowHideElement
{
width:400px;
height:100px;
background-color:Aqua;
}
</style>
Body-part:
<form id="form1" runat="server">
<asp:CheckBox ID="CheckBoxShowHide" runat="server" Text="Show/hide" />
<div id="ShowHideElement">
This is the element for show/hide
</div>
</form>
The following line is the only thing I changed:
$('#<%=CheckBoxShowHide.ClientID%>').click(function () {
Hope it helps.
Are you sure your page is loading jQuery, use a absolute URL in your master page to reference the jQuery library.
If jQuery is on your masterpage, it will work on your child page.
Master <head>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
Child <head>
<head>
<script type="text/javascript">
$(document).ready(function () {
//Do Child jQuery Stuff here....
});
</script>
<head>
If you are having issues the only other thing to check is to make sure that your path to the jquery file is right. (ie Maybe it should be ../js/jquery.js)
Use this to make sure that isn't the issue if the other thing I suggested doesn't work:
For your Master Page <head>:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
Or (if you want to host it)
<head>
<script type="text/javascript" src='<%=ResolveURL("~/js/jquery.js")%>'></script>
</head>
Where ~/ is your root.
You should be able to just place the link to the JQuery library in the HEAD section of the master page. When the page is ran it will generate the HTML content for the master page with the link in the HEAD section, the content page should be able to then make user of the JQuery library. I know we had an issue with how the link was being done. Maybe try linking in the HEAD of the master page like this instead:
<script type="text/javascript" src='<% = ResolveURL("~/js/jquery.js") %>' ></script>
The '<% %>' is a way to do inline server side code as the page loads, so the page will inject the correct src given the location of the URL.
I was wondering if it is possible to have a modalpopup show up on page load, saying that the page is loading. I have a page that gets a lot of data from an external source which means it takes a bit before any of the controls are actually filled.
I would like to have a popup or something similar that tells the user the page is loading.
I tried this:
<ajax:ModalPopupExtender ID="mpeLoader" runat="server" TargetControlID="btnLoader"
PopupControlID="pnlLoading" BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlLoading" runat="server" Width="100px" Style="display: none;">
<div class="detailspopup">
<table>
<tr>
<td><asp:Image ID="imgLoader" runat="server" ImageUrl="~/App_Themes/Main/img/loading.gif" /></td>
</tr>
<tr>
<td>Loading...</td>
</tr>
</table>
</div>
</asp:Panel>
with a dummy button btnLoader to allow me to access the show and hide from code behind. I've been toying with the .show method in the page lifecycle but I can't seem to find a way to have the poopup show when the page is loading (and disappear when loading is done). This would also be needed upon filtering the data, thus getting new data based on filter data.
Hard to say what the best solution is without more information, but one possible way to go is to make the first page just act as a "loader" containing the dialog and some javascript that will load the actual page with ajax.
Like I wrote before it depends very much on what you are trying to accomplish :-) !
But one way to do it with jQuery, if the page you are trying to load is very simple like a list without any state / postback controls is to create a "Loader"-page like the code belov and use the UrlToLoad query param for what page to load dynamically.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$("form").load("<%= this.Request["UrlToLoad"] %> form");
});
</script>
</head>
<body>
<form runat="server">
Loading...
</form>
</body>
Have you considered using jQuery? There are some excellent modal dialog plugins available. I've used Eric Martin's SimpleModal extensively in the past, and have been very happy with it. It has hooks for callbacks both before and after displaying the dialog, so you could perform any checks you need to using functions.
Using the jQuery route - you could have a div that surrounds all the content that is still loading, and have is dimmed out/disabled with a modal dialog showing your 'page loading' message. Then you could make use of the $document.ready() functionality in jQuery to determine when the page is done loading. At this point, you could remove the dialog and fade the page in.
What I did is make a PreLoader.aspx page that will "hold" untill the page we want is loaded:
<script type="text/javascript" language="javascript">
window.onload=function()
{
$get("ctl00_ContentPlaceHolder1_btnNav",document).click();
setTimeout('document.images["Loader"].src="App_Themes/Main/img/loading.gif"', 200);
}
</script>
the button actually makes the transfer
<asp:Label ID="lblLoading" runat="server" Text="Loading the requested page. Please wait ..." />
<asp:Button ID="btnNav" Style="display: none;" runat="server" OnClick="NavTo" />
protected void NavTo(object sender, EventArgs e)
{
Response.Redirect(Request.QueryString["url"].ToString());
}
I like this as it can be reused for every heavy data page ...