Zend Framework Ajax Link to work with jQuery Dialog Box - jquery-ui

Question

I have tried now the last 3 weeks to get a ajaxLink to work with a jQuery Dialog Box. I have a delete Bookmark Function and want that a dialog Box appears, where you have to confirm that you want to delete the Bookmark, before the Ajax Request is fired and deletes the Bookmark.
I assume that I have to add something to the beforeSend function, but I can not figure out what needs to be written in it. Could someone advice what I need to do? I hope someone knows the answer, I run out of ideas. Thank you very much in advance !
Here my sourcecode so far:
echo $this->ajaxLink("Remove Bookmark","/bookmark/remove/article ".$this->escape($entry->id),
array(
'id' => '',
'class' => 'btn orange delete dialog-confirm',
'dataType'=>'JSON',
'method' => 'post',
'update' => '.bookmark',
'beforeSend' => '????',
'complete' => '$("."+data+"").remove();if ($(".watchlist").length == 0){$(".watch").append("<p>No items watched</p>")}'
));
And my jQuery Dialog Box:
$('.dialog-confirm').click(function(e){
e.preventDefault();
var URL = $(this).attr("href");
$(this).css('display','block');
$('#dialogbox').dialog({
resizable: false,
height:180,
width:350,
modal: true,
closeOnEscape: true,
buttons: {
"Yes, delete bookmark": function() {
window.location.href = URL;
return true;
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});

Answer 1

Your Ajax request must be triggered only if a user click on the "Yes, delete bookmark" button. Therefore, you need to add to this button function a jQuery ajax function and remove your first ajaxLink().
//in your view.phtml
<div id="dialogbox" style="display:none">Do you really want to remove this bookmark?</div>
<span style="cursor:pointer" class="btn orange delete dialog-confirm" id="1">Remove Bookmark</span>
<?php $this->jQuery()->addOnload('
$(function() {
var id;
$("#dialogbox").dialog({
resizable: false,
height:180,
width:350,
modal: true,
buttons: {
"Yes, delete bookmark": function() {
$.ajax({
type: "POST",
url: "/bookmark/remove/article",
dataType: "json",
data: "id="+id,
success: function(data, textStatus, jqXHR) {
$("."+data+"").remove();
if ($(".watchlist").length == 0) {
$(".watch").append("<p>No items watched</p>")
}
}
});
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
$(".delete").click(function(e) {
id = this.id;
console.log(id);
$( "#dialogbox" ).dialog( "open" );
});
});
'); ?>
Now, if you click on Remove Bookmark, it displays a jQuery Dialog with two buttons: Cancel and "Yes, delete bookmark", and once you click on yes, it calls an jQuery.ajax function and send the id to /bookmark/remove/article as a parameter.