I am getting the following error when I am trying to run this code on the browser.
"Error response
Error code: 501
Message: Unsupported method ('POST').
Error code explanation: 501 - Server does not support this operation."
The following errors were in the browser console:
"1. Failed to load resource: the server responded with a status of 404 (File not found)
'http://localhost:8002/js/jquery-1.3.2.min.js'
Resource interpreted as Script but transferred with MIME type text/plain:
pquery-0.0.1.js:1
Failed to load resource http://mdsad.com/p.js?v=1372783767755
undefined login.html:61
POST
http://localhost:8002/login.html 501 (Unsupported method ('POST')) login.html:1
Resource interpreted as Script but transferred with MIME type text/plain:
pquery-0.0.1.js:1
GET http://mdsad.com/p.js?v=1372783801500 download.js:33"
The login of users via stackmob also fails. I get a 'Failure' alert message. Here is the code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/stackmob-js-0.9.1-bundled-min.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login Form</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$(".username").focus(function() {
$(".user-icon").css("left","-48px");
});
$(".username").blur(function() {
$(".user-icon").css("left","0px");
});
$(".password").focus(function() {
$(".pass-icon").css("left","-48px");
});
$(".password").blur(function() {
$(".pass-icon").css("left","0px");
});
});
</script>
<script type="text/javascript">
function nextpage(form){
StackMob.init({
publicKey:"my_key",apiVersion:0
});
var u=document.getElementById('username').value;
var p=document.getElementById('password').value;
var user = new StackMob.User({ username: u, password: p});
user.login(false, {
success: function(model, result, options) {
alert("Success");
StackMob.isUserLoggedIn(form.username.value, {
yes: function() { alert("Yes"); },
no: function() {
alert("No");}
});
},
error: function(model, result, options) {
console.log(result);
alert("Failure");//or print out the error
} }); };
</script>
</head>
<body>
<div id="wrapper">
<div class="user-icon"></div>
<div class="pass-icon"></div>
<form name="login-form" class="login-form" action="" method="post">
<div class="header">
<h1>Login Form</h1>
<span>Fill in the details</span>
</div>
<div class="content">
<input id="username" name="username" type="text" class="input username" value="Username" onfocus="this.value=''" />
<input id="password" name="password" type="password" class="input password" value="Password" onfocus="this.value=''" />
</div>
<div class="footer">
<input type="submit" name="submit" value="Login" class="button" onclick="nextpage(this.form)"/>
<input type="submit" name="submit" value="Register" class="register" />
</div>
</form>
</div>
<div class="gradient"></div>
</body>
</html>
However, I am sure about the stackmob part because it worked well in a simple code of mine. Here is the working simple code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/stackmob-js-0.9.1-bundled-min.js"></script>
<script type="text/javascript">
function nextpage(form){
StackMob.init({publicKey:"my_key",apiVersion:0});
var u=document.getElementById('username').value;
var p=document.getElementById('password').value;
user.login(false, {
success: function(model, result, options) {
alert("Success");
StackMob.isUserLoggedIn(form.username.value, {
yes: function() { alert("Yes"); },
no: function() {
alert("No");
}
});
},
error: function(model, result, options) {
console.log(result);
alert("Failure");//or print out the error
}
});
};
</script>
</head>
<body>
<form>
<table>
<tr><td>Username</td><td><input id="username" type="text"></td></tr>
<tr><td>Password</td><td><input id="password" type="text"></td></tr>
<tr><input type="button" value="LOGIN" onclick="nextpage(this.form)"></tr>
</table>
</form>
</body>
</html>
Can someone please tell me where am I going wrong?
You are running a local server on port 8802 but the javascript file "jquery-1.3.2.min.js" is not at the location specified, hence the 404 error.
The 501 error is because the server you are using (presumably something like simpleHTTPServer) doesn't support POST requests.
To resolve that error you need to use a server that supports POST requests (e.g. Apache, IIS).
Your importing Jquery twice, and two different versions, this could add all sorts of strange issues assuming the 404 is inaccurate.
Remove this line:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
If nothing else it will clear the 404
Related
after the success of the ajax call by clicking on the submit button I am getting the bellow error page in the browser and I can't find any errors in the console.
This page isn’t working If the problem continues, contact the site
owner. HTTP ERROR 405
I am new to javascript, jquery, and ajax calls. So please give me suggestions for solving this error
HTML code:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css" />
<title>Document</title>
</head>
<body>
<div>
<h1 class="myclass">HELLO!WELCOME</h1>
</div>
<div id="maindiv">
<form id="loginform" method="post">
<div class="form-group">
<input type="number" class="form-control" id="inputphone" placeholder="Enter phone number">
</div>
<div class="form-group">
<input type="password" class="form-control" id="inputpassword" placeholder="Enter Password">
</div>
<div class="forgot-password">
forgot password
</div>
<button id="submit" class="submit-button" >Submit</button>
<!-- <input type="submit"value="Login"/>-->
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/index.js" type="text/javascript"> </script>
</body></html>
JS code:
$('#submit').click(function () {
alert(".click() called.");
var inputphoneno = document.getElementById("inputphone").value;
var inputpassword = document.getElementById("inputpassword").value;
const jdata = {
"phonenumber": inputphoneno,
"password": inputpassword
};
try {
$.ajax({
type: "POST",
url: "http://localhost:8085/Smatr/signIn",
data: JSON.stringify(jdata),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
console.log(data)
alert(data);
}
});
}
catch (ex) {
alert(ex);
}
});
You should add attribute type="button" to prevent submitting form. If there is no attribute type, button behave like a submit button.
<button id="submit" type="button" class="submit-button" >Submit</button>
I'm trying get json from url but it not working, also i'm not getting any error
index.js:
$(function () {
$.getJSON("http://telegram-socks.tk/json", function (data) {
$("textarea").html(JSON.stringify(data));
}
);
});
index.html:
<html>
<head>
<meta name="viewport" content="initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row text-center">
<div class="col">
<textarea class="form-control text-center" rows="50"></textarea>
</div>
</div>
</div>
</body>
</html>
telegram-socks.tk/json:
{
"Proxies": [
"188.166.91.133:1080",
"51.15.100.63:1080",
...
]
}
(telegram-socks.tk/json is valid JSON according to jsonlint.com)
If you open your console you will probabily see an error like this:
Mixed Content: The page at 'https://yourpage.com' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://telegram-socks.tk/json'. This request has been blocked; the content must be served over HTTPS.
That happens because you are on a page that is cryptography by SSL, and are trying to access a unsecure url, that most browser will natively block.
Or even like this:
Failed to load http://telegram-socks.tk/json: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
That is the browser again blocking your request because of insecure resource in other pages
See the bellow snippet and check the console:
$(function() {
$.getJSON("http://telegram-socks.tk/json", function(data) {
console.log(data);
}).error(function(e) {
console.log(e);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row text-center">
<div class="col">
<textarea class="form-control text-center" rows="50"></textarea>
</div>
</div>
</div>
You can check more information about it in here and here
Try this :
$.getJSON("http://telegram-socks.tk/json", function(data) {
console.log( "success" );
}).fail(function( jqxhr, textStatus, error ) {
console.log(data);
});
I'm developing a website through Parse.com JavaScript. I'm working on the login page and I found this nice template: http://designscrazed.org/css-html-login-form-templates/
However, when I try to modify the submit part of this page to be processed through Parse.com, the page auto-refreshes before the Parse.com transaction could be made. I know the JavaScript file is properly referenced though.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Prindle Login</title>
<!-- PARSE-->
<link href="dist/css/login-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="dist/js/parse/login-js.js"></script>
</head>
<body>
<div class="login-card">
<h1>Prindle Login</h1><br>
<form id="form">
<input id="prindle_log_on_username" type="text" name="user" placeholder="Username">
<input id="prindle_log_on_password" type="password" name="pass" placeholder="Password">
<input id="prindle_log_on" type="submit" class="login login-submit" value="Log In">
</form>
<div class="login-help">
Register • Forgot Password
</div>
</div>
</body>
</html>
JS:
// dynamically adding to a document: http://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery/comment-page-1
$(document).ready(function() {
alert('hello');
Parse.$ = jQuery;
Parse.initialize("APP ID", "JS ID")
});
// called when the user clicks the log in button
$('#prindle_log_on').on("click",function(e) {
e.preventDefault();
alert("form has been submitted.");
// perform onclick
// get the values of the input fields for username and password
var username = $('#prindle_log_on_username').val();
var password = $('#prindle_log_on_password').val();
// try to log in
Parse.User.logIn(username, password,
{
success: function(user) {
// Do stuff after successful login.
alert('user found');
},
error: function(user, error)
{
// The login failed. Check error to see why.
alert('log in failed');
}
});
});
I never get the balloon saying "form has been submitted." Help?
EDIT: (thanks to moogs)
<div class="login-card">
<h1>Prindle Login</h1>
<br>
<form id="form">
<input id="prindle_log_on_username" type="text" name="user" placeholder="Username">
<input id="prindle_log_on_password" type="password" name="pass" placeholder="Password">
<input id="prindle_log_on" type="submit" class="login login-submit" value="Log In">
</form>
<div class="login-help"> Register • Forgot Password
</div>
</div>
$(document).ready(function () {
$('#prindle_log_on').on("click", function (e) {
e.preventDefault();
alert("form has been submitted.");
});
});
Place the click handler inside $(document).ready because $('#prindle_log_on') will not be found until the body has rendered.
http://jsfiddle.net/moogs/L62z4k5o/1/
I get this error while running an html file which contains a form. It is supposed to move to another screen after login.
GET http://mdsad.com/p.js?v=1373144857354
I cannot understand where I am going wrong in the code. It doesn't even enter the function that is called.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/stackmob-js-0.9.1-bundled-min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pocket Docket</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function nextpage() {
alert("function");
StackMob.init({
publicKey: "my_key",
apiVersion: 0
});
var u = document.getElementById('username').value;
var p = document.getElementById('password').value;
alert(u);
alert(p);
var user = new StackMob.User({
username: u,
password: p
});
user.login(false, {
success: function(model, result, options) {
alert("Success");
alert("Success");
window.open('newp1.html');
StackMob.isUserLoggedIn(u, {
yes: function() {
alert("Logged In!");
},
no: function() {
alert("Login Error!");
}
});
},
error: function(model, result, options) {
console.log(result);
alert("Login Error!");
}
});
};
</script>
</head>
<body>
<div id="topPan">
<div id="topHeaderPan"></div>
<div id="toprightPan"></div>
</div>
<div id="bodyPan">
<div id="bodyleftPan">
<h2>Pocket Docket</h2>
<p class="greentext">For Every Salesman</p>
<p>Pocket Docket is a means to simplify the working of the sales
department in a company.</p>
<p>For every salesperson, it is like a manager, assigning tasks and
recording progress, updating it on their profiles. Easier to manage,
higher the productivity.</p>
</div>
<div id="bodyrightPan">
<div id="loginPan">
<h2>Pocket Docket <span>login</span></h2>
<form action="" method="post">
<label>Login ID</label><input id="email" name="email" type=
"text"> <label>Password</label><input id="pass" name="pass"
type="password"> <input class="button" name="Input" onclick=
"nextpage()" type="submit" value="Login">
</form>
<ul>
<li class="nonregister">Forgot Password ?</li>
<li class="register">
Click Here
</li>
</ul>
</div>
<div id="loginBottomPan">
</div>
</div>
</div>
</body>
</html>
The error is in download.js (some file i don't know in the browser console).
Please tell me where is the error.
I figure out what was wrong with your code:
var u = document.getElementById('username').value;
var p = document.getElementById('password').value;
where your input Id's are 'email' and 'pass'
so change the above lines to :
var u = document.getElementById('email').value;
var p = document.getElementById('pass').value;
also
it's better to close "input" markup
Hope it works now.
I get an error like this:
Uncaught TypeError: Cannot read property 'form' of undefined
Firebug says this line is the culprit:
if($("emailPost2").valid())
Here's all my jQuery code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://github.com/jzaefferer/jquery-validation/raw/master/jquery.validate.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$("emailPost2").validate({
rules: {
emailAddress: {
required: true,
email: true
}
}
});
$('#zonePlus').click(function() {
$('#zoneNotif').submit();
});
$('#searchPost').submit(function(event) {
if ($(this).find('#searchBox').val() == '') {
event.preventDefault();
}
});
$("#searchBox").autocomplete({
source: 'php/searchAC.php'
});
$("button, input:submit, input:button, a#jql, input:radio").button();
$('#emailJQButton').live('click',function() {
$("#emailModal").dialog('open');
});
$('#eb1').live('click',function() {
$('#emailPost').submit();
$("#emailModal").dialog('close');
});
$('#eb2').live('click',function() {
if($("emailPost2").valid())
{
$('#emailPost2').submit();
$("#emailModal").dialog('close');
}
});
});
</script>
valid() should return true if it is valid, but I just get the error I mentioned above instead of any results.
Edit: Here's the HTML code for the form:
<div id="emailModal">
<form action="php/emailPost.php" method="POST" class="inline" id="emailPost2">
<label name="error"></label>
<input type="text" value="Enter an Email" class="required email" name="emailAddress" style="display: inline-block;">
<input type="button" value="Email" id="eb2"/>
<input type="hidden" name="passedCoupID" value="1"/>
</form>
</div>
Looks like the problem is simply that you forgot the # in the id selector:
$("#emailPost2").valid()
(rather than the current $("emailPost2").valid())
Assuming
form id="emailPost2"
you need
if($("#emailPost2").valid())
I wanted to BOLD the # but was not allowed inside the brackets, hence I was 15 seconds slower :(