I am having some problem with OnClientClick.
I added a button into my webform like this.
<asp:Button ID="Button1" runat="server" onclick="Button1_Click"
style="top: 307px; left: 187px; position: absolute; height: 26px; width: 90px"
Text="Submit" OnClientClick="return validate()" />
And i am writing a javascript inside <head>immediately after the <title>.
<script language="javascript" type="text/javascript">
function validate() {
if (document.getElementById("<%=TextBox1%>").value == "") {
alert("textbox1 should not be empty");
}
else if(document.getElementById("<%=TextBox2 %>").value==""){
alert("textbox2 should not be empty");
}
}
</script>
TextBox1andTextBox2 are the Id's of two textboxes.
But when i click on Submit button, OnClick is firing but OnClientClick is not firing.
Whats the problem ?
Please help.
When taking the ID from the textboxes, you'll have to use <%=TextBox1.ClientID%> in your javascript.
And you should also return false from the validate-function when an error occurs.
Replace your javascript with:
function validate() {
if(document.getElementById('<%=TextBox1.ClientID%>').value == '') {
alert('Textbox1 should not be empty');
return false;
}
if(document.getElementById('<%=TextBox2.ClientID%>').value == '') {
alert('Textbox2 should not be empty');
return false;
}
}
Try this way:-
document.getElementById("<%=TextBox1.ClientID%>").value
document.getElementById("<%=TextBox2.ClientID%>").value
The first thing i see, is that you are using "<%=TextBox1%>" without the .ClientID,
which is what recognizes the texbox on the client side. naturally, without id, you javascript cannot find the object (and probably throws an exception as well)
(document.getElementById("<%=TextBox1%>").value == "")
will render as
(document.getElementById("System.Web.UI.WebControls.TextBox").value == "").
so try to use document.getElementById("<%=TextBox1.ClientID%>").value in the javascript function.
Related
Hello guys i have a problem with iframe. I want to play video in asp.net and i used iframe.
<iframe runat="server" id="videoPlayer" onended="handlerEnd" style="align-content: center; position:absolute; border:0; top:0; left:0; right:0; bottom:0; width:100%; height:100%" src="http://www.w3schools.com/html/mov_bbb.mp4" frameborder="0" allowfullscreen></iframe>
I want to use onended event from iframe to use in aspx.cs file.
How to get it ?
Put a hidden field to your page and set it's value to 0.
Set event handler to onended event, when it fires, set value 1 to hidden field and do postback.
On Page_Load event check if hidden field contains 1.
Aspx file
<asp:HiddenField runat="server" ID="videoEndedFlag" />
<iframe onended="raiseVideoEnded" />
function raiseVideoEnded()
{
var field = document.getElementById('<%=videoEndedFlag.ClientID%>');
field.value = '1';
// do postback
window.location.reload(true);
// or window.location.href = window.location.href;
// or __doPostBack('','');
}
Aspx.cs file
protected void Page_Load()
{
if(IsPostBack)
{
if(videoEndedFlag.Value == "1")
{
// video ended
}
}
}
#layer1 {
width: 575px;
height: 400px;
background-color: #E0E0EB;
position: absolute;
top: 36px;
left: 222px;
}
#layer2 {
width: 575px;
height: 400px;
background-color: #E0E0EB;
position: absolute;
top: 36px;
left: 222px;
visibility:hidden;
}
And i have some controls on both of the divs....
<asp:HyperLink ID="HyperLink1" runat="server" onclick="f1();" NavigateUrl="#">Add Personal Details</asp:HyperLink>
<asp:HyperLink ID="HyperLink1" runat="server" onclick="f2();" NavigateUrl="#">Add Personal Details</asp:HyperLink>
On Click Of HyperLink i have following Code...
function f1() {
document.getElementById("layer1").style.visibility = "visible";
document.getElementById("layer2").style.visibility = "hidden";
}
function f2() {
document.getElementById("layer1").style.visibility = "hidden";
document.getElementById("layer2").style.visibility = "visible";
}
And i have a button..
<asp:Button ID="Button5" runat="server" Text="Button" />
Everything works fine when i click on HyperLink but when i CLICK on BUTTON which i hv in div2 due to postback Page Reset occurs and div1 is showing.which is true as per PostBack.But I want div2 only to displayed aftr button click.Can anyone provide me code for that...Please Help...
If you're trying to prevent Button5 from causing postback then add onclientclick="return false;" to the control. Otherwise you can just handle the visibility of your divs in the click event handler. Something like this:
protected void Button5_Click(object sender, EventArgs e)
{
div1.Style["display"] = "block";
div2.Style["display"] = "none";
}
In order to access your divs in codebehind you may need to make them server controls by adding runat="server"
I think you know what happens when there is a postback, Page is reloaded. So, you have to handle the case that when it is postback retain the old value (IsPostback)
Its been a while since I used asp but here goes.
You can store varables in a Viewstate object and check the varable upon loading the program. For example
function f1() {
document.getElementById("layer1").style.visibility = "visible";
document.getElementById("layer2").style.visibility = "hidden";
ViewState("layer") = "1"
}
function f2() {
document.getElementById("layer1").style.visibility = "hidden";
document.getElementById("layer2").style.visibility = "visible";
ViewState("layer") = "2"
}
When you load the page you do something similar to this
String strLayer = ViewState("layer").ToString();
if(strLayer.equals("2"))
f2();
You may find more information here that could help
http://www.dotnetuncle.com/aspnet/75_viewstate.aspx
Hope this helps.
Java script code:
<script language="javascript" type="text/javascript">
function validateLoginForm() {
if (document.getElementById("<%=txtTitle.ClientID%>").value == "") {
alert("Please Enter Title");
txtTitle.focus();
return false;
}
}
Button Code
<asp:Button ID="btnPost" UseSubmitBehavior="false" Text="Post" OnClientClick="javascript:validateLoginForm();" runat="server" OnClick="btnPost_Click" />
This code is not working on internet explorer but works fine in firefox
even though the javascript returns false in onClientClick event
the onClick event is still getting called
Please Help...!!!
It can be solved using
<asp:Button ID="btnPost" UseSubmitBehavior="false" Text="Post" OnClientClick="return validateLoginForm();" runat="server" OnClick="btnPost_Click" />
Replace your Java script function with this
function validateLoginForm() {
if (document.getElementById("<%=txtTitle.ClientID%>").value == "") {
alert("Please Enter Title");
txtTitle.focus();
return false;
}
else
return true;
}
And you OnClientClick attribute with this
OnClientClick="javascript:return validateLoginForm();"
in my project i am checking links whether its working or not ,when i click on create link button i want to display please wait for while but when and when if their some text in text box1if textbox1.text == null then it should not be display and when its not null then when i will click create button it should show please wait,my code is working but i want to check if their is some value in text box and user click the create button it should show please wait a while .if their no value in textbox1 then if user click on create button then please wait should not be displayed
here is my code
<script type="text/javascript">
function ShowProgressBar() {
if (Textbox1.Text == " ") {
document.getElementById('dvProgressBar').style.visibility = "hidden";
}
else {
document.getElementById('dvProgressBar').style.visibility = "visible";
}
}
</script>
<asp:Button ID="Button1" runat="server" Text="Create link" OnClick="btn_createlink_Click" OnClientClick="javascript:ShowProgressBar()" />
<br />
<div ID="dvProgressBar" style="visibility: hidden;">
<div id="content" style="text-align: left; " >
Please wait for while...
</div>
</div>
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Height="373px"
Width="410px" ViewStateMode="Enabled"></asp:TextBox>
From what I understand, you are only asking how to verify if the checkbox is empty, right? This should do it:
<script type="text/javascript">
function ShowProgressBar() {
if (document.getElementById('<%=TextBox1.ClientID%>').value == "") {
document.getElementById('dvProgressBar').style.visibility = "hidden";
}
else {
document.getElementById('dvProgressBar').style.visibility = "visible";
}
}
</script>
Easiest way to do this is probably to use ajax. Simply call a web service and use javascript to show a loading message/icon/whatever for the user. Try to use google for this, it's really straightforward.
It has to be asynchronous, or else it would block your UI and the please wait wouldn't show.
I have a issue with Jquery Modal dialog being called from a button inside an update panel..
here are the insights..
Javascript used for opening a Jquery modal dialog in aspx page..
<script type='text/javascript'>
function openModalDiv(divname) {
$('#' + divname).dialog({
autoOpen: false,
bgiframe: true,
closeOnEscape: true,
modal: true,
resizable: false,
height: 'auto',
buttons: { Ok: function () { closeModalDiv(divname) } },
open: function (event, ui) { jQuery('.ui-dialog-titlebar-close').hide(); }
});
$('#' + divname).dialog('open');
('#' + divname).parent().appendTo($('form:FrmSearch'));
$('#' + divname).css('overflow', 'hidden')
}
function closeModalDiv(divname) {
$('#' + divname).dialog('close');
}
</script>
the button in aspx page..
<asp:UpdatePanel ID="upDialogs" runat="server">
<ContentTemplate>
<asp:Button ID="btnOpenDialog" runat="server" Text="Open Dialog" onclick="btnOpenDialog_Click" />
</ContentTemplate>
</asp:UpdatePanel>
The Div which needs to be called from code behind via javascript..
<div id="ErrorDiv2" title="Error" style="visibility:hidden">
<p><span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>Please select an option among the results and try again!</p>
</div>
Finally the code behind ..
protected void btnOpenDialog_Click(object sender, EventArgs e)
{
if (ProfileID == null)
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "ErrorDivOpen", "document.getElementById('ErrorDiv2').style.visibility = 'visible';", true);
Page.ClientScript.RegisterStartupScript(this.GetType(), "ErrorDivShow", "openModalDiv('ErrorDiv2');", true);
}
}
Now the Issue in detail..
Without the update panel the modal dialog pops very fine but makes full post back..
I want to have only a partial post back and hence am using a update panel..
The following are the solutions I have tried..
Added update panel to the existing div, dint work.
added an update panel along with runat="Server" for the div, still dint work..
Can any one help me with possible solutions?
Thanks for your quick reply but I found another solution.
I added both update panel and runat parameters to the Div.
<asp:UpdatePanel ID="upErrorDiv" runat="server"><ContentTemplate>
<div runat="server" id="ErrorDiv2" title="Error" style="visibility:hidden">
<p><span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>Please select an option among the results and try again!</p>
</div>
</ContentTemplate></asp:UpdatePanel>
Changed the code behind as.
if (ProfileID == null)
{
ScriptManager.RegisterStartupScript(ErrorDiv2,this.GetType(), "ErrorDivOpen", "document.getElementById('ErrorDiv2').style.visibility = 'visible';", true);
ScriptManager.RegisterStartupScript(ErrorDiv2,this.GetType(), "ErrorDivShow", "openModalDiv('ErrorDiv2');", true);
return;
}
Could you try injecting the javascript into a Literal control inside UpdatePanel, istead registering it with ClientScriptManager ?
Kris