How to prevent page refresh based on ajax results and dialog boxes

[Constantine AI]

Hi

I am trying to create a display of files / documents with the abilities to view and delete. I use jquery ui dialogs and ajax to delete the certain files (which works) However everytime the results are refreshed with the new data, when you click the next file to delete it does a page refresh and then works. Can someone please tell me how to prevent this from happening?

Here is my code;

First the javascript

<script type='text/javascript'>
$(document).ready(function()
{
    $.fx.speeds._default = 1000;
    $('a.confirmLink').bind('click',function(e)
    {
        var btnPrefix = 'confirmLink_';
        var docNum = $(this).attr('id').substring((btnPrefix.length));
        e.preventDefault();
        $('#dialog_' + docNum)
            .data('docNum', docNum)
            .dialog('open');
 
    });
 
    $( '[id^=dialog_]' ).dialog( 
    {
        autoOpen: false,
        closeOnEscape: true,
        open: function(event, ui) { $('.ui-dialog-titlebar-close').hide(); },
        draggable: false,
        resizable: false,
        position: 'center',
        show: {effect: 'drop', direction: 'up'},
        hide: {effect: 'drop', direction: 'down'},
        width: 360,
        modal: true,
        overlay: {
            backgroundColor: '#000',
            opacity: 0.8
        },
        buttons: 
        {
            'Confirm': function()
            {
                $( this ).dialog( 'close' );
                var docNum = $(this).data('docNum');
                var dataString = {'diaryID' : '".$diaryID."','docID' : docNum};
                $.ajax(
                {
                    type: 'POST',
                    url: '".AJAX."updateDocumentList.php',
                    data: dataString,
                    cache: false,
                    success: function(data) 
                    {
                        $('.document-list').html(data)
                    }
                });
            },
            Cancel: function()
            {
                $( this ).dialog( 'close' );
            }
        }
    });
});
</script>

Then the HTML

<div class="document-list">';
    if($this->getData('documentList'))
    {
        $content .= '
        <ul class="thumbnail-images">';
        foreach($this->getData('documentList') as $dbDocument)
        {
            $baseFileName = preg_replace('/(.*)\.([^.]+)$/','\\1',$dbDocument['documentName']);
            $extension = substr($dbDocument['documentName'], strrpos($dbDocument['documentName'], ".") + 1);
            $docThumbName = $baseFileName.'_thumb.'.$extension;
            $docMediumName = $baseFileName.'_medium.'.$extension;
            $content .= '
            <li>
                <a href="'.FILE_UPLOADS.$dbDocument['documentPath'].'/'.$dbDocument['revisionPath'].'/'.$docMediumName.'"><img src="'.FILE_UPLOADS.$dbDocument['documentPath'].'/'.$dbDocument['revisionPath'].'/'.$docThumbName.'" alt="'.$dbDocument['description'].'" /></a>
                <a id="confirmLink_'.$dbDocument['documentID'].'" class="confirmLink" href=""><img class="delete" src="'.ICON_IMAGES.'ico_cross.png" alt="Delete Image" /></a>
                <div id="dialog_'.$dbDocument['documentID'].'" title="<h2>Delete Confirmation</h2>">
                    <p>Are you sure you want to remove "'.$dbDocument['documentName'].'" from the system?</p>
                    <p class="bold">Image Preview:</p>
                    <img src="'.FILE_UPLOADS.$dbDocument['documentPath'].'/'.$dbDocument['revisionPath'].'/'.$docThumbName.'" alt="'.$dbDocument['description'].'" />
                </div>
            </li>';
        }
        $content .= '
        </ul>';
    }
    else
    {
        $content .= '
        <p class="no-evidence">No evidence has been added / uploaded to this daily diary</p>';
    }
$content .= '
</div>

I have tried numerous attempts with using return false and e.preventDefault(), i have tried replacing the a tag to just using img and yet still the same problem of page refreshing.

Any help would be greatly appreciated!

[Constantine AI]

Does anyone have any ideas with this post? I have tried many attempts to solve this issue and nothing has solved it!

[Constantine AI]

I have come back to this issue and still haven't found a solution. If anyone can help it will be hugely appreciated!

[Constantine AI]

Here is the ajax code:

    if(isset($_REQUEST['docID']))
    {
        $docID = $_REQUEST['docID'];
    }
    else
    {
        $docID = '';
    }
 
    if(isset($_REQUEST['diaryID']))
    {
        $diaryID = $_REQUEST['diaryID'];
    }
    else
    {
        $diaryID = '';
    }
 
    $Document = new Document();    
 
    if($docID)
    {
        $Document->deleteDocument($docID);
    }
    $documentList = $Document->getDocumentsByDiary($diaryID);
 
    if($documentList)
    {
        echo '
        <ul class="thumbnail-images">';
        foreach($documentList as $dbDocument)
        {
            $baseFileName = preg_replace('/(.*)\.([^.]+)$/','\\1',$dbDocument['documentName']);
            $extension = substr($dbDocument['documentName'], strrpos($dbDocument['documentName'], '.') + 1);
            $docThumbName = $baseFileName.'_thumb.'.$extension;
            $docMediumName = $baseFileName.'_medium.'.$extension;
            if($extension == 'jpg' || $extension == 'gif' || $extension == 'png')
            {
                echo '
                <li>
                    <a href="'.FILE_UPLOADS.$dbDocument['documentPath'].'/'.$dbDocument['revisionPath'].'/'.$docMediumName.'"><img src="'.FILE_UPLOADS.$dbDocument['documentPath'].'/'.$dbDocument['revisionPath'].'/'.$docThumbName.'" alt="'.$dbDocument['description'].'" /></a>
                    <a id="confirmLink_'.$dbDocument['documentID'].'" class="confirmLink" href=""><img class="delete" src="'.ICON_IMAGES.'ico_cross.png" alt="delete document" /></a>
                    <div id="dialog_'.$dbDocument['documentID'].'" title="<h2>Delete Confirmation</h2>" style="display:none;">
                        <p>Are you sure you want to remove "'.$dbDocument['documentName'].'"?</p>
                        <p>Image Preview:</p>
                        <img src="'.FILE_UPLOADS.$dbDocument['documentPath'].'/'.$dbDocument['revisionPath'].'/'.$docThumbName.'" alt="'.$dbDocument['description'].'" />
                    </div>
                </li>';
            }
        }
        echo '
        </ul>';
    }
    else
    {
        echo '
        <p>No evidence has been added / uploaded to this daily diary</p>';
    }

[Dormilich]

your AJAX URL looks strange, are you sure ".AJAX."updateDocumentList.php is correct?

[Constantine AI]

define('AJAX',                            SITE_URL.'library/ajax/');

Yeah the url is correct. It does post to the AJAX script, processes the info and returns to the div. Thanks for taking a look by the way!