I am new to JQuery and trying to display a Yes/No confirmation dialog box when the user clicks on an aspx button. When the dialog box gets displayed to the user he can click the Yes or No button and depending upon the user action i want to execute different code present in code behind file i.e. in aspx.cs
I have tried with the following code but not succeded in my objective.
Code present in aspx page:
<link href="jquery-ui-1.8.10.custom.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function() {
jQuery("#myButton").click(showDialog);
//variable to reference window
$myWindow = jQuery('#myDiv');
//instantiate the dialog
$myWindow.dialog({
autoOpen: false,
width: 400,
modal: true,
resizable: false,
buttons: {
"Yes": function() {
},
"No": function() {
$(this).dialog("close");
}
}
});
}
);
//function to show dialog
var showDialog = function() {
//if the contents have been hidden with css, you need this
$myWindow.show();
//open the dialog
$myWindow.dialog("open");
}
//function to close dialog, probably called by a button in the dialog
var closeDialog = function() {
$myWindow.dialog("close");
}
</script>
<form id="testconfirmJQ" name="testconfirmJQ" runat="server">
<fieldset>
<legend>jQuery UI Modal Submit</legend>
<p><label for="email">E-mail:</label><br />
<input id="emailJQ" type="text" name="emailJQ" value="" /></p>
<p>
<asp:Button ID="myButton" runat="server" Text="Button" onclick="myButton_Click" />
</fieldset>
</form>
<div id="myDiv" title="Verify Form jQuery UI Style"><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span> You entered your e-mail address as:</p><p id="dialog-email"></p><p>
If this is correct, click Submit Form.</p><p>To edit, click Cancel.<p></div>
</form>
In code behind the event handler is empty for now. Any suggestions will be appreciated!
Take out the onclick attribute of asp:button. There should be no need for it -- you are not doing server side actions.
You could also change it to an <input> of type button.
Since jQuery is client side and you want to execute server side code in your .aspx.cs file, you could try saving a value indicating what the user responded to the prompt and they doing a postback so the server side can execute the appropriate code.
You might look into using the Button.OnClientClick Property which can execute client side code before the postback. Still use the jQuery dialog box.
Related
I have the below code which I am using to open a aspx page inside a modal popup but the issue is as soon as I load the host page of the modal popup it is redirecting to the one which is inside the iFrame.
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="Button1"
CancelControlID="Button2" BackgroundCssClass="Background">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" Style="display: none">
<iframe style="width: 350px; height: 300px;" id="irm1" src="PayrollScope.aspx?id=49437" runat="server"></iframe>
<br />
<asp:Button ID="Button2" runat="server" Text="Close" />
</asp:Panel>
So the sequence is
MainPage.aspx -> Click PopUp -> Load PayrollScope.aspx inside the modal
But as soon as I hit the MainPage.aspx it is redirecting to PayrollScope.aspx. I tried to use jQuery modal popup also but the same issue is happening. Can someone please tell me why it's redirecting.
Thanks
If you use jQuery dialog to load that other page?
Well, it will display, but THEN if any code in the page has a post back, then yes, it will re-direct to that page.(jQuery dialog simply pulls the whole other page right into that div and "merges" it into your current page's dom. So, you can display the page, and no re-direct will occur. However, any server side button event code (button press, or even say a after update event of editing a text box (on changed) will cause a post back. And any post-back WILL thus cause the page to re-direct (after all any code behind event does send the WHOLE page back and the URL to IIS. So, it much depends on if you JUST displaying that page, or if you want/need/have user interaction on the 2nd page loaded as a dialog.
So, dump the ajax popup and controls reverence to the id of the popup. (don't try jQuery an the ajaxtool kit to "both" try and pop up a control/div - they tend to not play nice with each other.
I do suggest using jQuery.
This would work (but with above post back issues in mind).
<body>
<form id="form1" runat="server">
<br />
<asp:Button ID="Button1" runat="server" Text="Show page as dialog" OnClientClick="showpage1();return false"/>
<div id="poppage" runat="server" style="display:none">
</div>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
function showpage1() {
var mydiv = $('#poppage');
mydiv.dialog({
autoOpen: false, modal: true, title: 'My cool other page', width: '50%',
position: { my: 'top', at: 'top+150' }
});
mydiv.load('MyOtherPage.aspx');
// Open the dialog
mydiv.dialog('open');
}
So, above will LOAD the other page (into that div), thus pop up the 2nd page when you click on the above button. (and note the return=false). If you have any postback on the page, then everything will quite much blow out the dialog. (and this also means the 2nd page we display (load) as per above.
However, if you need interaction on that 2nd page? (have to click on buttons etc.).
Then the idea of a iframe is a VERY good idea.
So, you have same as before, but we now don't "load" the page using jQuery.ui, but JUST display (and thus pop up) the div with a iframe you placed inside.
So,the div becomes this:
<div id="poppage" runat="server" style="display:none">
<iframe src="MyOtherPage.aspx" class="auto-style1"></iframe>
</div>
and the js code becomes this:
function showpage1() {
var mydiv = $('#poppage');
mydiv.dialog({
autoOpen: false, modal: true, title: 'My cool other page', width: '50%',
position: { my: 'top', at: 'top+150' }
});
// Open the dialog
mydiv.dialog('open');
}
So, now the above will just display that other page in the div, and since it is a iFrame, then you can interact - and post backs in that iframe should work just fine.
So, remove the ajax panel stuff - give jQuery.ui a try. I used the ajaxtool kit stuff, but for displaying another whole page in a dialog, then i found jQuery.ui seems to work a lot better
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 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");
});
Im well aware of the fact that the problem im having has been asked and discussed on SO before, but i've read them all countless times and none of them actually helped me solve my problem.
I am working with Visual studio, ASP.NET and C#.
Here's what i want to do exactly:
I have a JQuery dialog with a Label inside of it. I also have a button.
When that button is pressed,i want to jump inside the button's click event and set a text for the label inside the JQuery Dialog. Then i want the dialog to open, displaying the label with the text that has just been set in my button's click handler.
Here's the content that should be in my JQuery dialog (note that i've simplified my code for this question):
<div id="dialog" title="Basic dialog">
<asp:Label ID="Label1" runat="server" ></asp:Label>
</div>
On my page i I have an ASP.NET button, with an onClick event. In the code behind, inside the click event for my button i set the text for Label1.
This is my button:
<asp:LinkButton ID="testButton" runat="server" onClick="button_Click" text="click me"/>
and here's the code behind click handler:
protected void button_Click(object sender, EventArgs e)
{
Label1.Text = "Hello";
}
This actually works, but not as i want it to.
My problem:
For some reason the label's text only gets set the SECOND time i press the button. So that means, the first time i click the button, the dialog opens, displays nothing, then the dialog dissapears and the page posts back. The second time i press the button, i see that the text has been set for the label, but then again the dialog instantly dissapears and the page posts back.
i've tried adding the following to my button: OnClientClick="return false;"
When i do this the postback issue is gone, but now my button's click event doesn't fire.
I've also tried to add the following to my script: event.preventDefault(); This causes the same problem as with the return false;, the page doesn't postback but simply does not jump into the button's click event.
here's my dialog script:
<script>
$(function () {
$('#dialog').parent().appendTo($("form:first"))
$("#dialog").dialog(
{
autoOpen: false,
buttons: {
"Ok": function () {
$(this).dialog("close");
}
}
}
);
$("#testButton")
.button()
.click(function openConfirmDialog() {
$("#dialog").dialog("open")
});
});
</script>
Basically all i want to do is click a button to set a label's text, open a dialog, and keep that dialog open until a user closes it.
I might be missing something, but it amazes me to see how hard it is to do something as simple as i want to do.
kind regards,
Jane
When page is posted back by clicking on button control, dialog is refreshed and closed. You need to implement a way to show dialog box when page is posted back with data within in.
i: In first step create a variable at code behind. e.g
protected string PostBackOption ="";
ii: Add check to set dialog option text when page is post back in page load or page pre render event. e.g
if (Page.IsPostBack)
{
PostBackOption = "$(\"#dialog\").dialog(\"open\");";
}
iii: Now call this variable within javascript as shown below.
<script>
$(function () {
$('#dialog').parent().appendTo($("form:first"))
$("#dialog").dialog(
{
autoOpen: false,
buttons: {
"Ok": function () {
$(this).dialog("close");
}
}
}
);
$("#<%= testButton.ClientID %>")
.button()
.click(function openConfirmDialog() {
$("#dialog").dialog("open")
});
<%=PostBackOption %>
});
Now when you click on click me button, page will postback, after post back dialog will not dis appear and label will be populated with text "hello" properly.
I created a simple example decides whether or not to autoOpen based on your Label containing a value. The dialog goes away due to the page refreshing. You could use UpdatePanels if you wanted to eliminate the whole page posting back, or you could do something like this:
HTML and jQuery:
<!DOCTYPE html>
<html>
<head runat="server">
<meta charset="utf-8" />
<title>jQuery Dialog Demo</title>
<link rel="stylesheet" type="text/css" href="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/cupertino/jquery-ui.css" />
</head>
<body>
<form runat="server">
<div id="dialog" title="Basic dialog" style="display: none;">
<asp:Label ID="Label1" runat="server"></asp:Label>
</div>
<asp:LinkButton ID="testButton" runat="server" onClick="button_Click" text="click me"/>
</form>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
var $labelText = $("#Label1").html().trim(),
$dialog = $("#dialog").dialog({
autoOpen: $labelText.length,
buttons: { "Ok": function () { $(this).dialog("close"); } }
});
$("#testButton").button().click(function() {
if ($labelText.length) $dialog.dialog("open");
});
</script>
</body>
</html>
C# CodeBehind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class test6 : System.Web.UI.Page
{
protected void button_Click(object sender, EventArgs e)
{
Label1.Text = "Current time in ticks: " + DateTime.Now.Ticks.ToString();
}
}
Output:
Your label is already added to the form, no need for adding the dialog to the form. ASP.Net only accepts controls that are put into the <form runat="server"> tag.
Hai frnds , i want to show the message on button click....please help advance thanks
use javascript, set an click event and change the text of the button....
You mean like the javascript client-side handler?
onclick="alert('Hi there!')"
Try this code
<head>
<script type="text/javascript" language="javascript">
function message() {
alert("THIS IS A MESSAGE!!!");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<button onclick="message()">MESSAGE</button>
</div>
</form>
</body>
</html>
And you can try JQUERY DIALOG: http://jqueryui.com/demos/dialog/
You can use OnClientClick attribute to specify javascript that will runs before postback request
if you want change text on button:
<asp:Button Text="Click me!" runat="server" ID="TestButton" OnClick="TestButton_Click" OnClientClick="(this).value = 'new message'" />
if you want show message box :
<asp:Button Text="Click me!" runat="server" ID="TestButton" OnClick="TestButton_Click" OnClientClick="alert('message')" />
"display message in button click during postback" means i assume OP wants to show message based on condition at server side during click event of button in postback.
this can be achieved using method
Page.ClientScript.RegisterStartupScript(
Type type,
string key,
string script,
bool addScriptTags)
see complete code sample at http://msdn.microsoft.com/en-us/library/z9h4dk8y.aspx