AJAX fails only inside JQuery dialog box

How it works

  1. I have a page called displayRecord.php which is loaded inside a
    JQuery dialog box. The dialog box is created inside editTicket.php

  2. Basically the displayRecord.php allows a user to add a username &
    ref id and via AJAX $.post it updates the DB and retrieves the
    number of record in the respective table.

  3. The retrieve counter step is also meant to occur on page load so
    that not only is it displayed when the user adds the username &
    password but when the page loads for the first time.

What’s failing to work

Step 3 above fails when the displayRecord.php page is inside the JQuery dialog (or atleast thats what I’ve discovered). If I go to the URL it displays the counter on load. Step 2 still works inside the dialog.

JQuery dialog box call from editTicket.php:

<script type="text/javascript">

var dlg = '';
$(document).ready(function() { 

        title: 'TICKET DETAILS',
        resizable: false,
        modal: true,
        hide: 'fade',
        buttons:{ "Close": function() { dlg.dialog("close"); } },
        close: function(e, i) { dlg.hide(); },
        width: 1300   


                dlg.load('displayRecord.php?id='+this.id, function(){ 



calling the showCount function on load:

<?php if (@$data['escalate'] == "No"){ ?>
        <body onLoad="showCount()">
<?php } else{ ?>
    <?php } ?>

showCount function:

function showCount(){

    var ticket_id = <?php echo $data['id']; ?>

    function(data) {

As state before the on page load function doesn’t appear to be firing inside the JQuery dialog box.

I’m struggling at this point to identify the source of the problem. Some help please, Thanks.

Leave a Reply


Hire Me
Follow Me!
Most Popular Articles & Pages
Because your vote is Important
Sorry, there are no polls available at the moment.