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);
             }   
   });

});

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!