By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
460,045 Members | 1,367 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 460,045 IT Pros & Developers. It's quick & easy.

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

100+
P: 129
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

Expand|Select|Wrap|Line Numbers
  1. <script type='text/javascript'>
  2. $(document).ready(function()
  3. {
  4.     $.fx.speeds._default = 1000;
  5.     $('a.confirmLink').bind('click',function(e)
  6.     {
  7.         var btnPrefix = 'confirmLink_';
  8.         var docNum = $(this).attr('id').substring((btnPrefix.length));
  9.         e.preventDefault();
  10.         $('#dialog_' + docNum)
  11.             .data('docNum', docNum)
  12.             .dialog('open');
  13.  
  14.     });
  15.  
  16.     $( '[id^=dialog_]' ).dialog( 
  17.     {
  18.         autoOpen: false,
  19.         closeOnEscape: true,
  20.         open: function(event, ui) { $('.ui-dialog-titlebar-close').hide(); },
  21.         draggable: false,
  22.         resizable: false,
  23.         position: 'center',
  24.         show: {effect: 'drop', direction: 'up'},
  25.         hide: {effect: 'drop', direction: 'down'},
  26.         width: 360,
  27.         modal: true,
  28.         overlay: {
  29.             backgroundColor: '#000',
  30.             opacity: 0.8
  31.         },
  32.         buttons: 
  33.         {
  34.             'Confirm': function()
  35.             {
  36.                 $( this ).dialog( 'close' );
  37.                 var docNum = $(this).data('docNum');
  38.                 var dataString = {'diaryID' : '".$diaryID."','docID' : docNum};
  39.                 $.ajax(
  40.                 {
  41.                     type: 'POST',
  42.                     url: '".AJAX."updateDocumentList.php',
  43.                     data: dataString,
  44.                     cache: false,
  45.                     success: function(data) 
  46.                     {
  47.                         $('.document-list').html(data)
  48.                     }
  49.                 });
  50.             },
  51.             Cancel: function()
  52.             {
  53.                 $( this ).dialog( 'close' );
  54.             }
  55.         }
  56.     });
  57. });
  58. </script>
Then the HTML

Expand|Select|Wrap|Line Numbers
  1. <div class="document-list">';
  2.     if($this->getData('documentList'))
  3.     {
  4.         $content .= '
  5.         <ul class="thumbnail-images">';
  6.         foreach($this->getData('documentList') as $dbDocument)
  7.         {
  8.             $baseFileName = preg_replace('/(.*)\.([^.]+)$/','\\1',$dbDocument['documentName']);
  9.             $extension = substr($dbDocument['documentName'], strrpos($dbDocument['documentName'], ".") + 1);
  10.             $docThumbName = $baseFileName.'_thumb.'.$extension;
  11.             $docMediumName = $baseFileName.'_medium.'.$extension;
  12.             $content .= '
  13.             <li>
  14.                 <a href="'.FILE_UPLOADS.$dbDocument['documentPath'].'/'.$dbDocument['revisionPath'].'/'.$docMediumName.'"><img src="'.FILE_UPLOADS.$dbDocument['documentPath'].'/'.$dbDocument['revisionPath'].'/'.$docThumbName.'" alt="'.$dbDocument['description'].'" /></a>
  15.                 <a id="confirmLink_'.$dbDocument['documentID'].'" class="confirmLink" href=""><img class="delete" src="'.ICON_IMAGES.'ico_cross.png" alt="Delete Image" /></a>
  16.                 <div id="dialog_'.$dbDocument['documentID'].'" title="<h2>Delete Confirmation</h2>">
  17.                     <p>Are you sure you want to remove "'.$dbDocument['documentName'].'" from the system?</p>
  18.                     <p class="bold">Image Preview:</p>
  19.                     <img src="'.FILE_UPLOADS.$dbDocument['documentPath'].'/'.$dbDocument['revisionPath'].'/'.$docThumbName.'" alt="'.$dbDocument['description'].'" />
  20.                 </div>
  21.             </li>';
  22.         }
  23.         $content .= '
  24.         </ul>';
  25.     }
  26.     else
  27.     {
  28.         $content .= '
  29.         <p class="no-evidence">No evidence has been added / uploaded to this daily diary</p>';
  30.     }
  31. $content .= '
  32. </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!
Jun 15 '11 #1
Share this Question
Share on Google+
5 Replies


100+
P: 129
Does anyone have any ideas with this post? I have tried many attempts to solve this issue and nothing has solved it!
Jul 6 '11 #2

100+
P: 129
I have come back to this issue and still haven't found a solution. If anyone can help it will be hugely appreciated!
Dec 22 '11 #3

100+
P: 129
Here is the ajax code:

Expand|Select|Wrap|Line Numbers
  1.     if(isset($_REQUEST['docID']))
  2.     {
  3.         $docID = $_REQUEST['docID'];
  4.     }
  5.     else
  6.     {
  7.         $docID = '';
  8.     }
  9.  
  10.     if(isset($_REQUEST['diaryID']))
  11.     {
  12.         $diaryID = $_REQUEST['diaryID'];
  13.     }
  14.     else
  15.     {
  16.         $diaryID = '';
  17.     }
  18.  
  19.     $Document = new Document();    
  20.  
  21.     if($docID)
  22.     {
  23.         $Document->deleteDocument($docID);
  24.     }
  25.     $documentList = $Document->getDocumentsByDiary($diaryID);
  26.  
  27.     if($documentList)
  28.     {
  29.         echo '
  30.         <ul class="thumbnail-images">';
  31.         foreach($documentList as $dbDocument)
  32.         {
  33.             $baseFileName = preg_replace('/(.*)\.([^.]+)$/','\\1',$dbDocument['documentName']);
  34.             $extension = substr($dbDocument['documentName'], strrpos($dbDocument['documentName'], '.') + 1);
  35.             $docThumbName = $baseFileName.'_thumb.'.$extension;
  36.             $docMediumName = $baseFileName.'_medium.'.$extension;
  37.             if($extension == 'jpg' || $extension == 'gif' || $extension == 'png')
  38.             {
  39.                 echo '
  40.                 <li>
  41.                     <a href="'.FILE_UPLOADS.$dbDocument['documentPath'].'/'.$dbDocument['revisionPath'].'/'.$docMediumName.'"><img src="'.FILE_UPLOADS.$dbDocument['documentPath'].'/'.$dbDocument['revisionPath'].'/'.$docThumbName.'" alt="'.$dbDocument['description'].'" /></a>
  42.                     <a id="confirmLink_'.$dbDocument['documentID'].'" class="confirmLink" href=""><img class="delete" src="'.ICON_IMAGES.'ico_cross.png" alt="delete document" /></a>
  43.                     <div id="dialog_'.$dbDocument['documentID'].'" title="<h2>Delete Confirmation</h2>" style="display:none;">
  44.                         <p>Are you sure you want to remove "'.$dbDocument['documentName'].'"?</p>
  45.                         <p>Image Preview:</p>
  46.                         <img src="'.FILE_UPLOADS.$dbDocument['documentPath'].'/'.$dbDocument['revisionPath'].'/'.$docThumbName.'" alt="'.$dbDocument['description'].'" />
  47.                     </div>
  48.                 </li>';
  49.             }
  50.         }
  51.         echo '
  52.         </ul>';
  53.     }
  54.     else
  55.     {
  56.         echo '
  57.         <p>No evidence has been added / uploaded to this daily diary</p>';
  58.     }
Dec 22 '11 #4

Dormilich
Expert Mod 5K+
P: 8,639
your AJAX URL looks strange, are you sure ".AJAX."updateDocumentList.php is correct?
Dec 23 '11 #5

100+
P: 129
Expand|Select|Wrap|Line Numbers
  1. 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!
Dec 23 '11 #6

Post your reply

Sign in to post your reply or Sign up for a free account.