Javascript function not triggered by button click of asp.net - javascript

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

Related

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 asp hidden field are not getting set from client side ?

I am using javascript to set asp:hiddenfield to '1' but not getting set.
I am setting it like this:
<script type="text/javascript">
function uploadComplete(sender, args) {
var myHidden = document.getElementById('<%= HdnFieldEmployeePicture.ClientID %>');
myHidden.value = '1';
}
</script>
from:
<asp:AsyncFileUpload ID="FileUpload1" OnClientUploadComplete="uploadComplete" ClientIDMode="AutoID" UploaderStyle="Modern" runat="server"/>
<asp:HiddenField ClientIDMode="Static" ID="HdnFieldHasFileUploaded" runat="server" />
I am checking it on server side:
if (HdnFieldHasFileUploaded.Value == "1")
{
but not set to 1.
AsyncControl and hidden field are inside UpdatePanel.
Your javascript code will not work because javascript method bindings get broken when your page is partially submitted using asp.net update panel. You need to add following lines of code to get it back to work.
<script type="text/javascript">
function EndRequestHandler(sender, args) {
// bind your methods here
}
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
</script>

Issue on Stop/Prevent Tab Changing on Javascript

I am using JavaScript on an ASp.net web application and I have a button which is supposed to display an image on the page on click which is working but It also change the Tab element from tab 2 to tab 0 index!
Here is the JavaScript and Asp.net code which I have:
<script type="text/javascript">
var baseUrl = document.URL.split("WebForms/")[0];
function openImageDoc(filePath, titleName) {
var newUrl = baseUrl + filePath;
window.open(newUrl, titleName, 'width=900,height=800,scrollbars=1');
}
</script>
<asp:Button ID="RiskMapDisplay" runat="server" style="margin-left: 734px"
OnClientClick="openImageDoc('Images/riskmap.jpg', 'RiskMap')"
Text="Risk Matrix" CausesValidation="False" TabIndex="3" />
Can you please let me know how I can stop tabbing with this or what it may cause this?
Thanks
use following code:
<script type="text/javascript">
var baseUrl = document.URL.split("WebForms/")[0];
function openImageDoc(filePath, titleName) {
var newUrl = baseUrl + filePath;
window.open(newUrl, titleName, 'width=900,height=800,scrollbars=1');
return false;
}
<asp:Button ID="RiskMapDisplay" runat="server" style="margin-left: 734px"
OnClientClick="return openImageDoc('Images/riskmap.jpg', 'RiskMap')"
Text="Risk Matrix" CausesValidation="False" TabIndex="3" />
Adding return false; to the function stops the button from performing its normal function, which in this case would be a postback to the server.
Mark as answered if it works.

sending 'this' as parameter from web controls to javascript functions

i have a function like this:
<script type="text/javascript" >
function postBack(e) {
var lnk=document.getElementById('<%=e.getAttribute("ClientID") %>');
lnk.click();
};
</script>
and have a link button like this:
<asp:LinkButton onfocus="postBack(this);" id="lnk_home" runat="server"
AccessKey="h" onclick="lnk_home_Click">Home</asp:LinkButton>
I want to redirect page when i press Alt+h
But it does not work. I get the following error when i press Alt+h:
[Compiler Error Message: CS0103: The name 'e' does not exist in the current context]
Any suggestions about how to fix this problem? Thanks
UPDATE**
Server side code:
protected void lnk_home_Click(object sender, EventArgs e)
{
home home_view = LoadControl("home.ascx") as home;
Panel pnl_view = (Panel)ContentPlaceHolder1.FindControl("pnl_view");
//pnl_view.Controls.Clear();
pnl_view.Controls.Add(home_view);
}
You don't need a separate JavaScript function, just use this.click():
<asp:LinkButton onfocus="this.click()" id="lnk_home" runat="server" AccessKey="h" onclick="lnk_home_Click">Home</asp:LinkButton>
Or if you do want to use a separate function (perhaps to perform some common routine on multiple LinkButtons) invoke click method on passed object itself:
<asp:LinkButton onfocus="postBack(this);" id="lnk_home" runat="server" AccessKey="h" onclick="lnk_home_Click">Home</asp:LinkButton>
<script type="text/javascript" >
function postBack(oLink) {
// some common code
oLink.click();
};
</script>
UPDATE When you actually click the link with the mouse - event may fire twice, so you need to limit it to one click:
<asp:LinkButton onfocus="this.AllowClick=true;this.click();" OnClientClick="if (this.AllowClick) {this.AllowClick=false} else {return false}" id="lnk_home" runat="server" AccessKey="h" onclick="lnk_home_Click">Home</asp:LinkButton>

Calling server side event in asp.net from java script

Surely will be marked as duplicate one but after tons of question and example i couldn't solve my problem.
What i want?
Calling server side event handler in asp.net from client side java script it is not going on server side. I checked it by setting breakpoint, the page flicks but server side method is not called.
My click event on code behind is
protected void btninsert_Click(object sender, EventArgs e)
{
// my code
}
aspx file
<asp:Button ID="btninsert" runat="server" ValidationGroup="form" CssClass="btn"
OnClientClick="DoPost()" Text="Save" />
Javascript method is
function DoPost() {
function DoPost() {
var chk = document.getElementById('<%= chkstatus.ClientID %>');
if (chk.checked)
__doPostBack('<%= btninsert.ClientID %>', 'OnClick');
return true;
//return false;
}
}
I also tried this
__doPostBack('btninsert', 'OnClick'); and __doPostBack('btninsert', ''); and $('btnSubmit').trigger('click'); with no success.
What am i doing wrong?
Edit: If i uses OnClick event then it is going in the server side event irrespective of the if condition in the DoPost method.
Ahh it was simple. Thanks to all answers.
Solution:
Use OnClick attribute for server side event and OnClientclick for client event for validation.
OnClientClick javascript method will return true and false which decides whether serverside onclick event will fire or not.
Code will be somthing like this
<script type="text/javascript">
function DoPost() {
var chk = document.getElementById('<%= chkstatus.ClientID %>');
if (chk.checked) {
var c = confirm("are you sure?");
if (c == true) {
return true;
} else
{ return false; }
}
return true;
}
</script>
And the Button tag
<asp:Button ID="btninsert" runat="server" ValidationGroup="form" CssClass="btn"
OnClientClick="return DoPost();" OnClick="btninsert_Click" Text="Save" />
it can work!!
if you call __doPostBack('btninsert', ''), add below to Page_Load
protected void Page_Load(object sender, EventArgs e)
{
if ( Request["__EVENTTARGET"] == "btninsert" ) {
btninsert_Click(sender, e);
}
}
<asp:Button ID="btninsert" runat="server" ValidationGroup="form" CssClass="btn" OnClick="btninsert_Click" OnClientClick="DoPost()" Text="Save" />
Add OnClick="btninsert_Click", because without this information, asp.net has no way know which event handler to run for the "Click" event. In case you want to control whether to post back by client side script. You can do something like this:
<asp:Button ID="btninsert" runat="server" ValidationGroup="form" CssClass="btn" OnClick="btninsert_Click" OnClientClick="return DoPost()" Text="Save" />
function DoPost() {
__doPostBack('<%= btninsert.ClientID %>', 'OnClick');
return true;
//return false;
}
Note the OnClientClick="return DoPost()"
<asp:Button ID="btninsert" runat="server" ValidationGroup="form" CssClass="btn"
OnClientClick="return DoPost();" Text="Save" />
modify your line like this
You can try Ajax, by using Webmethod. I used this in my project and it works fine! You may see the question, solutions and code here: http://www.codeproject.com/Questions/416748/How-to-Call-WebMethod-of-Csharp-from-JQuery
Use ASP link button instead of ASP BUTTON. Button control is not called from javascript because it type is submit while link button type is button.
For example i have added two asp control
<asp:LinkButton ID="lbtest" runat="server" Text="Link Button"></asp:LinkButton>
<asp:Button runat="server" ID="btnbutton" Text="Button" />
and execute the page
When we view the source of running page its look like this
<a id="lbtest" href="javascript:__doPostBack('lbtest','')">Link Button</a>
<input type="submit" name="btnbutton" value="Button" id="btnbutton" />

Categories

Resources