How to run AJAX request with no conflict? - wordpress

Question

I have a function in functions.php file that makes json request. This is how I am calling this function:
define('IS_AJAX_REQUEST', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
if (IS_AJAX_REQUEST){
loadmore();
}
Above code works just fine, but the problem is it conflicts with other AJAX request, for example, I see error message saying cannot execute loadmore() when I try to upload an image.
I tried following but none worked.
if (IS_AJAX_REQUEST && is_page()){
loadmore();
}
+
if (is_page()){
if (IS_AJAX_REQUEST){
loadmore();
}
}
+
if (IS_AJAX_REQUEST){
if (is_page()) loadmore(); }
}
And here is the loadmore function
function loadmore(){
header('Content-type: application/json');
echo json_encode (array ('rsp'=>'ok',
'payload'=> DrawPostList($_GET['tribe'], $_GET['offset']),
'lionly'=> true,
'tribe'=> $_GET['tribe'],
'offset'=> $_GET['offset']+20));
exit;
}
I only wanna execute loadmore() function when viewing a page. How can I do that ?

Answer 1

<?php
add_action( 'wp_head', 'my_action_javascript' );
function my_action_javascript() {
is_page() { // load script only on pages
?>
<script type="text/javascript" >
function loadmore() {
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
jQuery.ajax({
type: "POST",
url: ajaxurl,
data: { action : 'loadmore_trigger', var1 : 'test', var2 : 'one more' }
})
}.done(function( response ) {
alert(response);
}
</script>
<?php
}
}
add_action('wp_ajax_nopriv_loadmore_trigger', 'loadmore_trigger');
add_action('wp_ajax_loadmore_trigger', 'loadmore_trigger');
function loadmore_trigger(){
echo "<pre>";
print_r($_POST);
exit;
}
?>
<input type="submit" onclick="loadmore(); return false;"> // make ajax call on click of submit button