php call function using jquery ajax - php

Question

I want to show qrcode on my page, but for performance reasons, I don't want my page loads the qrcode on page load. I put qrcode on bootstrap5 modal box and I want load qrcode when user clicks on the modal botton.
This is my code:
function qrcode($page_id) {
$url = DOMAIN.DS.$page_id;
$size = '256x256';
$color = '000000'; //RGB code without #
$bgcolor = 'ffffff'; //RGB code without #
$margin = '1px';
$width = '36px';
$height = '36px';
if (is_file(FILE.'image'.DS.'icon'.DS.'system'.DS.'qrcode.jpg')) {
$qrthumb = DOMAIN.DS.'file'.DS.'image'.DS.'icon'.DS.'system'.DS.'qrcode.jpg';
} else {
$qrthumb = $qrsrc;
}
$qrcode = '<a href="#" data-bs-toggle="modal" data-bs-target="#qrcode'.$page_id.'">
<img width="'.$width.'" height="'.$height.'" src="'.$qrthumb.'" alt="Scan QR-Code" title="Scan QR-Code" />
</a>
<div class="modal" id="qrcode'.$page_id.'">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body tcenter">
<div id="showqrcode"></div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#showqrcode").on("onload", function () {
$.ajax({
type: "POST",
url: "",
success:function(data){
$("#showqrcode").html(data);
}
});
});
});
</script>
';
return $qrcode;
}
function getqrcode($url,$size,$color,$bgcolor,$margin) {
$qrsrc = 'http://api.qrserver.com/v1/create-qr-code/?data='.$url.'&size='.$size.'&color='.$color.'&bgcolor='.$bgcolor.'&margin='.$margin;
$qrimage = '<img width="256px" height="256px" src="'.$qrsrc.'" alt="Scan QR-Code" title="Scan QR-Code" />';
return $qrimage;
}
I want when modal is loading and showing , function getqrcode runs and return the <img...
Thank you