I have a function in my Wordpress that regenerate Google Map.
What I want to achieve is to get some markers from my WP, then add them to DIV and generate from them map again.
For regenerating I'm using simple function with magic name "regenerate_map()" :) .
jQuery(".gmaps-button").click(function(){
jQuery.ajax({
type: "POST",
//contentType: "application/json; charset=utf-8",
dataType: "text",
url: myAjax.ajaxurl,
data : {action: "jv_get_map_data", ids : 1},
//data: dataString,
action: 'jv_get_map_data',
beforeSend: function() {
//jQuery('#contact-form #err2').html('').hide();
//jQuery(".submit").html("proszę czekać").addClass('loading');
},
success: function(text) {
jQuery('#gmaps-markers').html(text);
console.log(text);
regenerate_map();
}
});
return false;
});
The main problem is that function regenerate_map() is not working.
I get "ReferenceError: regenerate_map is not defined".
This is not true, because, I have other button, which is a trigger for click() and it uses this function also and it works.
I think that is something wrong with executing other function in AJAX request, but console.log and alert() works.
I thought that problem can be with what I get as "text" but I have checked that even if I get nothing, problem exists too.
Maybe some security issue?
Can somebody tell me why and what to do to achieve what I need?
your regenerate_map() function should be like this.
<script>
jQuery(document).ready(function() {
jQuery("#p_button").click ( function () {
console.log("button got clicked");
var donor_data= [ "12","13","14" ];
var damount = 1234;
var donor_obj = {
id : donor_data,
amnt : damount,
};
jQuery.ajax({
type:"POST",
//dataType : "json",
url: "<?php echo admin_url( 'admin-ajax.php' );?>",
data: { action : "ajx_add_donations",
'donors' : JSON.stringify(donor_obj),
},
success:function(response){
console.log("success " ,response);
//console.log("success " + JSON.parse(response));
//jQuery("#d_amount").val(donor_data[0]);
//jQuery("#p_button").text("brrr");
regenerate_map();
},
error: function(response) {
console.log("error" + response);
},
});
});
});
function regenerate_map(){
alert("test");
}
</script>
Related
I'm calling php file through ajax call and if it returns nothing i want to redirect user to another page (It's for error reports, if it doesn't return anything it means that user logged in). Tried to add error section but it doesn't work. Any suggestions will help. Thanks! Btw, I have small jQuery function at the top of the ajax function, why it breaks my whole ajax call?
ajax.js
function loginAjax() {
//$("#email_errors").empty(); //This function doesnt work and kills whole ajax call. Here is loginAjax function call line - <button type = "submit" id = "push_button" onclick = "loginAjax(); return false">PushMe</button>
$.ajax({
url: "Classes/call_methods_login.php",
type: "POST",
dataType: "json",
data: {
login_email: $("#login_email").val(),
login_password: $("#login_password").val(),
},
success: function(data) {
$("#login_error").html(data.login_message);
}
});
}
$.ajax({
url: "Classes/call_methods_login.php",
type: "POST",
dataType: "json",
data: {
login_email: $("#login_email").val(),
login_password: $("#login_password").val(),
},
success: function(data) {
$("#login_error").html(data.login_message);
},
error: function(){
window.location.replace("http://stackoverflow.com");
}
});
}
To redirect using javascript all you need to do is override the location.href attribute.
function loginAjax() {
$.ajax({
url: "Classes/call_methods_login.php",
type: "POST",
dataType: "json",
data: {
login_email: $("#login_email").val(),
login_password: $("#login_password").val(),
},
// the success method is deprecated in favor of done.
done: function(data) {
$("#login_error").html(data.login_message);
},
fail: function(data) {
location.href="path/to/error/page";
}
});
}
in my application I have to make an ajax call to php file.it works proper in all devices. but when I tried it on ipad mini it not calls the php, so that the functionality not works, I've seen so many question about this problem and edited my code like this.
jQuery.ajax({
type: "POST",
async: true,
cache: false,
url: "directory/phpfile.php",
data: data,
success: function(response) {
}
});
my old code is
jQuery.ajax({
type: "POST",
url: "wp-admin/admin-ajax.php",
data: data,
success: function(response) {
}
});
and the problem still cant resolve . so please any one tell me how to resolve this.
Please use this code
$("#ajaxform").submit(function(e)
{
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax(
{
url : formURL,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
//data: return data from server
},
error: function(jqXHR, textStatus, errorThrown)
{
//if fails
}
});
e.preventDefault(); //STOP default action
e.unbind(); //unbind. to stop multiple form submit.
});
$("#ajaxform").submit(); //Submit the FORM
<script type='text/javascript'>
$(document).ready(function startAjax() {
$.ajax({
type: "POST",
url: "test.php",
data: "name=name&location=location",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
});
When using jQuery to make an AJAX call, for the time being I want to just want to have a popup box (using alert()) showing me the response text.
$(document).ready(function() {
$(".jeobutton").mouseup(function() {
var $button = $(this);
$.ajax({ url: 'getdata.php',
data: // <parameters>
type: 'get',
dataType: 'json',
success: function(output) {
// do something
},
error: function(xhr) {
alert("<some error>");
console.error(xhr.responseText);
}
});
});
});
The response text prints out fine. However, the alert() dialog is nowhere to be found.
Please help this poor noob.
Here is a jsfiddle with something very close to your code, working, the alert box pops up.
http://jsfiddle.net/pN869/
$(document).ready(function() {
$(".jeobutton").mouseup(function() {
console.log("clicked");
var $button = $(this);
$.ajax({ url: 'getdata.php',
type: 'get',
dataType: 'json',
success: function(output) {
console.log("success");
},
error: function(xhr) {
alert("<some error>");
console.error(xhr.responseText);
}
});
});
});
Clean the browser cache. There will likely be branded the option of not showing more alert.
Testing in different browsers.
I hope that is helpful.
I have the following span:
<span class='username'> </span>
to populate this i have to get a value from PHP therefor i use Ajax:
$('.username').html(getUsername());
function getUsername(){
$.ajax({
type: 'POST',
url: myBaseUrl + 'Profiles/ajax_getUsername',
dataType: 'json',
data: {
},
success: function(data){
document.write(data);
}
})
}
Now when i debug i see that the returned data (data) is the correct value but the html between the span tags stay the same.
What am i doing wrong?
Little update
I have tried the following:
function getUsername(){
$.ajax({
type: 'POST',
url: myBaseUrl + 'Profiles/ajax_getUsername',
dataType: 'json',
data: {
},
success: function(data){
$('.username').html('RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRr');
}
})
}
getUsername();
Still there is no html between the tags (no text) but when i look at the console the method is completed and has been executed.
Answer to the little update
The error was in my Ajax function i forgot to print the actual response! Thank you for all of your answers, for those of you who are searching for this question here is my Ajax function:
public function ajax_getUsername(){
if ($this->RequestHandler->isAjax())
{
$this->autoLayout = false;
$this->autoRender = false;
$this->layout = 'ajax';
}
print json_encode($this->currentClient['username']);
}
Do note that i am using CakePHP which is why there are some buildin methods. All in all just remember print json_encode($this->currentClient['username']);
The logic flow of your code is not quite correct. An asynchronous function cannot return anything as execution will have moved to the next statement by the time the response is received. Instead, all processing required on the response must be done in the success handler. Try this:
function getUsername() {
$.ajax({
type: 'POST',
url: myBaseUrl + 'Profiles/ajax_getUsername',
dataType: 'json',
data: { },
success: function(data){
$('.username').html(data); // update the HTML here
}
})
}
getUsername();
Replace with this
success: function(data){
$('.username').text(data);
}
In success method you should use something like this:
$(".username").text(data);
You should set the html in callback
function getUsername() {
$.ajax({
type: 'POST',
url: myBaseUrl + 'Profiles/ajax_getUsername',
dataType: 'json',
data: {
},
success: function(data){
$('.username').html(data);
}
})
}
Add a return statement for the function getUsername
var result = "";
$('.username').html(getUsername());
function getUsername(){
$.ajax({
type: 'POST',
url: myBaseUrl + 'Profiles/ajax_getUsername',
dataType: 'json',
data: {
},
success: function(data){
document.write(data);
result = data;
}
})
return result;
}
You can use .load()
Api docs: http://api.jquery.com/load/
In your case:
$('.username').load(myBaseUrl + 'Profiles/ajax_getUsername',
{param1: value1, param2: value2});
I do an ajax call to get a list of all elements, say Products and populate them in a table with checkboxes. Then I make another ajax call to get which products were already selected and select them. This works in all browsers except ie. Am I doing something wrong?
$.ajax({
url : "${product_category_url}",
data : {"orgID":"${globalOrganisation.id}"},
dataType : "html",
statusCode: {
401: function() {
$('.ui-tabs-panel:visible').html("${ajax_session_expired}");
}
},
success : function(data) {
$("#productCategoryContainer").html(data);
$.ajax({
url: "${get_taggedProd_url}",
data: {"questionnaireId":_questionnaireId},
dataType: "json",
success: function(data){
var productIds = data.products;
$.each(productIds,function(index,value){
var obj = $('input[name="'+value+'"]');
obj[0].checked = true
selectRow(obj[0]);
});
}
});
}
});
This is due to caching by IE.
Please try this
$.ajax({
url : "${product_category_url}",
data : {"orgID":"${globalOrganisation.id}"},
dataType : "html",
statusCode: {
401: function() {
$('.ui-tabs-panel:visible').html("${ajax_session_expired}");
}
},
success : function(data) {
$("#productCategoryContainer").html(data);
$.ajaxSetup ({
// Disable caching of AJAX responses
cache: false
});
$.ajax({
url: "${get_taggedProd_url}",
data: {"questionnaireId":_questionnaireId},
dataType: "json",
success: function(data){
var productIds = data.products;
$.each(productIds,function(index,value){
var obj = $('input[name="'+value+'"]');
obj[0].checked = true
selectRow(obj[0]);
});
}
});
}
});
and if you need more details please look into this
The thing in this code that always screws me up is trying to get the check box selected. Make sure obj[0].checked = true actually works.