jquery for print function not working in asp.net - javascript

I have written the following script to print a document:
<script type="text/javascript">
function print() {
window.print();
}
$(".printdoc").click(function () {
print();
});
</script>
and I am invoking the above script by an <asp:button../> as follows:
<asp:Button ID="btnPrint" runat="server" Text="Print" CssClass="printdoc"/>
Every time I click on the button it loads the page again but the query doesn't seem to work.
When I checked the resources , I found the following console error:
Uncaught ReferenceError: $ is not defined

print may collide with the built in print function. So let's call it printPage.
<script type="text/javascript">
function printPage() {
window.print();
}
</script>
In additional to Rahul's solution for referencing jQuery, by default asp:Button will postback to the server when clicked. So switch to a regular button.
<button type="button" onclick="printPage()" runat="server">Print</button>
You can leave the runat attribute off if you want, it's only necessary if you want to refer to it from the code behind.
If you really wanna use the asp:Button, you can do this:
<asp:Button ID="btnPrint" runat="server" Text="Print" OnClientClick="printPage(); return false;"/>
The return false; will prevent the postback. But I don't see much point in using asp:Button for client side things.

You need to put the reference of Jquery in your code:
<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/jquery-ui-personalized-1.5.2.packed.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/sprinkle.js"></script>
As mason has already answered the rest, you need to create a regular button instead of asp:button as asp:button will postback to the server everytime it will be clicked.

Related

window.history.back() not working in CSHTML page

I would like to navigate to previous page when I click back button. But when I click back button it redirects me to same page since my page has so many ajax calls.
Is there any javascript code available to navigate to previous page?
I have tried below code in my cshtml page.
<input id="btnback" type="button" value="Back" onclick="GoBack();" />
<script type="text/javascript" language="javascript">
function GoBack() {
window.history.back()
}
</script>
<script type="text/javascript" language="javascript">
function GoBack() {
window.history.go(-1)
}
</script>
You can do this in your html instead of writing function separately in scripts. See below :-
<input action="action" onclick="window.history.go(-1); return false;" type="button" value="Back" />
You can see my code in screenshot.
Go Back
I tried it and it is working. I hope this works for you as well :-)
Thanks.
Could you just add return false; to your existing javascript function and then check

Fileupload don't open on LinkButton click

i am trying use jquery function to open fileupload control,
code in head section of page
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
function chooseFile() {
document.getElementById("#<%=FileUpload1.ClientID%>").click();
alert('test');
}
</script>
code in aspx page
<asp:LinkButton OnClientClick='chooseFile();' ID="lnkBtnUploadImage" runat="server">Upload</asp:LinkButton>
i tried putting alert in function before document.getElementById it shows alert but not opening fileupload. if i put alert after document.getElementById it won't show alert or fileupload
what about this:
function chooseFile() {
$('#<%=FileUpload1.ClientID%>').trigger('click');
}

jQuery Datepicker() on a ASPX page

Completely confused as to why this isn't working... The error I receive is:
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'datepicker'
Master.master
<head id="head1" runat="server">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>
<script language="javascript">
$(function () {
$("#ctl00_cphMain_txtExpDate").datepicker();
});
</script>
</head>
Page.aspx
<asp:TextBox ID="txtExpDate" runat="server" Visible="true" ReadOnly="false"></asp:TextBox>
When the page loads, I immediately get the JavaScript error. But when I view source, everything looks fine:
View Source, from browser
<input name="ctl00$cphMain$txtExpDate" type="text" id="ctl00_cphMain_txtExpDate" />
It runs without error in JSFiddle and even shows the picker popup. What is causing the error? This is a C# ASP.NET web application.
JSFiddle - http://jsfiddle.net/ncojuu21/
You have to call the script with <script type="text/javascript"> instead of <script type="javascript">.
Replace $("#ctl00_cphMain_txtExpDate") by $("#<%=txtExpDate.ClientID%>")
This error was caused my MasterPage having duplicate jQuery references. Issue was resolved when one reference was removed and now the .datepicker() is working perfectly.

Calling a jquery function in a usercontrol from an aspx page

This is my first encounter with User Controls.
I have a user control that contains a jQuery function called Animate(). I want to call that function from an aspx page that contains the user control. Is that possible?
When I click the button in the following code the function is not fired and no error. What am I missing?
Upload_Animation.ascx
<head>
<script>
function AnimateGif() {
// do some stuff
}
</script>
</head>
<body>User Control</body>
aspx page
<head runat="server">
<uc:UploadAnimation ID="uc1" runat="server"/>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button OnClientClick="AnimateGif();" runat="server" Text="Do stuff" OnClick="btn_Click"/>
</div>
</form>
</body>
web.config
<controls>
<add tagPrefix="uc" src="~/UserControls/Upload_Animation.ascx" tagName="UploadAnimation" />
</controls>
First of all, I cannot see any JQuery code in your source example. As I can see (correct me if I'm wrong), you are trying to call client Javascript function that is declared as Animate() and you are calling as AnimateGif(); Try to correct the name of the calling function to match the declared name.

How do I pop up an alert in JavaScript?

How do I pop up an alert in JavaScript?
I tried alert"HELLO" but that didn't work.
Can someone tell me the correct syntax?
You need to add parentheses:
alert("HELLO");
Unlike VBScript, JavaScript requires parentheses around function calls.
Therefore, you need to write alert("Hello!");
It's also preferable (but not required) to end every statement with a semicolon ;.
Finally, if you aren't already, you need to put it in a script block, like this:
<script type="text/javascript">
alert("Hello!");
</script>
You can put JavaScript inside a script tag in an HTML page, or you can make a standalone .js file and double-click on it (in Windows) to run it using WSH.
<script type="text/javascript" >
alert("hello");
</script>
if you're having problems with alerts, it probably means your javascript is disabled in your browser, but if it isn't these methods should solve your issue.
<script type="text/javascript" >
window.alert("Hello World!");
alert("Hello World!");
</script>
Just add parantheses
alert("Hello");
<script type="text/javascript">alert("Hello");</script>
There are a few ways.
Use your web browser, type this code in address bar.
javascript:alert("Hello World!")
Open web developer in your web browser, go to console and type:
alert("Hello World!")
Type the code in .html or .js code as shown in other answers above.
Just add parentheses and enclosed it within the script tag.
<script type="text/javascript" >
alert("hello");
</script>
<html>
<head>
<script type="text/javascript">
function myFunction(){
alert("hello");
}
</script>
</head>
<body>
<input type="submit" onClick="myFunction()">
</body>
</html>
Here is the JavaScript function which has an alert box. This function is called by clicking on the submit button.

Categories