February 27, 2013
need to call ajax function from inside jquery modal dialog box
Question by vinylDeveloper
I have a dialog box that loads from an ajax call.. It works good. I want to have a link inside my dialog box that updates a DB and loads the results via ajax to the parent page, without my dialog closing. Is this even possible? Here is what I have so far.
This is what my parent page called deals_calendar.php looks like. The ajax call works fine and opens a dialog box that is loaded with content from get_deals.php.
<script type="text/javascript">
$("#calendar td").on('click', function() {
var data = $(this).data();
$.ajax({
type:"GET",
url: "get_deals.php",
data: { monthID: data.month, dayID: data.day, yearID: data.year },
success: function(data){
var title = $( "#dialog" ).dialog( "option", "title", "Deals" );
$('#dialog').dialog({
open: function (event, ui){
$('a').blur();
$(this).scrollTop(0);
}
});
$("#dialog").html(data).dialog("open");
}
});
$("#dialog").dialog(
{
bgiframe: true,
autoOpen: false,
height: 450,
width:900,
modal: false,
closeOnEscape: true
}
);
});
</script>
<div id="dialog" title="Dialog Title"> </div>
<div id="return"></div>
Then in my get_deals.php script I have this
<script type="text/javascript">
$('#click').live('click', function(){
$.ajax({
type:"POST",
url: "deals_add_to_queue.php",
data: { monthID: data.month, dayID: data.day, yearID: data.year },
success: function(data){
alert("Please work!");
("#return").html(data);
}
});
});
</script>
<a id="click" href="#">click me</a>
I can’t get this ajax call to fire and update the content on deals_calendar.php. Any help would be great. thanks
Answer by Starx
If the event is not being fired, you need to use event delegation.
$('body').on('click', '#click' function(){
$.ajax({
type:"POST",
url: "deals_add_to_queue.php",
data: { monthID: data.month, dayID: data.day, yearID: data.year },
success: function(data){
alert("Please work!");
("#return").html(data);
}
});
});