I have a JQuery Function
(function ($) {
jQuery.fn.saveUser = function(destinationUrl) {
this.click(function() {
var formData = 'option=saveuser&'+$('form#save-user').serialize();
$.ajax({
type: 'POST',
url: 'process.php',
data: formData,
success: function(msg){
if(msg === 'empty') {
alert('Required Values Missing');
} else if(msg === 'duplicateEmail'){
alert('Email already exist');
} else {
window.location = destinationUrl;
}
}
});
});
}
now based on some actions and events, i redirect it to different pages, in this case i need it to redirect it to two different url.
1) reload the same page preserving all $_GET variables via URI
2) reload to the specified url.
the below jQuery code can redirect me to any specific url.
$('form#save-user button[name="save-user-close"]').saveUser(function() {
return 'index.php?users';
});
however i am not getting how do i make it redirect to the same page for example.
$('form#save-user button[name="save-user-close"]').saveUser(function() {
return location.reload(true);
});
i know the above code will not work, i am confused on how do i go with this?
You are never calling the function in your code, so it would not work whatever you put in the function. Intead of:
window.location = destinationUrl;
you should call the function, and let the function do the redirection:
destinationUrl();
(And you probably want to rename the parameter to reflect the change of usage.)
So your functions should do the redirection instead of returning the URL, so that you can use the reload method in the second one:
$('form#save-user button[name="save-user-close"]').saveUser(function() {
window.location = 'index.php?users';
});
and:
$('form#save-user button[name="save-user-close"]').saveUser(function(e) {
location.reload(true);
});
window.location.href=window.location.href;
or
location.replace(URL);
but preserving the variables u can approach querystring or session variables
Related
I wonder how I can pass value from Jquery to PHP. I found similar codes but not even one of them work.
Everytime alert shows value of variable but when I open site there is not any. Var_dump shows that $_POST is null. I am ran out of ideas do you have any?
jQuery code:
$("#password-button").click(function(){
var password="";
var numbers =[0,0,0,0,0,0];
for(var i=0;i<=5;i++){
numbers[i] = Math.floor((Math.random() * 25) + 65);
password += String.fromCharCode(numbers[i]);
}
$(".LoginError").text("Nowe haslo: " + password);
$.ajax({
type: 'post',
url: 'dzialaj.php',
data: {'password': password},
cache:false,
success: function(data)
{
alert(data);
console.log(result)
console.log(result.status);
}
});
});
PHP:
if(isset($_POST['password'])){
$temp = $_POST['password'];
echo $temp;
}
Since it looks like you are new on ajax, let's try something more simple ok? Check this js:
<script>
var string = "my string"; // What i want to pass to php
$.ajax({
type: 'post', // the method (could be GET btw)
url: 'output.php', // The file where my php code is
data: {
'test': string // all variables i want to pass. In this case, only one.
},
success: function(data) { // in case of success get the output, i named data
alert(data); // do something with the output, like an alert
}
});
</script>
Now my output.php
<?php
if(isset($_POST['test'])) { //if i have this post
echo $_POST['test']; // print it
}
So basically i have a js variable and used in my php code. If i need a response i could get it from php and return it to js like the variable data does.
Everything working so far? Great. Now replace the js mentioned above with your current code. Before run the ajax just do an console.log or alert to check if you variable password is what you expect. If it's not, you need to check what's wrong with your js or html code.
Here is a example what i think you are trying to achieve (not sure if i understand correctly)
EDIT
<script>
var hash = "my hash";
$.ajax({
type: 'post',
url: 'output.php',
data: {
'hash': hash },
success: function(data) {
if (data == 'ok') {
alert('All good. Everything saved!');
} else {
alert('something went wrong...');
}
}
});
</script>
Now my output.php
<?php
if(isset($_POST['hash'])) {
//run sql query saving what you need in your db and check if the insert/update was successful;
// im naming my verification $result (a boolean)
if ($result) echo 'ok';
else echo 'error';
}
Since the page won't redirect to the php, you need a response in you ajax to know what was the result of you php code (if was successful or not).
Here is the others answers i mentioned in the coments:
How to redirect through 'POST' method using Javascript?
Send POST data on redirect with Javascript/jQuery?
jQuery - Redirect with post data
Javascript - redirect to a page with POST data
To load the data when page scrolls down using function like this
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height())
{
//alert('Scrolling Down');
get_summary_details(); //Here it calls AJax Function load the data
}
});
get_summary_details() function works fine when page scrolls down.This function is like this
function get_summary_details()
{
var dataString=[];
$('div.company_summary_data').each(function() {
var id = $(this).attr('id');
dataString.push(id);
});
$.ajax({
url:"getajaxcompanysummarydetails",
type:"POST",
//dataType: "json",
data:"last_app_data_id="+JSON.stringify(dataString),
success:function(data)
{
$('.company_summary_data:last').after(data);
}
});
}
My problem is
while get_summary_details() processing the Request user will go to top of the page and Scroll down , again this get_summary_details() function will execute.
How to prevent that Second Request Processing without completion of first Request.Is this Possible? Because of this i am getting duplicate records of data.I need to prevent to display duplicate records.
Thanks!
Your AJAX requests are most likely queueing up behind one another, because they are asynchronous, even though JavaScript itself is mostly single threaded.
You can use the abort() method to make sure only one request runs at a time. You need to assign the jqXHR object returned by $.ajax() to a variable:
please refer this link
You need to check whether the ajax request is busy by setting a boolean flag
var loadingSummaryDetails = false;
Set it to true when you start the Ajax and to false when the call finishes
function get_summary_details()
{
if(loadingSummaryDetails) {
return;
}
loadingSummaryDetails = true;
var dataString=[];
$('div.company_summary_data').each(function() {
var id = $(this).attr('id');
dataString.push(id);
});
$.ajax({
url:"getajaxcompanysummarydetails",
type:"POST",
//dataType: "json",
data:"last_app_data_id="+JSON.stringify(dataString),
success:function(data)
{
$('.company_summary_data:last').after(data);
}
}).always(function()
{
loadingSummaryDetails = false;
});
}
I need to validate a HTML form before executing the action attribute. But it gives me a hard time.
Please see the comment in the else statement, and the comment after returning false for an explanation of this issue
$(document).ready(function(){
$("#ajax-payment-form").submit(function() {
var str = $(this).serialize();
$.ajax({
type: "POST",
url: templateDir+"/payment_form/payment_process.php",
data: str,
success: function(msg) {
// Message Sent - Show the 'Thank You' message and hide the form
if(msg == 'OK') {
alert("success");
} else {
event.preventDefault(); // I have tried with or without this method
alert("fail");
}
}
});
return false; // when return false, the action will not execute. If false is removed the action will execute, even if event.precentDefault(); is called in the else statement.**
});
});
Thanks for your time,
Troels
Your ajax call is asynchronous. This means that this function is executed, and it doesn't wait for a response from the function before it proceeds forward. This means that return false; will always fire before the result of the ajax function returns to you. Given your current circumstances, the easiest thing to do is call this.submit() from within the success function, but always return false; under the default scenario. This will avoid recursion, and also the asynchronous call won't be problematic anymore.
$(document).ready(function(){
$("#ajax-payment-form").submit(function() {
var str = $(this).serialize();
$.ajax({
type: "POST",
url: templateDir+"/payment_form/payment_process.php",
data: str,
context: this, //needed to tell the ajax function that "this" belongs to the form, not the ajax call.
success: function(msg) {
// Message Sent - Show the 'Thank You' message and hide the form
if(msg == 'OK') {
alert("success");
this.submit(); //it's magic, john.
} else {
//no reason to prevent the default, as the form will automatically return false anyway.
alert("fail");
}
}
});
return false; //just leave this right here.
});
});
The issue is two fold: event is not declared in your function call, and that you are not submitting the form upon the success funtion. The logic of your submit event should be as follow:
Listen to submit event on the <form> element.
Prevent default form actions first, using e.preventDefault()
Make AJAX call. Depending on the outcome of the returned data, determine whether to proceed with submitting the form. I strongly suggest not using the deprecated jqXHR.success function, but the deferred functions jqXHR.done() or jqXHR.fail().
Also, you can always use console.log() to check your script, instead of relying on alert() which blocks downstream code execution. Here's the code:
$(function(){
$("#ajax-payment-form input[type='submit']").click(function(e) {
// Prevent form submission
e.preventDefault();
// Serialize data, make AJAX call
var str = $(this).closest('form').serialize();
$.ajax({
type: "POST",
url: templateDir+"/payment_form/payment_process.php",
data: str,
context: this // So that you can use $(this) later
}).done(function(msg) {
// If a response is received from your server
if(msg == 'OK') {
console.log('Validation passed, will submit form');
$(this).closest('form').submit();
} else {
console.log('Validation failed, will not do anything more');
}
}).fail(function() {
// Catch ajax errors here
console.log('AJAX error');
});
});
});
I am using an Ajax request to post a form with Jquery.
$.ajax(
{
type: "POST",
url: "login.php",
data: $("#signin").serialize(),
dataType: "json",
cache: false,
success: function(data, textStatus) {
if (data.redirect) {
window.location.replace(data.redirect);
}
else {
$('#some').fadeOut(200);
$('#some2').fadeIn(200);
$("#some3").html(data.form);
$("#some").delay(2000).fadeOut(200);
$('#some2').delay(2800).fadeIn(300);
}
}
});
Now the ajax request will take place as soon as you click on a button "Login". The problem now is that if you press the button more than once the else case will be executed several times which will cause #some, #some2 and #some3 to fade out and in several times. So how could I check whether the request has allready been sent (without having to write something into my db)?
From here:
You can use .one() method and set it again in ajax callback.
function doAjax(){
// Your Ajax call.
$.ajax({..., complete: function() {
// Ajax call done, re-enabling the button/link
$("#buttonId").one('click', doAjax);
}, ...});
}
$("#buttonId").one('click', doAjax);
Make boolean flag, say, login_in_process, on login check this flag in true value. And check this flag on every click if it true then make empty return. In success and error callbacks set it in false state.
You can use a boolean value to record whether or not it has been clicked:
var loginClicked = false;
$('input_button_element').click(function(){
if (!loginClicked) {
loginClicked = true;
// your js here - you may want to add some visual feedback to the user also
}
});
You will have to store a boolean in a global scope, e.g. one stored on the window object:
if (!window.isClicked) {
window.isClicked = true;
...Do your ajax call here
}
Remember to ALWAYS restore the value of window.isClicked, not only in the success callback of ajax():
var jqxhr = $.ajax( ... )
.done(function() { })
.fail(function() { })
.always(function() { window.isClicked = false });
you can make a global var
var loginClick = false;
Inside your method you first check that value
if (!loginClick) {
loginClick = true;
//your ajax code;
}
I was trying to validate username whether exist or not with the following code. But it somehow don't work to prevent the existing username.
**NOTE: checkusr2.php is a simple php to check wheter the username in database.
function verifyUser() {
var usr = $("#username").val();
$.ajax( {
type: "POST",
url: "checkusr2.php",
data: "username="+ usr,
success: function(msg) {
$("#txtHint").ajaxComplete(function(event, request, settings){
FormErrors = false;
if(msg == 'OK') {
FormErrors = true;
$('#formElem').data('username',FormErrors);
} else {
$('#formElem').data('username',FormErrors);
}
});
}
});
}
/** calling the function to check. **/
verifyUser();
if($('#formElem').data('username')){
alert('Username exist, please try another username.');
return false;
}
Use an http proxy like Charles, Fiddler, WireShark, etc... to view the ajax request you are sending and verify that the response is what you expect.
For one thing, you are making an asynchronous call (the A in Ajax) to get the response for whether the username exists. The check, immediately after the verifyUser call is being called as soon as you call the verifyUser and the the request to checkusr2.php may or may not have actually returned by then.
I have also never seen the ajaxComplete set inside of the success handler. I think you may want to change it like this:
function verifyUser() {
var usr = $("#username").val();
$.ajax( {
type: "POST",
url: "checkusr2.php",
data: "username="+ usr,
success: function(msg) {
if(msg != 'OK') {
alert('Username exists, please try another username.');
$("#username").val("");
}
};
});
}
Your problem is in trying to use verifyUser synchronously. The code seems fairly sound, the problem is that $.ajax executes asynchronously using XMLHTTPRequest. This means that your code immediately following the call to verifyUser cannot depend on the side effect of its completion.
What you need to do is run the verifyUser callback earlier (like, say, when the user un-focuses the username field), so that when it comes time to submit you've already got the result.
For example:
$('#username').blur(function() { verifyUser() });
A further change would be instead of preventing submit, you can make verifyUser show a div with a message next to the field when the username is invalid. You'd make these changes to your handler:
if(msg == 'OK') {
FormErrors = true;
$('#username_invalid').show();
} else {
$('#username_invalid').hide();
}
Then you could show the user the username cannot be chosen immediately, without wasting their time submitting it.
Try this
$("#txtHint").ajaxComplete(function(e, xhr, settings) {
if (settings.url == 'ajax/test.html' && xhr.responseHTML=="Ok") {
FormErrors = true;
$('#formElem').data('username',FormErrors);
} else {
$('#formElem').data('username',FormErrors);
}
})
Thanks for bringing up this .ajaxComplete() that I didn't know about. I think it will be of great help for me in the future.
But anyway I don't think it's what you want to use in this specific case:
function verifyUser() {
var usr = $("#username").val();
$.ajax( {
type: "POST",
url: "checkusr2.php",
data: {'username':usr},
success: function(msg) {
if ( msg != 'OK' ) {
alert('Username exist, please try another username.');
return false;
}
});
});
}
The function that you want to execute after the Ajax call must be passed as a callback of the Ajax function, otherwise, and even if you put it after your Ajax function, it will execute before the server's response.