onload not working after AJAX call
Clash Royale CLAN TAG#URR8PPP
onload not working after AJAX call
So basically I have a an API call to OS Maps(UK map builder). As per their documentation I get it working and it displays perfectly, but its an onload event and I'm using ACF(advance custom fields) in WordPress to display a map based on the map name used in the custom field.
onload
The problem is the map loads when page loads, but the after my Ajax call when the custom map name is equal to amlwch it doesn't load.
amlwch
This happens because its an onload event and the Ajax obviously doesn't do a page reload, so I just don't know how to get a way around this.
onload
So how to get function working if Ajax call happens?
To put it short:
Ajax does not load page, so body onload won't be called after ajax call, what other option do I have to get it working?
php:
(check if custom field name, and then display function based on the name)
<!-- bodafon -->
<?php if( get_post_meta($postId,'route_map_name', true) == 'bodafon' ): ?>
<body onload="initmapbuilder()">
<div id="maproute" style=" width:100%; height:440px;"></div>
</body>
<!-- amlwch -->
<?php elseif( get_post_meta($postId,'route_map_name', true) == 'amlwch' ): ?>
<body onload="initmapbuilder1()">
<div id="maproute1" style=" width:100%; height:440px;"></div>
</body>
<?php endif; ?>
JS:
(AJAX, keep in mind it works and displays all data around this map its just the onload not working)
onload
/*Maps section ajax call*/
$(function()
$('#routes').on('change', function()
var that = $(this);
var post_id = that.attr('value');
// console.log(post_id);
$.ajax(
url:'../../wp-admin/admin-ajax.php', // admin-ajax.php will handle the request
type:'post',
data:
// this is the action hook to call the handler "MyAjaxFunction"
action: 'post_maps_items',
// pass some data to post variblr to use in php/wordpress (optional)
id: post_id, // you can retrieve this using $_POST['id'];
,
timeout : 10000,
success:function(data)
// returned data by wordpress
//console.log('Success');
// $('#load_map').html(data);
$('#title').html(data).hide().fadeIn("slow").addClass('flex');
);
$.ajax(
url:'../../wp-admin/admin-ajax.php', // admin-ajax.php will handle the request
type:'post',
data:
// this is the action hook to call the handler "MyAjaxFunction"
action: 'post_maps_items_info',
// pass some data to post variblr to use in php/wordpress (optional)
id: post_id, // you can retrieve this using $_POST['id'];
,
timeout : 10000,
success:function(data)
// returned data by wordpress
//console.log('Success');
$('#load_map').html(data);
// $('#title').html(data);
);
);
);
initmapbuilder1()
@emineminems thanks for response, well its based on what the custom field name is there is allot more than just this 2 , this is just as example.
– Ylama
Aug 8 at 7:35
2 Answers
2
$('#load_map').html(data);
This will remove all events inside "#load_map". Check if events are restored after this
hi @ShishirArora but im using that within the Ajax call it works, its the
onload event not happening after the AJAX thats not working , even tho it brings back the correct data , its just that after the AJAX call the page doesnt load, so the function in above php is not working then.– Ylama
Aug 8 at 7:33
onload
ajax does not load page, so body onload wont be called after ajax call
– Shishir Arora
Aug 8 at 7:38
correct , so i need to find a way around it?
– Ylama
Aug 8 at 7:39
So got this working using jquery method ajaxComplete , works:
ajaxComplete
So i removed the inline onload events.
onload
PHP:
<!-- bodafon -->
<?php if( get_post_meta($postId,'route_map_name', true) == 'bodafon' ): ?>
<body>
<div id="maproute" style=" width:100%; height:440px;"></div>
</body>
<!-- amlwch -->
<?php elseif( get_post_meta($postId,'route_map_name', true) == 'amlwch' ): ?>
<body>
<div id="maproute1" style=" width:100%; height:440px;"></div>
</body>
<?php endif; ?>
After each ajax call i call the functions which wil only show based on custom field name as can see above , as each function is based in an unique ID.
ID
Also i call my first function in .ready event so that it loads before any AJAC call happens.
.ready
Jquery:
$(document).ready(function()
if($("#maproute").length != 0)
initmapbuilder();
);
$(document).ajaxComplete(function()
initmapbuilder();
initmapbuilder1();
);
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
why not just call
initmapbuilder1()after ajax success– 95faf8e76605e973
Aug 8 at 7:26