full calendar + jquery ui dialogue

Question

I am using a fullcalendar:- http://arshaw.com/fullcalendar/

and I am using jquery .post to get a parameter back to the same page to generate some result, and this is working well.

At the same time, I wish to use jquery ui dialogue to hold the displayed contents. While pasting the sample codes from official site, the example works. However, when combining the .post output with dialogue, it was not successful.

I would like to seek help in combining the below 2 sets of scripts:-

//for generating .post output (working!)

<script>
function event_details(thevalue){
$.post('module/calendar/event_details.php',{
eid:thevalue},

function(output){
    $('#theeventmsg').html(output);
});
}
</script>
<div id='theeventmsg'></div>

//jquery ui dialogue (working!)

<script>
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
    $( "#dialog" ).dialog({
        autoOpen: true,
        show: "blind",
        hide: "explode"
    });

    $( "#opener" ).click(function() {
        $( "#dialog" ).dialog( "open" );
        return false;
    });
});
</script>



<div class="demo">
<div id="dialog" title="Basic dialog">
    <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
</div><!-- End demo -->

Can help??? Thanks a lot!!

Answer 1

Try something like this:

<script>
  $.fx.speeds._default = 1000;

  $(document).ready(function() {
    $( "#dialog" ).dialog({ autoOpen: false });

    $('#button').click(function () {
      var data = { ... };

      $.post('module/calendar/event_details.php', data, function (output) {
        $('#dialog p').html(output);
        $( "#dialog" ).dialog("open");
      });
    });
  });
</script>    

<div id="dialog">
  <p>content</p>
</div>

<button id="button">button</button>

Or:

<script>
  $(document).ready(function () {
    function eventdetail(thevalue) {
      $.post('event_details.php', { eid: thevalue }, function (output) {
        $('#dialog p').html(output);
        $("#dialog").dialog({ autoOpen: true });
      });
    }

    $('#button').click(function () { eventdetail('value'); });
  });  
</script>

<div id="dialog">
  <p>content</p>
</div>

<button id="button">button</button>