ASP:UpdatePanel - Add JavaScript on Button Click - c#

I have a asp:UpdatePanel with a asp:Button and a asp:TextBox:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button runat="server" Text="Click" ID="button" onclick="button_Click"/>
<asp:TextBox runat="server" Title="Text" ID="text" Style="margin-top: 50px;" />
</ContentTemplate>
</asp:UpdatePanel>
And the button_Click method is:
protected void button_Click(object sender, EventArgs e) {
text.Attributes.Add("title", "Box");
ClientScript.RegisterClientScriptBlock(typeof(ScriptManager), "Tooltify", "tooltipfy();", true);
}
tooltify() is a javascript function.
var tooltipfy = function () {
alert('');
$('[title]').qtip({
style: {
tip: {
corner: true,
width: 10,
height: 5
},
classes: 'ui-tooltip-rounded ui-tooltip-shadow ui-tooltip-tipsy'
},
position: {
my: 'bottom left',
at: 'top right',
adjust: {
x: -10,
y: 0
}
},
events: {
show: function (event, api) {
$('.ui-tooltip-content').addClass('ui-tooltip-center');
}
},
show: {
effect: function (offset) {
$(this).show("slide", { direction: "up" }, 500);
}
},
hide: {
effect: function (offset) {
$(this).hide("explode", 500);
}
}
});
}
The problem is the function is not executing.
How can I call JavaScript function while using asp:UpdatePanel?

You should use ScriptManger when using UpdatePanel.
protected void button_Click(object sender, EventArgs e) {
ScriptManager.RegisterClientScriptBlock(this, this.GetType(),"Tooltify", "tooltipfy();", true);
}

I'm not in the possibility to test it now, but according to this blog you should get it to work with ScriptManager.RegisterStartupScript.

using ClientScript.RegisterClientScriptBlock is not good practice.
If your Javascript function (tooltipfy) should update some controls, you should place these controls under your asp:UpdatePanel and update them in your code behind like this:
someDiv.Style.Add("display", "inline");
someDiv.InnerHtml = Text;
otherControl.Style.Add("display", "block");

Related

How to trigger blockui from c#?

I'm looking for a way to trigger BlockUI from the code behind. I have server-side validations and I would not want the BlockUI to fire unless the server validations are complete.
Here's my button :
<asp:Button ID="BtnSave" runat="server" OnClick="BtnSaveUpdate_Click" Text="Save" CausesValidation="true"></asp:Button>
Code behind:
This is what I tried doing but this doesn't work:
protected void BtnSaveUpdate_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
ClientScript.RegisterStartupScript(typeof(Page), "blockui", " $.blockUI({ message: 'Saving Record...' });", true);
// remaining code...
}
}
This is my original javascript code which fires before server validation:
$(document).ready(function () {
$('#BtnSave').click(function () {
$.blockUI({
message: 'Saving Record...'
});
});
});

doPostBack + beforeclose on dialago

I need to refresh the parent page once close the dialog, on other pages it is worked fine but in my page an error occurred !!!
This is the function on button click "btnAddCvg"
function showDialog() {
$("#dialog").dialog("open");
$("#modalIframeId").attr("src", "AddCoverage.aspx");
return false;
}
$(document).ready(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
height: 600,
width: 950,
buttons: {
'Close': function () {
$('#dialog').dialog('close');
}
},
beforeClose: function (event, ui) {
// __doPostBack("panel1");
}
});
});
i have on the same page an update panel :
<asp:UpdatePanel ID="panel1" runat="server" OnLoad="UpdatePanel1_Load">
</asp:UpdatePanel>
and in the code behind:
protected void UpdatePanel1_Load(object sender, EventArgs e)
{
grid_list_quotes.DataBind();
}
what should i do ???

Asp:Button - if OnClientClick = True | False

<asp:Button ID="Invoice" runat="server" Text="Create Invoice" OnClientClick="CreateInvoice_Click()" OnClick="CreateInvoice_Click1"/>
<script type="text/javascript" language="javascript">
function Create_Invoice() {
$("#dialog-confirm").dialog({
resizable: false,
height: 180,
modal: true,
buttons: {
Create: function () {
$(this).dialog("close");
},
Cancel: function () {
//code needed here
$(this).dialog("close");
}
}
});
}
</script>
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Are you sure?</p>
So user presses the 'Create Invoice' button, pop up appears allowing the user to select 'Create' or 'Cancel'.
The 'CreateInvoice_Click' function is run on code behind if the user clicks 'create' or 'cancel'. What I want to know (which needs to go inside the 'cancel' function') how do I say ignore the OnClick="CreateInvoice_Click1" if cancelled is clicked.?
Thanks for any replies
if you want to prevent the server side function from execution you simply need to return false in your client side function.
function Create_Invoice() {
$("#dialog-confirm").dialog({
resizable: false,
height: 180,
modal: true,
buttons: {
Create: function () {
$(this).dialog("close");
},
Cancel: function () {
//code needed here
$(this).dialog("close");
return false;// that's all what you need
}
}
});
}
Seems like you are tryign to recreate something javascript does with a built in function.
function confirmation() {
var answer = confirm("Leave tizag.com?")
if (answer){
alert("Bye bye!")
window.location = "http://www.google.com/";
}
else{
alert("Thanks for sticking around!")
}
}
Taken from http://www.tizag.com/javascriptT/javascriptconfirm.php
you should try manually calling the serverside click event by using javascript;
checkout the code inside Create and Cancel button;
<script type="text/javascript">
$('#test').on('click', function(e){
e.preventDefault();
$("#dialog-confirm").dialog({
resizable: false,
height: 180,
modal: true,
buttons: {
Create: function () {
$(this).dialog("close");
// manually calling serverside click event
$('#buttonHidden').click();
},
Cancel: function () {
//code needed here
$(this).dialog("close");
// don't call it manually here and thus it won't fire the serverside click event
}
}
});
});
</script>
// your button here to call javascript
<button id="test" runat="server">Create Invoice</button>
// the hidden button just to hold the CreateInvoice_Click1 which is fired from fireClick()
<asp:Button ID="buttonHidden" runat="server" Style="display: none" OnClick="CreateInvoice_Click1" />
your code behind;
protected void CreateInvoice_Click1(Object sender, EventArgs e)
{
//your server side code
}
<asp:Button ID="Invoice" runat="server" Text="Create Invoice" OnClientClick="return Create_Invoice()" OnClick="CreateInvoice_Click1"/>
<script type="text/javascript" language="javascript">
function Create_Invoice() {
$("#dialog-confirm").dialog({
resizable: false,
height: 180,
modal: true,
buttons: {
Create: function () {
$(this).dialog("close");
return true;
},
Cancel: function () {
//code needed here
$(this).dialog("close");
return false;
}
}
});
}
<p id="dialog-confirm"><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Are you sure?</p>
your code behind;
protected void CreateInvoice_Click1(Object sender, EventArgs e)
{
//your server side code
}

how can i redirect to another page in function that called by btnclick. ASP.NET

I wanna redirect to another page when i call a function
here my button
<button id="test" runat="server" onclick="Button1_Click()"> Button here </button>
here my button action
protected void Button1_click(Object sender, EventArgs e)
{
int ID = 0;
Label5.Visible = false;
ID = Convert.ToInt32(GridView1.Rows[row.RowIndex].Cells[1].Text);
// somthing like
// Server.Transfer("~/Producter/Delete?id="+ id)
// OR
Response.Redirect("~/Producter/Delete?id="+ ID);
}
since you are using regular html button, when clicked, it will execute Button1_Click() on the client side, instead of in code behind.
Change the button to :
<asp:Button ID="test" runat="server" OnClick="Button1_Click" Text="Button here" />
It could be a problem with the binding of the function Button1_Click() to the button. Try checking the Button1's OnClick property to make sure it links to the function Button1_Click().
your Button1_Click function is correct, and I think the way you are calling from object is wrong.
you should either use
<asp:Button ID="btn_test" runat="server" OnClick="Button1_Click" Text="Button" />
protected void Button1_click(Object sender, EventArgs e)
{
int ID = 0;
Label5.Visible = false;
ID = Convert.ToInt32(GridView1.Rows[row.RowIndex].Cells[1].Text);
Response.Redirect("~/Producter/Delete?id="+ ID);
}
or you should use html button object and call a webmethod like below
<script>
$(document).ready(function () {
$('#test').click(function(){
$.ajax({
type: "POST",
url: "Profile.aspx/update_phone",
data: "{'ProfessionalID':''}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () { }
});
});
});
</script>
<button id="test" runat="server"> Button here </button>
[webmethod]
public static void Button1_click(Object sender, EventArgs e)
{
....
Response.Redirect("~/Producter/Delete?id="+ ID);
}
Try this
Response.Redirect("~/Producter/Delete?id="+ ID,false);
try this;
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$('#test').on('click', function(e){
e.preventDefault();
//using jquery, you must import jquery library for it
$('#buttonHidden').click();
}
</script>
// your button here to call javascript
<button id="test" runat="server"> Button here </button>
// the hidden button just to hold the Button1_Click which is fired from fireClick()
<asp:Button ID="buttonHidden" runat="server" Style="display: none" OnClick="Button1_Click" />
also fix your code behind like this;
protected void Button1_Click(Object sender, EventArgs e)
{
int ID = 0;
Label5.Visible = false;
ID = Convert.ToInt32(GridView1.Rows[row.RowIndex].Cells[1].Text);
// somthing like
// Server.Transfer("~/Producter/Delete?id="+ id)
// OR
Response.Redirect("~/Producter/Delete?id="+ ID);
}

Perform action when user clicks yes on jquery dialog from c# codebehind

Right now i am using a message box in asp.net however i want to use jquery for the same
var DialogResult = MessageBox.Show("Do you want to create the File ?", "Start Invoicing", MessageBoxButtons.YesNo, MessageBoxIcon.Question);
if (DialogResult == DialogResult.Yes)
{
//perform some action
}
else
{
//this
}
Can this be achieved through jquery? can the text of the jquery box be changed according to what i want to execute
Please help
<script type="text/javascript">
$(document).ready(function () {
$('#cmdShowDialog').click(function (event) {
event.preventDefault();
var $dialog = $('<div>Dynamic Dialog with Buttons.</div>')
.dialog
({
title: 'Cancel',
width: 300,
height: 200,
buttons:
[{
text: "Yes",
click: function () {
$dialog.dialog('close');
}
},
{
text: "Cancel",
click: function () {
$dialog.dialog('close');
}
}]
});
});
});
</script>
<asp:Button ID="cmdShowDialog" runat="server" Text="Show Dialog" />
Have tried using this but how should i proceed...
you can do something like this...
javascript:
<script type="text/javascript">
function dialogYesNoCancel(btn1func, btn2func) {
$("#dialogMessage").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
Cancel: function () {
$(this).dialog("close");
},
No: function () {
$(this).dialog(btn2func());
$(this).dialog("close");
},
Yes: function () {
$(this).dialog(btn1func());
$(this).dialog("close");
}
}
});
};
function func1() {
$("#Button1").click();
}
function func2() {
$("#Button2").click();
}
</script>
ASPX:
<asp:Button ID="Button1" clientidmode="Static" runat="server" Text="Button" onclick="Button1_Click" />
<asp:Button ID="Button2" clientidmode="Static" runat="server" Text="Button" onclick="Button2_Click" />
CS:
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, this.Page.GetType(), Guid.NewGuid().ToString(), "dialogYesNoCancel(func1, func2)", true);
}
protected void Button1_Click(object sender, EventArgs e)
{
//do something
}
protected void Button2_Click(object sender, EventArgs e)
{
//do something
}

Categories

Resources