У меня проблемы с использованием AJAX в Wordpress для получения HTML5 Геолокации и вывода в Google Maps Embed с использованием ajaxurl (admin-ajax.php).
До включения ajaxurl (admin-ajax.php) это работало (нажмите <a ...>Allow Location</a>), и была показана встроенная Карта Google с долготой и широтой), но я не смог заставить переменные долготы и широты перейти на php без использования ajaxurl (admin-ajax.php). Мне нужны переменные в PHP, чтобы я мог использовать их в других функциях / процессах.
ОБНОВЛЕНО
Я обновил код ниже с предложениями @Parthavi -Patel. Я не связал add_action( ..., 'audp_locate_book_request' ); включением $.ajax data { action: 'audp_locate_book_request', ... }. Приведенный ниже пример кода был обновлен, чтобы он был корректным и действующим.
CUSTOM-PLUGIN. PHP
public function audp_locate_book() {
$post = get_post();
if ( is_single('book') || ( is_single() && 'book' == $post->post_parent ) ) {
wp_enqueue_script (
'audp_locate_book',
plugin_dir_url( __FILE__ ) . 'js/audp-locate-book.js',
array('jquery'),
$this->version, // (Plugin uses Bootstrap)
true
);
wp_localize_script(
'audp_locate_book',
'audp_locate_book_obj',
array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) )
);
}
}
public function audp_locate_book_request() {
if ( isset ( $_REQUEST ) ) {
print_r( $_REQUEST );
$longitude = $_REQUEST['longitude'];
$latitude = $_REQUEST['latitude'];
}
wp_die();
}
/**
* Plugin uses bootstrap template. Alternatively you just use:
* add_action( 'wp_enequeue_scripts, 'audp_locate_book' );
* & repeat for other functions.
*/
$this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'audp_locate_book' );
$this->loader->add_action( 'wp_ajax_audp_locate_book_request', $plugin_public, 'audp_locate_book_request'); // Logged In
$this->loader->add_action( 'wp_ajax_nopriv_audp_locate_bookt_request', $plugin_public, 'audp_locate_book_request'); // Not Logged In
AUDP-LOCATE-BOOK. JS
(function($){
$(function() {
jQuery('a#geolocate').click(initiate_geolocation);
// Initiate Geolocation
function initiate_geolocation() {
navigator.geolocation.getCurrentPosition(geolocation_query,geolocation_errors);
}
// Output Geolocation
function geolocation_query(position){
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
$.ajax({
type: "POST",
url: audp_locate_book_obj.ajaxurl,
data: { action: 'audp_locate_book_request', longitude: position.coords.longitude, latitude: position.coords.latitude },
success: function(data) {
jQuery("a#geolocate").html("Location Recorded").attr("disabled", true);
jQuery("p#map").html('<iframe src="https://maps.google.com/maps?q=' + latitude + ',' + longitude + '&z=17&output=embed" width="100%" height="170" frameborder="0" style="border:0"></iframe>');
console.log("Log: " + longitude + " & " + latitude);
}
});
}
// Geolocation Errors
function geolocation_errors(error) {
switch(error.code) {
case error.PERMISSION_DENIED: alert("Location denied by user.");
break;
case error.POSITION_UNAVAILABLE: alert("Location could not be detected.");
break;
case error.TIMEOUT: alert("Location request timed out.");
break;
default: alert("Unknown error.");
break;
}
}
});
})(jQuery);
В Chrome Консоли возникла ошибка:
(x) POST: mydomain.com/wp-admin/admin-ajax.php [400]
send @ jquery.js?ver=1.12.4-wp:4
ajax @ jquery.js?ver=1.12.4-wp:4
geolocation_query @ audp-locate-book.js?ver=1.0.0:23
Строка: 23 Относится к:
23: $.ajax({
24: type: "POST",
25: url: audp_locate_book.ajaxurl,
... etc
SINGLE-POST-TYPE. PHP
<!-- Relevant Code -->
<a onClick="javascript:void(0);" id="geolocate" class="button primary expand" >Allow Location</a>
<p style="text-align: justify; font-size: 9.5pt;" id="map"></p> <!-- Map No Longer Shows Here -->
<!-- End Relevant Code -->
В конечном счете, моя цель состоит в том, чтобы отобразить карты Google с внедренной долготой / широтой, а также сделать долготу и широту PHP переменная ($longitude, $latitude), как мне требуется для других php функций на странице.