Как отобразить всплывающее окно Colorbox в «jQuery ajax() Method» в следующем сценарии?

Question

Я использую PHP, Smarty, jQuery, AJAX, Colorbox - лайтбокс jQuery и т. Д. Для моего сайта. Существует некоторый старый код, выполненный с использованием метода jQuery AJAX для отображения сообщения во всплывающем меню с использованием стандартных функций библиотеки jQuery. Теперь я хочу заменить это типичное всплывающее окно, используя всплывающее окно Colorbox. Короче говоря, чтобы изменить конструктивную часть, только часть сообщения такова, какая она есть. Я пытался это сделать, но пока не смог. Можете ли вы мне помочь в внесении необходимых изменений в существующий старый код, чтобы отображать сообщения в всплывающем окне Colorbox вместо обычного всплывающего окна? Для справки я ставлю старый код ниже:

код из Smarty шаблона, чтобы дать вызов функции JQuery AJAX заключается в следующем:

<span class="submit edit_user_transaction_status" value="{$control_url}{$query_path}?op=edit_user_transaction&page={$page}&txn_no={$user_transaction_details.transaction_no}&transaction_data_assign={$user_transaction_details.transaction_data_assign}&user_id={$user_id}{if $user_name!=''}&user_name={$user_name}{/if}{if $user_email_id!=''}&user_email_id={$user_email_id}{/if}{if $user_group!=''}&user_group={$user_group}&{/if}{if $user_sub_group!=''}&user_sub_group={$user_sub_group}{/if}{if $from_date!=''}&from_date={$from_date}{/if}{if $to_date!=''}&to_date={$to_date}{/if}{if $transaction_status!=''}&transaction_status={$transaction_status}{/if}{if $transaction_no!=''}&transaction_no={$transaction_no}{/if}">Update</span> 

код из JS файл, который содержит существующий код AJAX выглядит следующим образом:

$(document).ready(function() { 

//This function is use for edit transaction status 
    $(document).on('click', '.edit_user_transaction_status', function (e) { 

     e.preventDefault(); 

     $.colorbox.close(); 

     //for confirmation that status change 
     var ans=confirm("Are you sure to change status?"); 
     if(!ans) { 
      return false; 
     } 

     var post_url   = $(this).attr('value'); 
     var transaction_status_update = $('#transaction_status_update').val();  

     $.ajax({ 
      type: "POST", 
      url: post_url+"&transaction_status_update="+transaction_status_update, 
      data:$('#transaction_form').serialize(), 
      dataType: 'json', 
      success: function(data) {    
      var error = data.login_error; 

      $(".ui-widget-content").dialog("close"); 
      //This variables use for display title and success massage of transaction update    
      var dialog_title = data.title;    
      var dialog_message = data.success_massage; 
      //This get link where want to rerdirect 
      var redirect_link = data.href;    

      var $dialog = $("<div class='ui-state-success'></div>") 
          .html("<p class='ui-state-error-success'>"+dialog_message+"</p>") 
          .dialog({ 
          autoOpen: false, 
          modal:true, 
          title: dialog_title, 
          width: 500, 
          height: 80, 
      close: function(){          
       document.location.href =redirect_link; 
       }     
      });     
       $dialog.dialog('open');     
      }   
     }); 
    }); 
}); 

Теперь фрагмент кода из PHP-файл, который содержит PHP код и успех сообщение выглядит следующим образом:

case "edit_user_transaction": 


       $transaction_no   = $request['txn_no']; 
       $transaction_status_update = $request['transaction_status_update']; 
       $transaction_data_assign = $request['transaction_data_assign']; 
       $user_id     = $request['user_id']; 
       $from_date     = $request['from_date']; 
       $to_date     = $request['to_date']; 
       $page      = $request['page']; 

       if($request['transaction_no']!=''){ 
        $query = "&transaction_no=".$request['transaction_no']; 
       } 
       // If public transaction status is entered 
       if($request['transaction_status']!='') { 
        $query .= "&transaction_status=".$request['transaction_status']; 
       } 

       // For checking transaction no is empty, blank, and numeric 
       if($transaction_no!='' && !empty($transaction_no)) { 
        $objUserTransactions = new UserTransactions(); 
        $objUserPackages  = new UserPackages(); 

        //if transaction status update to success and transaction data not yet assign 
        if(empty($transaction_data_assign) && $transaction_data_assign == 0 && $transaction_status_update == "success") { 
         $user_transactions = $objUserTransactions->GetUserTransactionsDetailsByTransactionNo($transaction_no, $user_id); 

         $i = 0 ; 
         $j = 0 ; 
         //Create array related study and test 
         foreach($user_transactions['transaction_details'] as $my_cart) { 
          if(!empty($my_cart['pack_id'])) { 
           if($my_cart['pack_type'] == 'study') { 
            $data['study'][$i] = $my_cart['pack_id']; 
            $i++; 
           } 
           if($my_cart['pack_type'] == 'test') { 
            $data['test'][$j]['pack_id']   = $my_cart['pack_id']; 
            $data['test'][$j]['pack_expiry_date'] = $my_cart['pack_expiry_date']; 
            $data['test_pack_ids'][$j]   = $my_cart['pack_id']; 
            $j++; 
           } 
          } 
         } 

         if(!empty($data['study'])) { 
          $objUserStudyPackage = new UserStudyPackages(); 
          //Update packages sold count & purchase date in package table 
          $objUserStudyPackage->UpdateStudyPackagePurchaseData($data['study']); 


          //For insert packages related data to package_user table 
          foreach($data['study'] as $study_pack_id) { 
           $objUserPackages->InsertStudyPackagesToPackageUser($study_pack_id, $user_id); 
          } 

         } 

         if(!empty($data['test'])) { 
          $objUserTestPackage = new UserTestPackages(); 
          //Update packages sold count & purchase date in test package table 
          $objUserTestPackage->UpdateTestPackagePurchaseData($data['test_pack_ids']); 

          //For insert test related data to test_user table 
          foreach($data['test'] as $test_pack_data) { 
           $objUserPackages->InsertTestPackagesToTestUser($test_pack_data['pack_id'], $test_pack_data['pack_expiry_date'], $user_id); 
          } 
         } 

         //This function is use for update status inprocess to success and transaction_data_assign flag 1 
         $user_transactions = $objUserTransactions->UpdateTransactionStatusByTransactionNo($transaction_no, $user_id, $transaction_status_update, '1'); 

        } else { 
         // This function is use for update status 
         $user_transaction_details = $obj_user_transactions->UpdateTransactionStatusByTransactionNo($transaction_no, $user_id, $transaction_status_update); 
        } 

        //Email functionality when status update     
        include_once("transaction_status_update_email.php");      

        **$reponse_data['success_massage'] = "Transaction status updated successfully"; 
        $reponse_data['title']   = "Transaction"; 
        $reponse_data['href']   = "view_transactions.php?page=".$page."&from_date=".$from_date."&to_date=".$to_date.$query;         
        $reponse_data['login_error']  = 'no'; 
        $reponse_data = json_encode($reponse_data); 

        echo $reponse_data; 

        die();** 
       } 

       break; 

Код, выделенный жирным шрифтом, является сообщением об успешном ответе. Можете ли вы мне помочь в этом отношении, пожалуйста? Заранее спасибо.

Answer 1

Эй, вы попросили о помощи в чате PHP. Надеюсь, это поможет:

Таким образом, часть диалога внизу должна быть изменена для поддержки colorbox. Во-первых, загрузите все свои материалы colorbox. Во-вторых, вам нужно будет создать свой цветной контент динамически, либо захватив содержимое с элемента на странице, либо создав его на лету.

Вам может понадобиться для отладки некоторые из этого, но вот в общем, как вы это делаете ...

Удалить весь диалог переменной $

var $dialog = ..... 

И изменить что-то, что будет выглядеть примерно так:

var $dialog = $('<div>').addClass('ui-state-success').append($('<p>').addClass('ui-state-error-success').html(dialog_message)); 

Тогда вам нужно сделать что-то вроде этого:

$.colorbox({html: $dialog}); 

Если у вас возникли проблемы с отображением контента, который динамически построенный внутри ColorBox попробуйте позвонить $ .colorbox.resize() на открытом обратного вызова:

opened: function(){ 
    $.colorbox.resize(); 
} 

Если это не работает, вы можете также необходимо передать свойство innerWidth/innerHeight или width/height внутри метода изменения размера.