In one file (test_ajax.php) I have a which on change loads another page (registration_form_race_type.php) with a short message via jQuery Ajax(). It works fine when “test_ajax.php” is accessed via its absolute URL which is :
http://46.20.119.207/~asuntosf/wordpress_test/wp-content/themes/test_ajax/test_ajax.php
But amazingly enough, the Ajax functionality ceases to work if the exact same page “test_ajax.php” is accessed via its WordPress address which is :
http://46.20.119.207/~asuntosf/wordpress_test/?page_id=13
I insist these both URLs point to the same two PHP files.
Here is the code of “test_ajax.php” :
<?php
/*
Template Name: Page Test Ajax 01
*/
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript">
jQuery(function () {
jQuery('#event_id_from_list').change(function() {
var event = jQuery("#event_id_from_list").val();
var data = "event_id=" + event;
jQuery.ajax({
url: 'registration_form_race_type.php',
type: 'GET',
data: data,
success: function(data){
jQuery('#div_race_type').html(data);
}
});
});
});
</script>
</head>
<body>
<select class='required' type="text" name="event_id_from_list" id="event_id_from_list" />
<option value='Paris'>Paris</option>
<option value='London'>London</option>
<option value='Rome'>Rome</option>
</select>
<div id='div_race_type' class='section'>
<?php require_once('registration_form_race_type.php'); ?>
</div>
</body>
<html>
And the code of the page called via Ajax, “registration_form_race_type.php” :
<?php if (isset($_GET['event_id'])) echo 'you selected '.$_GET['event_id']; ?>
I advice to use the wp built-in ajax. it allows avoiding many problems and brings many benefits.
an example that I wrote to illustrate the 2 approches:
Dynamically changing navigation links (next and previous) via AJAX
I am here to provide with explanations
good luck