jquery mobile dialog does not show - jquery-mobile

Question

Hi I have the following page
<div data-role="page" id="blockedusers">
<?php
include 'homeheader.php';
?>
<div data-role="header">
Log Uit
<h1>Blocklijst</h1>
</div><!-- /header -->
<div data-role="content">
<div class="grid_outer" id="grid_outer_blocklist" style="width: 295px; margin-left: auto; margin-right: auto;">
<div class="grid_inner" id="grid_inner_blocklist">
<h2 class="h2_header">Geblokkeerde gebruikers</h2>
<?php
show_blocked_users($blockedusers);
?>
</div>
</div>
</div>
<div data-role="navbar">
<ul>
<li>
terug
</li>
</ul>
</div><!-- /navbar -->
<div data-role="footer">
<h4>Blocklijst</h4>
</div>
</div><!-- /content -->
<div data-role="dialog" id="confirmbox">
<div data-role="header" data-icon="false">
<h1>Bevestig</h1>
</div><!-- /header -->
<div data-role="content">
<h3 id="confirmMsg">Bevestig</h3>
<br>
<center>
Yes
No
</center>
</div>
</div>
And I have the following javascript in an external js file
$(document).on('pagebeforeshow', '#blockedusers', function() {
alert('pagebeforeshow blockedusers');
$('[id=unblocklink]').click(function(e) {
e.preventDefault();
var userid = $(this).attr('userid');
alert('unblocklink clicked userid ' + userid);
showConfirm("Weet je zeker dat je deze gebruiker wilt deblokkeren?", function() {
$.ajax({
async : false,
url : "../php/process_unblock_user.php?userid=" + userid,
success : function(data) {
if (data != "") {
// in case of error
alert(data);
} else {
alert("Gebruiker gedeblokkeerd!");
window.location.reload(true);
}
}
});
});
});
// confirm dialog
function showConfirm(msg, callback) {
alert('showing dialog1');
$("#confirmMsg").text(msg);
$("#confirmbox .btnConfirmYes").on("click.confirmbox", function() {
$("#confirmbox").dialog("close");
callback();
});
$("#confirmbox .btnConfirmNo").off("click.confirmbox", function(r) {
});
alert('showing dialog2');
$.mobile.changePage('#confirmbox', {
allowSamePageTransition : true
});
}
});
The problem is, the confirmdialog never shows (???). I added the javascript on the same page but then I have issues with the unblocklink.

Answer 1

Ok I found a solution to fix the issue:
When navigating to the blockedusers page from the home page, I need to do it the following way:
$('#blockedusers').click(function(e) {
window.location.href = "blockedusers.php";
});
Only then the confirmbox is available in the DOM.
This does not work:
$.mobile.changePage('blockedusers.php');
Hope this solution helps more people out.