Not Showing Success Alert - javascript

I'm trying to get an alert when i press the log in or sign up button but nothing is coming up. I'm copying this code off a Udemy course and I've gone over it so many times make sure it's exactly like my teachers code but it still doesn't work.
I have more JavaScript code but i didn't include it here as it was working. I've only included the code where it's no longer working for me.
I've looked at other related questions and answers on here where people said to add a jQuery URL into the script tag which did not work for me.
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="loginModalTitle">Login</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<input type="hidden" id="loginActive" name="loginActive" value="1">
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
</form>
</div>
<div class="modal-footer">
<a class="link" id="toggleLogin">Sign up</a>
<button type="button" id="loginSignupButton" class="btn btn-primary">Login</button>
</div>
</div>
</div>
</div>
<script>
$("#toggleLogin").click(function() {
if ($("#loginActive").val() == "1") {
$("#loginActive").val("0");
$("#loginModalTitle").html("Sign Up");
$("#loginSignupButton").html("Sign Up");
$("#toggleLogin").html("Login");
} else {
$("#loginActive").val("1");
$("#loginModalTitle").html("Login");
$("#loginSignupButton").html("Login");
$("#toggleLogin").html("Sign Up");
}
})
$("#loginSignupButton").click(function() {
$.ajax({
type: "POST",
url: "actions.php?action=loginSignup",
data: "email=" + $("#email").val() + "&password=" + $("#password").val() + "&loginActive=" + $("#loginActive").val(),
success: function(result) {
alert(result);
}
})
})
</script>
------ actions.php
<?php
include("functions.php");
if ($_GET['action'] == "loginSignup") {
print_r($_POST);
}
?>
I'm not getting the login or sign up alert when i press the login or sign up button.

Narrow it down. Check for the request in the network panel of the browser dev tools. If the POST doesn't appear there, you know the issue is client side.
Wait for the DOM to load before you set the click handler. Wrap the click handler in a $(document).ready(). If you have already done so, you need to include more code in your question. Based on what you have shared, there are no logic or syntax errors.

Related

Problems with AJAX error event

I'm having problems with AJAX error event. I've manage to put together some code using questions/answers from this site (I'm javascript newb)
After successfully implementing success message on successful login and showing div element success (shown below)
<div class="alert alert-success"> <strong>Logging in..</strong></div>
I'm trying to show error message on unsuccessful login on my login modal form.
Here is the code for modal form
<form id="myform" method="POST" role="form">
<div class="modal fade" id="test" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Prijava</h4>
</div>
<div class="modal-body">
<div id="error">
<div class="alert alert-danger"> <strong>Error, try again!</strong> </div>
</div>
<div id="thanks">
<div class="alert alert-success"> <strong>Logging in..</strong></div>
</div>
<div class="form-group">
<label for="user">User:</label>
<input name="user" type="text" class="form-control" placeholder="Unesi korisnika">
</div>
<div class="form-group">
<label for="pass">Password:</label>
<input name="pass" type="password" class="form-control" placeholder="Unesi lozinku">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="reset" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success" id="submitForm">Login in!</button>
</form>
</div>
</div>
And here is my code for AJAX code
$("#error").hide();
$("#thanks").hide();
$("#myform").submit(function (e) {
var url = "login.php";
$.ajax({
type: "POST",
url: url,
data: $('#myform').serialize(),
success: function (data) {
$("#thanks").show();
setTimeout(function() {
top.location.href ='admin.php';
}, 2000);
},
error: function (jqXHR, textStatus, errorThrown) {
$("#error").show();
}
});
e.preventDefault();
});
Success event is working fine, but the problem lies in error event. No matter what I write, it shows #thanks div and completely ignores #error div. I just want to show #thanks on successfully login and #error div on unsuccessful login in modal form.
You need to send data back to the browser from the php on the server with a message for the ajax success function to process:
login.php
//do your stuff then
if (everything_is_OK) {echo "good to go!";} else {echo "problem";}
AJAX
success: function (data) {
if (data==="good to go!"){$("#thanks").show();}
if (data==="problem"){$("#error").show();}
}

Unable to display output in Chrome Console with Jquery

I'm a beginner with parse and jquery. But for some reason I'm having issues with the most basic thing, which is outputting messages into the console. I've checked my Chrome settings and they're are filtering to all.
I've written the code to simply store email and password FE inputs into parse. If the inputs match the basic validation that I've created, it should display a console message. If the input is invalid, it should display another console message. But for some reason everything I've tried doesn't seem to be working. Here is what my code looks like.
http://imgur.com/a/XHQeg
Thanks for the help. Please let me know if I've left out any information.
index.html
<div class="modal fade" id="signUp" tabindex="-1" role="dialog" aria-labelledby="signUpLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="signUp-title" id="signUpLabel">Sign Up</h4>
</div>
<div class="modal-body">
<form id = "register-form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group">
<label for="password2">Confirm Password</label>
<input type="password" class="form-control" id="password2" placeholder="Confirm Password">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Sign Up</button>
</div>
</div>
</div>
</div>
jquery.js
Parse.initialize("xxx",
"yyy");
$("#register-form").submit(function(event){ event.preventDefault();
//lets page prevent refresh
var email = $("#exampleInputEmail1"). val(); var password =
$("#password"). val(); var password2 = $("#password2"). val();
if ( password == password2) {
var user = new Parse.User();
user.set("email", email)
user.set("password", password)
user.signUp(null, {success:function(user){
console.log("Register Succeeded!")
}, error:function(user, error){
console.log("Registration error:" +error.message);
} });
}
});
When i was making your code more readable in my code editor i noticed you have a space between the dot and val() in your variable declarations. You are also missing a semicolon at the end of the first line in the password if statement.
your button also is not inside your form tags and is not of type submit!
Fix those problems and it will work.

Fetching & Updating Data Using ajax and Jquery [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I've been working on a forum based system. With the help of jquery, php, bootstrap, and such I could develop a forum in which a user can post, delete, and edit. I've defined an edit button for the person who sent the post, with click of a mouse, "modal" comes down, and some forms will appear for the user to enter in his/her desired info. I've been searching over internet for the right ajax method to collect the data from server first, and save the changes that user makes to it, but I was unsuccessful to define what i'm looking for. here below is the modal code,
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="container">
<form style="width: 550px;" action="" method="post" role="form">
<div class="from-group">
<label for="title">Title: </label>
<input class="form-control" type="text" name="title" id="title" value="" placeholder="Page Title">
</div>
<br>
<div class="from-group">
<label for="label">Label: </label>
<input class="form-control" type="text" name="label" id="label" value="" placeholder="Page Label">
</div>
<br>
<div class="from-group">
<label for="header">Header: </label>
<input class="form-control" type="text" name="header" id="header" value="" placeholder="Page Header">
</div>
<br>
<div class="from-group">
<label for="body">Body: </label>
<textarea class="form-control editor" name="body" id="body" row="8" placeholder="Page Body"></textarea>
</div>
<br>
<!-- <button style=" color:#FFFFFF; background-color: #4D6064" type="submit" class="btn ">Submit</button> -->
<input type="hidden" name="submitted" value="1">
<br>
<br>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The 'right' ajax method?
Ajax is just a way to communicate with a server.
What data do you want to collect?
A GET request will request that the server sends you back some 'data' in the response, its probably the very first example in any 'ajax'-wrapper library, for example, this snippet
$.ajax({
url: "http://fiddle.jshell.net/favicon.png",
beforeSend: function( xhr ) {
xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
}
})
.done(function( data ) {
if ( console && console.log ) {
console.log( "Sample of data:", data.slice( 0, 100 ) );
}
});
is from jQuery.ajax http://api.jquery.com/jquery.ajax/
It sends a request to the url specified (ignore the beforeSend function, it does nothing outrageous anyway) and then handles the response in the '.done' handler. If you're not familiar with promises, just think of that '.done' handler as a callback that contains the data i.e. at some point in the future the server will respond (hopefully) with some data and that function handles it.

Call for External Function using jQuery

I've got an external js file with the following code in it that is checking to see if a person login credentials are true or false. When I put this jquery into the actual php file it will work as intended but when it I put the jQuery into the js file and try calling it it doesn't work and I'm not getting any errors. What's wrong with the call?
js file:
function handleLogin(event) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
username = $form.find( "input[name='username']" ).val(),
password = $form.find( "input[name='password']" ).val(),
url = "../process/login.php";
// Send the data using post
var posting = $.post( url, { username: username, password: password } );
// Reset data in #testStatus textarea
posting.done(function( data ) {
if (data == '1') {
$('#loginModal').modal('hide')
$( "#loginOption" ).replaceWith( "<li id='loginOption'><a href='logout.php'>Logout</a></li>" );
}
});
}
php file (the call of the function located at the end of the php file):
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="loginModalLabel">Login</h4>
</div>
<div class="modal-body">
<form id="loginForm" action="">
<div class="form-group">
<label for="username">Username</label>
<input name="username" type="text" class="form-control" id="username" placeholder="Username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input name="password" type="password" class="form-control" id="password" placeholder="Password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" id="loginSubmit" name="login" class="btn btn-primary" value="Login">
</div>
</form>
</div>
</div>
</div>
<script>
$("#loginForm").submit(function handleLogin() { });
</script>
You need to pass the function reference to the submit event handler...
Instead you are creating a new function which does not do anything to the submit handler, so try
$("#loginForm").submit(handleLogin);
It should be like this:
$("#loginForm").submit(function(e){
handleLogin(e);
});

Passing parameters from input

How can I append a URL with an email address that a user inputs, and then submits this email address via button? I am using a modal that will pop up, ask for the email, and then call the url when the user hits the submit button. (jQuery is supported) Any help is much appreciated! Thanks
<div id="emailModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel"> We Can Help</h3>
</div>
<div class="modal-body">
<h6> Enter your information in the fields below to reset a forgotten password, or to restore access to an account that has been locked for security </h6>
<br>
<form >
<input type="text" class="input-block-level" placeholder="Email address">
<!-- <input type="password" class="input-block-level" placeholder="Password">
<label class="checkbox">
<a href="#"><input type="checkbox" value="remember-me"> Remember me
</label></a> -->
</form>
</div>
<div class="modal-footer">
<button class="m-btn blue" data-dismiss="modal">Submit</button>
</div>
</div>
You can do something like
$("#emailModal .m-btn").click(function(){
$.post("/my/url?email=" + $("#emailModal input.input-block-level").val(), function(){
// this function is called on POST finish.
});
return false;
});
I think this is what you are after.
Change the form to this...
<form action="some-url.php" method="get">
<input type="text" name="email" class="input-block-level" placeholder="Email address">
</form>
and add this script...
$("#emailModal button").on("click", function() {
$("#emailModal form").submit();
});

Categories