Opening multiple jQueryUI dialogs - jquery-ui

Question

I wish to open multiple jQuery dialogs, one after the other. But only the first one opens.
jsFiddle
Dlg 1 -- Presents a YES / NO question.
Dlg 2 -- If YES, stick the word "go" into the hidden field id="frmtrig" and then trigger a change event. When this event is caught, it runs AJAX to populate the $('#message') div with html received via ajax success function, and then displays that in a dialog.
Dlg 3 -- After closing, present one final dialog.
Below code breaks at step 2. The alert('bonk') doesn't even happen...
I also deleted everything between alert('bonk') and the closing } of the success function, and the bonk alert still does not display. Can anyone spot a problem with my AJAX code?
Oddly, I've done a ton of (relatively simple) AJAX, so I'm puzzled that I'm getting stuck here. Note that it might be necessary to copy/paste my code blocks into two or 3 files on your own server to test this out, since jsFiddle won't work for troubleshooting AJAX.
I have been unsuccessful finding an example of doing this, and my own efforts over the past two days have not worked.
HTML
<div id="hot_link">Hover over this line to begin it all</div>
<div id="message"></div>
<div id="alert"></div>
<input type="hidden" id="frmtrig">
JAVASCRIPT
$(function(){
var cnt = 0;
var ans = 0;
var seen = 0;
var dlg = $('#message');
dlg.dialog({
title: '"The Big Test',
autoOpen:false,
modal:true,
width: 500,
close: function() {
if (seen==0 && ans > 0) {
cnt++;
seen++;
dlg.dialog('open');
}
}
});
$('#hot_link').hover(
function() {
//Hover-in
if (cnt < 1 || (cnt % 3 == 0)) {
var msg = '<p>If you say NO, the Dialog will just close. If you press YES, an AJAX call will happen.</p>';
dlg.html(msg);
dlg.dialog(
'option',
'buttons',
[{
text: 'Download',
click: function() {
ans++;
//seen = 5;
$('#frmtrig').val('go').change();
$(this).dialog('close');
}
},
{
text: 'Not now',
click: function() {
ans = 0;
$(this).dialog('close');
}
}]
);
dlg.dialog('open');
//alert('hi');
}
cnt++;
},
function() {
//Hover-out
//need this one to prevent duplicating hover-in code
}
);
$('#frmtrig').change(function() {
alert('boink');
$.ajax({
type: "POST",
async: false,
url: "ajax/ax_all_ajax_fns.php",
data: 'request=freegive_99',
success:function(data){
alert('bonk');
alert(data);
var dlg = $('#message');
alert('me be here');
dlg.html(data);
dlg.dialog(
'option',
'buttons',
[{
text: 'OK',
click: function() {
$(this).dialog('close');
}
}]
);
dlg.dialog('open');
}
});
});
}); //END document.ready
AX_ALL_AJAX_FNS.PHP
if ($_POST['request'] == 'freegive_99') {
echo 'THIS_LINE_WORKS';
}

Answer 1

I have tried your code on my machine and it is working fine.
If the second dialog is not opened, it means that success in your ajax request is not reached.
Are you sure that the problem doesn't come from a wrong path?
url: "ajax/ax_all_ajax_fns.php", // Check this path