We Keep Coding

Alertify in a asp.net c# page

sorry if my english is poor.
I've a question, i think that the problem is my poor knowledge of javascript but.. i know that you can help me about this.
i've a page with an imagebutton, i use this for delete data and i need a confirmation dialog box. Alertify is pretty, i use altertify alert in server side like this:
string myScript2 = "alertify.error('message.')";
ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(),
Guid.NewGuid().ToString(), myScript2, true);
return;
and work fine!
but i don't understand how to use alertify.confirm.
for example i've used
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../../js/alertify.min.js"></script>
<!-- include the core styles -->
<link rel="stylesheet" href="../../js/alertify.core.css" />
<!-- include a theme, can be included into the core instead of 2 separate files -->
<link rel="stylesheet" href="../../js/alertify.default.css" />
<script type="text/javascript">
$("#btElimina").on('click', function () {
alertify.confirm("This is a confirm dialog", function (e) {
if (e) {
alertify.success("You've clicked OK");
} else {
alertify.error("You've clicked Cancel");
}
});
return false;
});
</script>
but nothing to do...i can't use onclientclick because alertify is a non-blocking instead a modal windows...
can you help me to understand? not to write code for me, but, to understand and make me viable
thank you
Henry

Replace alertify.success("You've clicked OK"); with return true;
and alertify.error("You've clicked Cancel"); with return false;
Also change this:
$("#btElimina").on('click', function () {
to this:
$("#<%=btElimina.ClientID%>").on('click', return function () {

I used this and it is working:
My button is :
<asp:ImageButton ToolTip="Çıkış" ID="ImageButton1" ImageUrl="Image/Exit.png" runat="server" OnClick="btnLogout_Click" />
My script is:
<script type="text/javascript">
$("#ImageButton1").on('click', function () {
alertify.confirm("This is a confirm dialog", function (e) {
if (e) {
alertify.success("You've clicked OK");
__doPostBack("<%=ImageButton1.UniqueID%>", "");
} else {
alertify.error("You've clicked Cancel");
}
});
return false;
});
</script>
Here when i clicked "cancel" button returns false and doing nothing but when you clicked ok button i am doing postback for related button and you can write your own code in server side
protected void btnLogout_Click(object sender, EventArgs e)
{
Session.RemoveAll();
Response.Redirect("~/Login.aspx");
...
}

I can't comment on the last comment below as I don't have 50 reputation, so I'm posting an answer simply to elaborate on Ratna's answer.
As per Ratna's answer, you should use server tags to refer to ASP.Net controls (controls with runat="server") to ensure that you get the control regardless of what ASP.Net renames the control to.
So to reiterate Ratna's answer:
Instead of
$('#btElimina').on(..
use
$('#<%= btElimina.ClientID %>').on(..
to make sure that you get the correct clientside control id in your jQuery script.

Hiding element before document is ready?

I have a div that needs to be hidden by default. It then can be toggled by a button:
<script type="text/javascript">
function toggle() {
text = document.getElementById('add_view');
var isHidden = text.style.display == 'none';
text.style.display = isHidden ? 'block' : 'none';
}
$(document).ready
(
function () {
toggle();
$("#add_view, #btnToggle").click(function (e) {
e.stopPropagation();
});
$(document).click(function () {
toggle();
});
}
);
</script>
It is working fine. The only problem is, when I refresh the page, I momentarily see the div before it is hidden.
What could I do to prevent that?
Thanks

You probably need to hide your element by default, and then use the button to toggle visibility. Try this:
<div id="add_view" style="display:none">....</div>

Make the element hidden in your html to begin with.
<div id="add_view" style="display: none;"></div>

Initially, you have to hide it by setting style="display:none;" of the div. Once when u want to toggle it, you have to use it as
document.getElementById(Id).style.display="";
in javascript.

How can i determine PostBack value in window.onunload?

In our project we are deleting something after the user left the page. We are using window.unload event for doing this.
window.onunload = function() {
// delete something
}
We are generally using buttons, linkbuttons..etc in UpdatePanel so we hadn't needed to check Page.IsPostBack property.
Today we realized that we used some buttons out of UpdatePanel and this situation had produced some errors. After that we decided to change our method, defined a global variable (var _isPostBack = false), at the top of the our page and:
window.onunload = function() {
if (_isPostBack) {
_isPostBack = false;
return;
}
// delete something
}
Altought i set the g_isPostBack in Page_Load, g_isPostBack didn't change. I tried "RegisterClientScriptBlock", "RegisterOnSubmitStatement" and "RegisterStartupScript" methods. Register methods were called before the onunload event but _isPostBack was set after onunload event had triggered...
if (IsPostBack)
{
Control c = MyClass.GetPostBackControl(this);
bool inUpdatePanel = ControlParentForUpdatePanel(c);
if (!inUpdatePanel)
{
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), Guid.NewGuid().ToString(), "_isPostBack = true;", true);
}
}
Is there anyone to help me?

that's the trick...
if you add onsubmit attribute to your form tag:
<form id="form1" onsubmit="return yourPostBack()">
and than write your own function:
function yourPostBack()
{
_isPostBack = true;
return true;
}
and finally in the page load:
if (IsPostBack)
{
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), Guid.NewGuid().ToString(), "_isPostBack = false;", true);
}
with this method you can understand that it is postback or not, in window.onunload

I hope i am on the right track here,
As i understand,
the OnUnload() is ClientSide,
and therefore you don't have the server objects
what you can do... is save the value in a hidden field.
As i am used to PHP you can even embed the value in a Javascript variable
Dont know if this applys to ASP.NET:
<script language="javascript">
var MyServerVariable = "<?PHP echo MyServerVariable ?>"
if(MyServerVariable == "Blah...")
{
}
</script>
translates to
<script language="javascript">
var MyServerVariable = "VALUE"
if(MyServerVariable == "Blah...")
{
}
</script>
But same thing can be done with <asp:Label /> , i am sure...

How to detect a postback in frontend (aspx)

I need to detect a postback in the frontend so I can use it with JQuery to change a class on page load. How can I do this?

You can check the IsPostBack property. Eg:
<script type="text/javascript">
$(function()
{
var isPostBack = <%=Page.IsPostBack.ToString().ToLower()%>;
if (isPostBack)
{
alert("Postback");
}
});
</script>

Stolen from this post:
On the server side have this
if(IsPostBack)
{
// NOTE: the following uses an overload of RegisterClientScriptBlock()
// that will surround our string with the needed script tags
ClientScript.RegisterClientScriptBlock(GetType(), "IsPostBack", "var isPostBack = true;", true);
}
On client side this
if(isPostBack) {
// do your thing
}

I put this variable inside the header tag of my asp.net web forms page.
<script type="text/javascript">
var isPostBack = ("true"==="<%= Page.IsPostBack ? "true" : "false" %>");
</script>
The var contains a Boolean. The comparison can probably be shortened.

Simple:
if you're using jquery it has to go after(jquery goes nuts otherwise):
$(document).ready(function(){
});
var isPostBack = <%=Convert.ToString(Page.IsPostBack).ToLower()%>;
Then
function whatever(){
if (isPostBack){
//Whatever you want to do
}else{
//Whatever else you want to do
}
}
I'm actually using it with jquery to show a web service status box then force a postback to refresh a ListView, so when it posts back it doesn't invoke the web service or show the status box just the updated ListView data.

$("a[href^='javascript:__doPostBack']").click(function () {
// do something
});

Required textbox in javascript

I have this code
$(document).ready(function () {
$("#<%= chkSpecialIntegration.ClientID %>").click(function () {
if (this.checked) {
document.getElementById('<%=ddlTypeSpecialIntegration.ClientID %>').style.visibility = 'visible'; }
});
});
When this is checked then a textbox is no longer required. How can I do this?

If all you want to do is make ddlTypeSpecialIntegrationvisible when chkSpecialIntegration is checked, you can just do:
$(document).ready(function () {
$("#<%= chkSpecialIntegration.ClientID %>").toggle(function() {
$("#<%= ddlTypeSpecialIntegration.ClientID %>").show();
}, function() {
$("#<%= ddlTypeSpecialIntegration.ClientID %>").hide();
});
});

There are two ways that an html textbox can be forced to be required. You should implement both.
The first is to validate the data prior to form submission. You can accomplish this in javascript by hooking into the onsubmit event. An example is at http://www.w3schools.com/js/js_form_validation.asp
Inside that method you will need to test if your checkbox is selected or not. If it isn't, then see if they typed something in your textbox.
The second is to validate it server side after form submission. For this you could simply provide some validation code in your button's server side onclick method.
I say to implement both because you will want to provide immediate feedback when something is required client side and you want to enforce it server side in case javascript is turned off.
Of course, if JS is turned off then they will probably never see the textbox to begin with.

Why do you need JS for that?
Isn't something like this enough?
<input<% if some_condition %> required="required"<% endif %> name="field" />

Give id for textbox like
<%: Html.TextBoxFor(model => model.FirstName, new { #tabindex = "1", maxlength = "50" ,id="Name"})%>
$(document).ready(function () {
$("#<%= chkSpecialIntegration.ClientID %>").click(function () {
if (this.checked) {
document.getElementById('<%=ddlTypeSpecialIntegration.ClientID %>').style.visibility = 'visible';
$("#Name").hide;
}
});
});