I have a form that requires a physical address. Once the user enters the full address, I have a button that says "Verify address". I want to be able to click that button, trigger an ajax call that will call a file in the server which will get the longitude and latitude of that address, then return to the form with those coordinates, and display a div with them. Dont worry about figuring out the coordinates. Im just trying to figure out the whole ajax call and jquery display upon response from the server. Thanks
So, I did this to have things working:
$(document).ready(function() {
//if verify button is clicked
$('#verify').click(function () {
var address = $('input[name=address]');
var city = $('input[name=city]');
var state = $('input[name=state]');
var zip = $('input[name=zip]');
var country = $('select[name=country]');
//organize the data for the call
var data = 'address=' + address.val() + '&city=' + city.val() + '&state=' + state.val() + '&zip=' + zip.val() + '&country=' + country.val();
//start the ajax
$.ajax({
url: "process.php",
type: "GET",
data: data,
cache: false,
success: function (html) {
//alert (html);
if (html!='error') {
//show the pin long and lat form
$('.form2').fadeIn('slow');
} else alert('Error: Your location cannot be found');
}
});
//cancel the submit button default behaviours
return false;
});
});
process.php returns the longitude and latitude back in a variable as: "longitude,latitude". How do I access that data back in the front end so I can populate the form fields with it? Thanks a lot for the great responses.
I hope this is helpful. This would be a generic AJAX call to a php page:
$.ajax({
type: "POST",
url: "scripts/process.php",
data: "type=query¶meter=" + parameter,
success: function (data) { //Called when the information returns
if(data == "success"){
//Success
} else {
//Fail
}
},
error: function () {
//Complete failure
}
});
The jQuery function you need is jQuery.get().
You can find other details here: http://api.jquery.com/category/ajax/
Sorry for the scarce details but you haven't provided source code.
Related
I am using an inline jquery ajax to delete a list one by one. When giving an action to delete a list, the ajax will send some post data and the response is json encoded. Upon successful response, a pop up box will open in the first ajax success field asking for the username and password. Then an inline ajax will execute there, sending the pop up box's values along with the response from first ajax. I have given a condition in the inline ajax success field to validate the response for the second posted values. The response is coming true but the condition fails, i don't know why. Please refer the code...
$('.deleteButton').on('submit', function (event) {
event.preventDefault();
$.ajax({
url: 'phpPage.php',
type: 'POST',
dataType: 'json',
data: $(this).serialize() + "&del=del",
success: function (d) {
$(".popupContainer").show();
var text = "Do you really want to delete the report dated:";
$('#info').text(text);
$('#delForm').on('submit', function (event) {
event.preventDefault();
$.ajax({
url: 'delRept.php',
type: 'POST',
data: $(this).serialize() + "&vtime=" + d.vtime + "&vdate=" + d.vdate + "&delbox=delbox",
success: function (data) {
if (data == 'string') {
$('#rrr').append("True : Delete it");
} else {
$('#rrr').append(data);
}
}
});
});
return false;
}
});
});
Here it will execute the else condition even if the response is true. Please help me to find the mistake in the coding...
Thanks
How can I stop a form using AJAX from refreshing when using success and error? If I remove return false; after the end of the function, the error(Error validating CLid!) is displayed and the page refreshes, however if I leave it the ajax function submits and returns true with no refresh. Let me know if you need more information. Thanks!
var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone + '&company=' + phone + '&length=' + length + '$time=' + time + '&question' + question;
$.ajax({
type: "POST",
url: "contact_process.php",
data: dataString,
success: function() {
$('#search_contact').html("You're request for more information was submitted.");
},
error: function() {
$('#search_contact').html('Error validating CLid!');
}
});
return false;
});
I suspect you are triggering this ajax request through an event on a form submission or link click or something.
If you are triggering the request from a link, ie:
Click me
When you bind the event you need to call event.preventDefault(); on the event passed to the event handler to prevent the default behavior, ie:
$('#contactTrigger').click(function(event){
event.preventDefault();
//do your ajax stuff here.
});
ive been trying for hours to get this to work and havent moved a budge.
What im trying to do is send an url when a button is click, but without refreshing the page
php code of button:
echo 'Send';
jquery code:
<script type="text/javascript">
//Attach an onclick handler to each of your buttons that are meant to "approve"
$('approve-button').click(function(){
//Get the ID of the button that was clicked on
var id_of_item_to_approve = $(this).attr("id");
$.ajax({
url: "votehandler.php", //This is the page where you will handle your SQL insert
type: "POST",
data: "id=" + id_of_item_to_approve, //The data your sending to some-page.php
success: function(){
console.log("AJAX request was successfull");
},
error:function(){
console.log("AJAX request was a failure");
}
});
});
</script>
votehandler.php:
<?php
$data = $_POST['id'];
mysql_query("UPDATE `link` SET `up_vote` = up_vote +1 WHERE `link_url` = '$data'");
?>
Ive removed all the error checks from votehandler.php to try to get any response but so far nothing.
any advice is welcome, trying to understand jquery/ajax.
Two problems with your code:
The jquery selector isn't working. Correct is: 'a[class="approve-button"]'
The code should being wrapped within the jquery ready() function to make sure that the DOM (with the links) has already been loaded before the javascript code executes.
Here comes a working example:
$(function() { // wrap inside the jquery ready() function
//Attach an onclick handler to each of your buttons that are meant to "approve"
$('a[class="approve-button"]').click(function(){
//Get the ID of the button that was clicked on
var id_of_item_to_approve = $(this).attr("id");
$.ajax({
url: "votehandler.php", //This is the page where you will handle your SQL insert
type: "POST",
data: "id=" + id_of_item_to_approve, //The data your sending to some-page.php
success: function(){
console.log("AJAX request was successfull");
},
error:function(){
console.log("AJAX request was a failure");
}
});
});
});
Myproblem is when I click my first selectbox, after there is a value, it will trigger the second selectbox. I implement it in Ajax, but successfully render ,but my other textfield value is gone. How could I just render a specific part of the responde html(success ajax call)?
$(document).ready(function(){
if ($('#product_category').val() == 'Choose Category')
document.getElementById('product_subcategory').disabled = true;
$('#product_category').change(function () {
if ($('#product_category').val() == 'Choose Category')
document.getElementById('product_subcategory').disabled = true;
else
document.getElementById('product_subcategory').disabled = false;
data = $('#product_category').val();
//alert(data);
var param = 'category_name=' + data;
$.ajax({
url: MYURL,
data: param,
success: function(result) {
alert('Choose product subcategory');
alert(param);
$('body').html('');
$('body').html(result);
}
});
// window.location = MYURL?category_name="+data;
});
$('#product_subcategory').change(function () {
data = $('#product_subcategory').val();
// paramCategory = $(document).getUrlParam('category_name');
// alert(paramCategory);
$.get(MYURL, function(data){
alert("Data Loaded: " + data);
});
//window.location = MYURL?subcategory_name=" + data;
});
});
in my form, i use $_GET['category_name'] to get my value Ajax return value. I Debug in firebug, and it is successfully. I tried to render again the html, but my previous textarea's value and textfiel's value is gone since what i did is $('body').html(''); $('body').html(result);, So,how could I manage to get the success ajax return value, and use it in the PHP.
any confusion ,please tell me...
Thank you for spending ur time.
Hmm, I'm using a div and show the Div when it was return success ajax call.
the problem is here,
$('body').html('');
$('body').html(result);
you are blanking whole body and inserting new result. You have to change it to just
$('#second_select_box_id').html(result);
$('body').html('');
$('body').html(result);
This is emptying your page and inserting in it your result, I supose that what you really want to do is to load your second dropdown with the result, for that you'll need to do
$("#product_subcategory").html(result);
Of course, this will depend on what are your ajax function returning on result
You have two ways to do it.
Add the text from PhP while returning the data for Ajax call
Add the data back to the text box after loading the page..
data = $('#product_category').val();
//alert(data);
var param = 'category_name=' + data;
$.ajax({
url: MYURL,
data: param,
success: function(result) {
alert('Choose product subcategory');
alert(param);
$('body').html('');
$('body').html(result);
$('#product_category').val(data);
}
});
can you please try this
$(body).html('');
$(body).html(result);
I'm getting a weird result from a jQuery ajax request sending form details to a PHP script. The same scripts are used elsewhere problem free. Basically the form is submitted using jQuery.ajax like this:
//if submit button is clicked
$('#form1').submit(function () {
//Get the data from all the fields
var name = $('input[name=name]');
var email = $('input[name=email]');
var con_email = $('input[name=con_email]');
var comments = $('textarea[name=comments]');
//organize the data properly
var data = 'name=' + name.val() + '&email=' + email.val() + '&con_email=' + con_email.val() + '&comments=' + encodeURIComponent(comments.val());
//show the loading sign
$('.loading').show();
//start the ajax
$.ajax({
//this is the php file that processes the data and send mail
url: "process-email/process.php",
//GET method is used
type: "GET",
//pass the data
data: data,
//Do not cache the page
cache: false,
//success
success: function () {
//if process.php returned 1/true (send mail success)
if (html==1) {
//hide the form
$('.form').fadeOut('slow');
$('.done').delay(1000).fadeIn('slow');
}
}
});
//cancel the submit button default behaviours
return false;
});
The PHP script works fine, the email is sent and 1 is returned (email sent) but the script stops at: if(html==1). I get this error
html is not defined
As said above exactly the same script works fine somewhere else, but here I get that error and the script is stopped. Can someone please help to understand where there might be the problem?
You have to add the parameter reference:
success: function (html) {
//if process.php returned 1/true (send mail success)
//.....
}
Then you can use this parameter, which will be the response from server.
Check your success funcion, should be like:
success: function (response) {
//if process.php returned 1/true (send mail success)
if (response == "1") {
//hide the form
$('.form').fadeOut('slow');
$('.done').delay(1000).fadeIn('slow');
}
}
It looks like you are not returning the response from the PHP script to the JavaScript function. If you do something like the following for your success function it should get you on the right track:
success: function( html )
{
if(html=='1')
{
[...]
}
}