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.
Related
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.
I am getting this error when i run my webpage in IE(the code runs fine in other browsers).
This is the HTML code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<--- some html code --->
<iframe src='http://localhost/page1.php' style="background: transparent; overflow: hidden; height: 210px; width: 390px;" frameborder="0" />
</body>
</html>
This is page1.php
<!DOCTYPE html>
<html>
<body>
<form action="usercheck.php" method="POST">
USERNAME:<input name="uname" id="uname" type="text" maxlength="12" required/>
<input type="submit" value="Submit">
</form>
</body>
</html>
This is usercheck.php
<?php
//some php code
?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<--- some html code --->
</body>
</html>
The problem is that when reach usercheck.php after clicking on submit button in page1.php i get the error http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js. Access is denied. Here is an image of the error: http://i.stack.imgur.com/diCoF.jpg . Then consequently i get the error that '$' symbol is not defined(which is due to the failure to load the jquery library).
EDIT-
I have tried including the jquery file in my server but still the error is comming. I have also tried this code for usercheck.php:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
/*! jQuery v1.10.1 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
//# sourceMappingURL=jquery.min.map
//and the rest of the jquery library...
</script>
</head>
<body>
<--- some html code --->
</body>
</html>
The error i am getting this time is this:http://i.stack.imgur.com/hR9aN.jpg (The original name of usercheck2.php is rscheck.php in my server). Then consequently i get the error that '$' symbol is not defined(which is due to the failure to load the jquery library). If i directly open the contents of page1.php (by the url- localhost/page1.php) then everything works fine.
This is the only code for which i am using JQuery:
if($("#pret").contents().text().search("NAMECHECK: NOTAVALIBLE")!=-1)
I could exclude jquery only if i can convert this code to javascript.
This is a legit jQuery 1.10.1 bug: http://bugs.jquery.com/ticket/13980 .
Using jQuery 1.10.0, or 1.10.2 the error no longer occurs.
Try to download jquery.min.js to your server and include it from there. For example:
<script type="text/javascript" src="/jquery.min.js"></script>.
It looks like internet explorer can't access the resource: downloading it to your own server might solve the issue.
Here is the working solution to my question. The reason i wanted jquery was that i wanted to run this code:
if($("#pret").contents().text().search("NAMECHECK: NOTAVALIBLE")!=-1)
I removed jquery library and used this javascript to do the same:
var n=document.getElementById("pret").innerHTML.search("NAMECHECK: NOTAVALIBLE");
if(n != -1)
Now there is no error in the page and i am able to do what i wanted. So the error was caused as jquery library was not able to load in the webpage. But i dont know why even after downloading the jquery library in my server i was getting the same error ie. 'Access is denied'.
The reason is in the iframe. As jQuery is loaded into the iframe from the external host, each time when you are trying to use any jQuery function in your main/outer html file, IE throws the error due to security reasons.
1) Either upload jQuery to your server,
2) or include it in main html file only (not in iframe).
My myclickHandler function works perfectly but when I go on to my error console I get this error:
document.getElementsByName("prequestion")[0] is undefined;
Below is my code
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Create a Session</title>
<script type="text/javascript">
document.getElementsByName("prequestion")[0].addEventListener('click', myClickHandler);
function myClickHandler(){
if(validation()){
openSessionPopup();
}
</script>
</head>
<body>
<form action="create_session.php" method="post" name="sessionform">
<p><strong>10: </strong><input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" onClick="myClickHandler()"/></p>
</form>
</body>
My question is what do I need to remove this error? because my function works does it matter if it shows an error in the error console?
Chances are you're loading the javascript before the DOM (or even possibly the HTML) has loaded properly.
For example, the following reproduces the same error as described in your question :
<script type="text/javascript">
document.getElementsByName("prequestion")[0].addEventListener('click', myClickHandler);
function myClickHandler(){
alert('test');
}
</script>
<input type="" name="prequestion" />
Whereas the following does not. The error is not present and the code works fine.
<input type="" name="prequestion" />
<script type="text/javascript">
document.getElementsByName("prequestion")[0].addEventListener('click', myClickHandler);
function myClickHandler(){
alert('test');
}
</script>
Trying to attach the event listener to an element which doesn't technically exist yet causes problems. You can check for the browser reporting the page has been loaded before attaching the event if needs be but be aware that browsers report this in different ways. Librarys such as jQuery provide useful means to test this such as $(document).ready(function(){});
Edit: I've just seen that you've added the relevant HTML too. It appears that this is in fact the case and the reason you're still seeing the expected behavior is because you're also using the onclick="" attribute on the input element. This is where the function is being called on click, and the event handler isn't being attached as you expect.
Edit #2: You also appear to be missing a closing } for your function. And I've now tested with your exact HTML and moving the script to just above the body tag resolves the error and correctly attaches the function to the click event.
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Create a Session</title>
</head>
<body>
<form action="create_session.php" method="post" name="sessionform">
<p><strong>10: </strong><input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" /></p>
</form>
<script type="text/javascript">
document.getElementsByName("prequestion")[0].addEventListener('click', myClickHandler);
function myClickHandler(){
alert('test');
} // This was missing
</script>
</body>
I suspect that the problem is that there are no elements with the name attribute set to "prequestion".
If you're getting that error, then your script doesn't actually work, so you should fix it.
I am in the process of handling a Long Press event in the JavaScript of an ASPX page but since I don't have much experience with JavaScript having a couple issues. I am working of a question which was already asked here.
When I run the code I get the message "$ is not defined" and when I change $("Button1") to ("Button1") then I get the message stating the mouseup function doesn't exist. The primary problem I'm having is accessing the aspx control properly. Below is my code.
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function () {
var pressTimer;
var longPress = 1000;
$("#<%= Label1.ClientID %>").bind("touchend", function (e) {
var d = new Date();
var timeDiff = d - pressTimer
if (timeDiff > longPress) {
document.getElementById("demo").innerHTML = "Mouse Up";
//actual logic here
}
return false;
});
$("#<%= Label1.ClientID %>").bind("touchstart", function (e) {
pressTimer = new Date();
return false;
});
});
</script>
<title>Long Press Testing</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:label ID="Label1" runat="server" text="Hold This Down" />
<br />
<p id="demo"></p>
</div>
</form>
</body>
</html>
Thanks for the help.
[EDIT] - Turns out I was missing the ready statement so the event is now firing as it should. This is the final version which is behaving properly. Also I wrote this to handle long press functionality on the iPad so if anyone is trying to do that this code is a good place to start.
You are missing jQuery script registration in head section like:
<script src="jquery.js"></script>
$ sign is jQuery's identifier, not JavaScript's.
Also, your buttons will not work, because you are referencing server button, but you must provide an id for JavaScript to work properly:
$("#<%= Button1.ClientID %>").mouseup(function () {
clearTimeout(pressTimer)
// Clear timeout
return false;
})
Looks like you are attempting to use jQuery (or another similar framework) without actually registering the appropriate script. You will need an <script/> block or some similar construct.
Looks like you havent included jquery in your project. you can include it by using the google hosting below, or go to jquery.com and download it and include it. your going to want to put in the Head tag above the other scripts you wrote. also, you might want to add a # before the id because it uses css selectors. Also, im not sure how much of the code will execute because thats a server button which will cause a post back.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
I had a problem with some functionality working in all browsers except for Safari, and I have reduced the problem down to this.
In my page I have the following script declarations at the end of my body element:
<script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-ui-1.8.11.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.ui.autocomplete.html.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.textchange.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.reveal.js"></script>
<script type="text/javascript" src="../../Scripts/mainScript.js"></script>
Then inside the mainScript.js file, I have put the following code:
$(function () {
alert("found");
});
In all other browsers, it displays a message box, but in Safari it does nothing.
Safari's javascript debugger lists the script, and can see the contents, but for some reason it's not included.
I found this problem since I tried to call a function in mainScript.js from an inline script inside the html page (the inline script was defined below the mainScript.js definition), and the Safari debugger complained that the function was not found anywhere.
What have I done wrong here, and why does not Safari include this script. All the jquery scripts are included and are working fine.
Your code seems good.
I tried with this code
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Test</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
alert("Test");
});
</script>
</body>
</html>
and it works fine (Safari 5.0.5 7533.21.1 on Windows 7).
A couple of questions:
Have you tried calling your function manually from the Error Console? Does it work?
If you place a simple alert("Test."); outside of the document ready function, is it displayed?
If you call jQuery's function from the Error Console, what do you get? Do they work?
The problem was found elsewhere in mainScript.js.
{ class: 'someclass' } was sent as parameter to some method, and class is a reserved word.
This should probably have given errors in other browsers as well, but they gladly ignored it and kept on going.
The fix was simply to change it to { 'class': 'someclass' }