Develop Reference

Javascript function not triggered by button click of asp.net

Trying to trigger javascript function on click of asp.net button , but it won't work. I tried usesubmitbehaviour=false and trying adding return to function also.
Here is my code snippet
<script type="text/javascript">
function checkout() {
alert("test")
var stripe = Stripe("*********")
var button = document.getElementById("Button1");
stripe.redirecttocheckout({
sessionId = document.getElementById('<%= test.ClientID %>').value
})
}
</script>
and function call from button click of asp.net
<asp:Button ID ="Button1" runat ="server"
class="btn btn-secondary bt-dark bt-darkregister"
style="width:210px"
Text="Continue to secure payment"
OnclientClick=" return checkout()" />

Why do you use OnclientClick and not OnClick?
You can try using it in thr following manner and tell me what happens?
<asp:Button id="Button1"
Text="Click here for greeting..."
OnClick="GreetingBtn_Click"
runat="server"/>

You have to provide more information.
Move your script block to inside of the form /form tags
And
OnClientClick="checkout();return false;"
And you js code looks wrong too.
Try this:
<script>
function checkout() {
alert("test");
}
</script>
So your js code is missing the ending ";" on each line of js

Uncaught ReferenceError: show value is not defined(Only for mobile device)

Hi I had implemented the code in which on adding to cart the item gets add and also one popup gets open which shows cart item.
On desktop it is working well but on mobile device it is not working.
For mobile device it is shoeing error as
Uncaught ReferenceError: showvalue is not defined
Here is my below code
<script type="text/javascript">
function showvalue(value, product) {
$('#<%= lblproduct1.ClientID %>').text(product);
$('#<%= lblVessel.ClientID %>').text(value);
$('.cart_popup').show();
setTimeout(function () {
$('.cart_popup').fadeOut('slow');
}, 5000);
return false;
}
function Showprogress() {
$('#<%= Progress.ClientID %>').show();
}
Html side on .ascx page
<asp:Button ID="AddToBasketButton" OnClientClick="Showprogress()" runat="server" OnClick="AddToBasketButton_Click" EnableViewState="false" ValidationGroup="AddToBasket" Text="Add to Cart" />
My .cs side code (Passing total and productquantity)
ScriptManager.RegisterClientScriptBlock(this.Page, typeof(UpdatePanel), UniqueID, "showvalue('" + Total + "','" + productquantity + "');", true);
I am facing issue for mobile device only.
On clicking button my page get refresh and popup is not getting open

I had remove jquery popup and made use of Ajax Modal popup.
The popup was opening fine as I was calling it from .cs side but to hide it automatically after 5 second it was not working in that case I had used below code.
<asp:Button ID="AddToBasketButton" OnClientClick="Showprogress();" runat="server" OnClick="_Click" Text="button" />//button click and onclient click
//Below div is only showing processing image :-)
<div id="Progress" runat="server" style="display: none;">
<img src="../images/spinner.gif" />
</div>
My script
<script type="text/javascript">
$(document).ready(function () { hide_pop(); });
function Showprogress() {
$('#<%= Progress.ClientID %>').show();
hide_pop();
return false;
}
function hide_pop() {
setTimeout(function () {
$('.popup_cart_main').fadeOut('slow');//Popup Panel class
$('.modalBackground').fadeOut('slow');//Background blacklayout Class
}, 5000);
return false;
}
Modalpopup
<asp:LinkButton ID="lnkDummy" runat="server" ></asp:LinkButton>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mpe" runat="server"
PopupControlID="pnlPopup" TargetControlID="lnkDummy" BackgroundCssClass="modalBackground" >
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="popup_cart_main" Style="display: none">
<div class="cart_popup" >
Solved
</div>
</asp:Panel>
This code is working in all browser and all mobile including iphone & Android
I also think(According to actual question) that in case if I had not removed jquery popup and only placed below code my popup had been started working in mobile too
$(document).ready(function () { showvalue (); });// based on actual question

Ensure that your script is rendered before calling RegisterClientScriptBlock. HTML parsing is linear.

Did you miss to copy the closing tag or you just didn't do it on code too?
It should be:
<script type="text/javascript">
function showvalue(value, product) {
$('#<%= lblproduct1.ClientID %>').text(product);
$('#<%= lblVessel.ClientID %>').text(value);
$('.cart_popup').show();
setTimeout(function () {
$('.cart_popup').fadeOut('slow');
}, 5000);
return false;
}
function Showprogress() {
$('#<%= Progress.ClientID %>').show();
}
</script>
Try another approach:
In javascript:
<script type="text/javascript"> var jName = '<%=cName()%>'</script>
In c#:
protected string cName() {
return "examplevarcontent";
}

Why is my Javascript function not being called when I have invoked it in OnClientClick

I have just today learned how to call backend functions from Javascript and my first Javascript function worked. However, when I tried the very same function and calls on a different front end webpage of the same project for the same button, which is delete, the Javascript function is no longer being called. This is so weird. Here is the Javascript function:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type = "text/javascript" >
function watchdelete() {
if (drpManufacturer.SelectedItem.Text != "") // If there is a selected Manufacturer
{
return confirm("Are you Sure You want to delete this Dimension Detail?");
}
else
{
alert("Please select a Manufacturer first before deleting");
return false;
}
}
</script>
<asp:ScriptManager ID="scripman1" runat="server" EnablePageMethods="True">
</asp:ScriptManager>
Here is the OnClientClick call for the delete button:
<asp:Button ID="btnDimensionDel" runat="server" Text="Delete" OnClientClick = " return watchdelete();" OnClick="btnDimensionDel_Click" />
Am I doing something wrong? All I did was add a few lines to a Javascript function that was previously working on another page. I have a feeling there is some syntax error in this Javascript function but you will have to excuse me as I am new to Javascript. Can one use a boolean type for return values in Javascript? Thank you very much in advance.

Use this code:
<script type = "text/javascript" >
function watchdelete() {
var manufacturer = document.getElementById('<%:drpManufacturer.ClientID%>');
var strManufacturer = manufacturer.options[manufacturer.selectedIndex].value;
if (strManufacturer) // If there is a selected Manufacturer
{
return confirm("Are you Sure You want to delete this Dimension Detail?");
}
else {
alert("Please select a Manufacturer first before deleting");
return false;
}
}
</script>

remove return statement:
<asp:Button ID="btnDimensionDel" runat="server" Text="Delete"
OnClientClick="watchdelete()" OnClick="btnDimensionDel_Click" />

BlockUI during partial postback through JavaScript

I have an ASP.NET page (WebForm1) that opens a modal dialog WebForm2 (via OpenForm2() js function) for some further processing. Upon closing the dialog I just update the UpdatePanel via JavaScript. Now the problem is, during this js call it doesn't block the UI.
This is only happening when I am calling the OpenForm2 js method from the server side (Button1_Click). As the UI already went into block mode, upon closing the WebForm2 it doesn't wait for the completion of partial postback (JavaScript) and unblocks the UI.
If I directly call the OpenForm2 js function in OnClientClick tag of the button (Button 2 in the sample), it works well and keeps blocking the UI till completion of postback.
I tried wrapping the partial postback js code in an add_endRequest, but in that case it keeps calling the refreshUpdatePanel() js method, hence blocking/unblocking the UI keeps going on. May this be happening due to two add_endRequest used on a page in that case?
Any assistance is highly appreciated in this regard.
NOTE: I have used jQuery blockUI for blocking the page during partial postbacks.
The code sample for the WebForm1 page is as follows. (The WebForm2 aspx page just have a button to close the dialog and a related js function).
WebForm1.aspx
<head runat="server">
<title></title>
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/jquery.blockUI.js" type="text/javascript"></script>
<script type="text/javascript">
function OpenForm2() {
var url = "WebForm2.aspx";
var width = 950;
var height = 455; // screen.availHeight - (120 + 65);
// open modal dialog
obj = window.showModalDialog(url, window, "dialogWidth:" + width + "px; dialogHeight:" + height + "px; center:yes");
// partial postback to reflect the changes made by form2
refreshUpdatePanel();
//Sys.WebForms.PageRequestManager.getInstance().add_endRequest(refreshUpdatePanel);
// ** here it doesn't wait for the completion and unblocks the UI **
}
function refreshUpdatePanel() {
//window.__doPostBack('UpdatePanel1', '1');
// a timeout/delay before a client side updatepanel postback. That compelled the UI to go in blocking again with a little screen flickering.
setTimeout('__doPostBack("<%= UpdatePanel1.ClientID %>", "1")', 0);
}
$(document).ready(function () {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
$.blockUI.defaults.css = {};
function InitializeRequest(sender, args) {
// Whatever you want to happen when the async callback starts
$.blockUI();
}
function EndRequest(sender, args) {
// Whatever you want to happen when async callback ends
$.unblockUI();
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load">
<ContentTemplate>
<asp:Label ID="Label2" runat="server" Text=""></asp:Label><br />
<asp:Button ID="Button1" runat="server" Text="Button 1" OnClick="Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="Button 2" OnClientClick="OpenForm2();return false;" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
WebForm1.aspx.cs
protected void Button1_Click(object sender, EventArgs e)
{
// some server side processing here
System.Threading.Thread.Sleep(1000);
// then calling javascript function to open form2 as modal
ScriptManager.RegisterClientScriptBlock(UpdatePanel1, UpdatePanel1.GetType(), "Button1Click", "OpenForm2();", true);
}
protected void UpdatePanel1_Load(object sender, EventArgs e)
{
string parameter = Request["__EVENTARGUMENT"];
if (parameter == "1")
{
System.Threading.Thread.Sleep(3000);
Label2.Text = DateTime.Now.ToString();
}
}

use
function refreshUpdatePanel() {
__doPostBack"<%= UpdatePanel1.ClientID %>", '1');
}
instead of
function refreshUpdatePanel() {
window.__doPostBack('UpdatePanel1', '1');
}
thank you

passing clientID to javascript and extracting a value, clarification

Forgive the noob question, but I'm trying to get my head wrapped around this. I have some controls that are inside of an in a listview that are used to submit some information. I'm running a test pattern here to do this, but I'm getting object undefined errors. All of the articles I've seen about this are kind of vague. In this example, I'm trying to pass the id of a textbox, then pull the value from that in javascript. Can you tell me what I'm doing wrong?
<form id="form1" runat="server">
<asp:ScriptManager runat="server" />
<script type="text/javascript">
function ClientIDS(id) {
var info = document.getElementById(id).value;
alert(info);
return false;
}
</script>
<asp:ListView runat="server" ID="lsvTest">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtTextBox" />
<asp:Button runat="server" ID="btnSubmit" Text='<%#Eval("Name") %>' OnClientClick="ClientIDS('<%=txtTextBox.ClientID %>')" />
</ItemTemplate>
</asp:ListView>
</form>
Thanks

if you are want to doing using jquery than try this
just replace in button onclientclick with this one
OnClientClick="ClientIDS(this);"
and than find your previous input text in to asp:listview
function ClientIDS(obj) {
var txt = $(obj).prevAll('input[id*="txtTextBox"]:first');
alert($(txt).val());
return false;
}

You can't have inline code in a property for a server control.
Generally I would do this in the codefile.
for (int j = 0; j < this.lsvTest.Items.Count; j++)
{
var btnSubmit = (Button)this.lsvTest.Items[j].FindControl("btnSubmit");
var txtTextBox = (TextBox)this.lsvTest.Items[j].FindControl("txtTextBox");
btnSubmit.Attributes["onclick"] = string.Format("ClientIDS('{0}')", txtTextBox.ClientID);
}

Java Script Code
<script type="text/javascript">
function ClientIDS(Btnid) {
var textBoxID = Btnid.id.replace('btnSubmit', 'txtTextBox');
var info = document.getElementById(textBoxID).value;
alert(info);
return false;
}
</script>
HTML Code
<asp:ListView runat="server" ID="lsvTest">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtTextBox" />
<asp:Button runat="server" ID="btnSubmit" Text='<%#Eval("Name") %>' OnClientClick="ClientIDS(this)" />
</ItemTemplate>
</asp:ListView>

first of all, you're using javascript to do what you're jQuery library should be doing.
For example:
var info = document.getElementById(id).value;
// is easier as
var info = $("#"+id).val();
Secondly, it's been awhile, but i dont think you can put your asp script text in the form like that

You can use ItemDataBound event for the repeater to make this. See the following code
protected void lsvTest_ItemDataBound(object sender, ListViewItemEventArgs e)
{
string txtbox = e.Item.FindControl("txtTextBox").ClientID;
Button btn = e.Item.FindControl("btnSubmit") as Button;
btn.OnClientClick = string.Format("ClientIDS('{0}')", txtbox);
}