2014-05-10 3 views
0

UPS, USPS 및 FEDEX와 통신하는 클라이언트의 WP 플러그인을 작성 중입니다. USPS에는 여러 단계가 필요하므로 AJAX (PHP)를 통해 동적으로 내용을 추가하는 UI 대화 상자 모달을 사용하고 있습니다. 내용은 훌륭하지만 첫 번째 대화 상자에서 계속 버튼을 클릭하면 모든 연속적인 대화 상자 버튼 기능이 실행되는 것 같습니다. 대화 내용을 변경하기 위해 호출하는 함수가 있고 각 호출 함수는 AJAX 데이터를 보내고 다음 대화 상자의 옵션을 설정합니다. 단순히 버튼의 기능을 완료하고 사용자가 다음 대화 상자에서 선택하도록 허용해야합니다. 언젠가는 JQuery, JS 및 PHP를 사용하고 있지만 jQuery UI는 상당히 새로운 것입니다. 참조를 위해 아래 코드를 참조하십시오. 이것에 대한 도움은 크게 감사 할 것입니다.Jquery UI 대화 상자 버튼 여러 번 클릭 이벤트 발생

"obj"는 shippment 데이터와 html을 포함하는 PHP에서 반환 된 객체입니다.

show_dialog = function(title, html, options) {  
    $("#dialog").dialog({ 
     autoOpen: false, 
    }); 

    $('#dialog').html(html); 
    $('#dialog').dialog('option', 'title', title); 
    $('#dialog').dialog(options); 

    $('div.ui-dialog-buttonset button.ui-button span.ui-button-text').each(function() { 
    $(this).html($(this).parent().attr('text'));}) 
} 

기능 주소 확인을 위해 대화 내용을 업데이트

기능

usps_address_check = function(obj) { 
    if(obj.VStatus === 'AddressMatch') { 
      var title = obj.Title; 
     var options = { 
      resizable: false, 
      width:800, 
      modal:true, 
      buttons: { 
        //when this button is clicked it fires the function in the next dialog below process shipment. 
       'Continue': function(event) { 
        if($('#verified').attr('checked')) { 
         data = { 
          action: 'usps_ajax', 
          call: 'check_rate', 
          post: $('#post_id').val(), 
         }; 
         ajax_request(data); 

        } else { 
         $(this).dialog('option', 'title', "Please click the checkbox to confirm corrected address..."); 
        } 
       }, 
       Cancel: function() { 
        $(this).dialog('close'); 
       } 
      } 
     } 
    } 

    show_dialog(title, obj.StatusMessage, options); 
    $('#dialog').dialog('open'); 
} 

기능 USPS

와 처리 선적 요청 이전에 운송 요금 및 선택 서비스 애드온을 확인하는
usps_confirm_rates = function(obj) { 
    var title = obj.Title; 
    var html = obj.StatusMessage; 
    var options = { 
     resizable: true, 
     width:800, 
     height:800, 
     modal:true, 
     buttons: { 
     //This function is fired when the button on the first modal above is clicked. 
      'Process Shipment': function() { 
       data = { 
        action: 'usps_ajax', 
        call: 'process_shipment', 
        post: $('#post_id').val(), 
       }; 

       ajax_request(data); 

      }, 
      'Cancel': function(e) { 
       $(this).dialog('close'); 
      } 
     } 
    } 

    show_dialog(title, html, options); 

    var total_shipping = parseFloat($('#total_shipping').text()); 
    var customer_paid = parseFloat($('#shipping_paid').text()); 
    var total_addons = parseFloat($('#total_addons').text()); 
    var difference; 

    $('.btn_addons').click(function(e) { 
     var key = $(this).attr('id'); 
     $('#' + key + '_addon_options').slideToggle(); 
     $('.cb_addon_sel').change(function(e) { 
      var addons = obj.AddOns; 
      var thisCheck = $(this); 
      var thisTable = $(this).closest('table').attr('id'); 
      var curr_addon = $(this).val(); 
      var addon_name = $("#" + curr_addon + "_name").text(); 
      var thisAddon = new Array(); 
      var price = get_price(thisTable, curr_addon); 

      if(obj.AddOns[thisTable][curr_addon].ProhibitedWithAnyOf !== undefined) { 
       var prohibited = obj.AddOns[thisTable][curr_addon].ProhibitedWithAnyOf.AddOnTypeV5; 
      } 

      if(obj.AddOns[thisTable][curr_addon].RequiresAllOf !== undefined) { 
       var required = obj.AddOns[thisTable][curr_addon].RequiresAllOf.RequiresOneOf.AddOnTypeV5; 
      } 

      if($(this).attr('checked')) { 
       total_addons += parseFloat(price); 
       total_shipping += parseFloat(price); 

       if(addons_selected[thisTable] === undefined) 
        addons_selected[thisTable] = new Array(); 

       addons_selected[thisTable].push(curr_addon);       

       for(var p in prohibited) { 
        if(typeof prohibited === 'object') 
         element = prohibited[p]; 
        else 
         element = prohibited; 

        $('#' + thisTable + '_row_' + element).hide(); 

        if($('#' + thisTable + '_' + element).attr('checked')) { 
         $('#' + thisTable + '_' + element).removeAttr('checked'); 
        } 
       } 

       for(var r in required) { 
        if(typeof required === 'object') 
         element = required[r]; 
        else 
         element = required; 

        price = get_price(thisTable, element); 

        $('#' + thisTable + '_' + element).attr('checked', 'checked'); 

        total_addons += parseFloat(price); 
        total_shipping += parseFloat(price); 
       } 
      } else { 
       var name = addon_required(curr_addon, thisTable); 

       if(typeof name === 'string') { 
        $('#' + curr_addon + '_info').text('Required when ' + name + ' is selected.'); 
        $('#' + thisTable + '_' + curr_addon).attr('checked','checked'); 
       } else {  
        total_addons -= parseFloat(price); 
        total_shipping -= parseFloat(price); 

        for(var p in prohibited) { 
         if(typeof prohibited === 'object') 
          element = prohibited[p]; 
         else 
          element = prohibited; 

         $('#' + thisTable + '_row_' + element).show(); 

         //removeByValue(prohibited[p], prohibited); 
        } 

        for(var r in required) { 
         if(typeof required === 'object') 
          element = required[r]; 
         else 
          element = required; 

         price = get_price(thisTable, element); 

         $('#' + thisTable + '_' + element).attr('checked', 'checked'); 
         $('#' + thisTable + '_' + element).removeAttr('checked'); 
         $('#' + element + '_info').text(''); 

         total_addons -= parseFloat(price); 
         total_shipping -= parseFloat(price); 

         //removeByValue(required[r], required); 
        } 

        removeByValue(curr_addon, addons_selected[thisTable]); 
       } 
      } 
      difference = customer_paid - total_shipping; 

      $('#total_addons').text(total_addons.toFixed(2)); 
      $('#total_shipping').text(total_shipping.toFixed(2)); 
      $('#total_difference').text(difference.toFixed(2)); 
     }); 
    }); 

    function addon_required(addon, box) { 
     if(typeof required === 'undefined') { 
      return false; 
     } else { 
      for(var a in addons_selected[box]) { 
       var reqs = obj.AddOns[box][addons_selected[box][a]].RequiresAllOf.RequiresOneOf.AddOnTypeV5; 

       if($.inArray(addon, reqs) == -1) { 
        return false; 
       } else { 
        return $("#" + addons_selected[a] + "_name").text(); 
       } 
      } 
     } 
    } 

    function get_price(box, addon) { 
     if(obj.AddOns[box][addon].Amount === undefined) { 
      price = 0.00; 
     } else { 
      price = obj.AddOns[box][addon].Amount; 
     } 

     return price; 
    }  

} 

답변

0

문제를 직접 해결할 수 없어서 직접 해결 방법을 만들었습니다. 대화 상자 단추를 탐색 도구로 사용하는 대신 PHP의 대화 내용에 컨트롤 단추를 추가했습니다. 그런 다음 Jquery를 통해 직접 액세스합니다. 아래 예를 참조하십시오.

public function verify_address ($ authenticator) {
$ order = $ this-> order;

$params = array(
     'Authenticator' => $authenticator, 
     'Address' => array(
      'FullName' => $order->shipping_first_name . ' ' . $order->shipping_last_name, 
      'Company' => $order->shipping_company, 
      'Address1' => $order->shipping_address_1, 
      'Address2' => $order->shipping_address_2, 
      'City'  => $order->shipping_city, 
      'State'  => $order->shipping_state, 
      'Zipccode' => $order->shipping_postcode, 
      'Country' => $order->shipping_country 
     ), 
    ); 

    $check = $this->stamps->CleanseAddress($params); 

    $this->xml_response['Call'] = 'VerifyAddress'; 

    if(! $check->AddressMatch) { 
     if($check->CityStateZipOK) { 
      $this->xml_response['ResponseStatusCode'] = 1; 
      $this->xml_response['VStatus'] = 'CityStateZipOK'; 
      $this->xml_response['StatusMessage'] = 'The street address could not be verified; however, the City, State, & ZipCode are valid. Click continue to use this address or cancel.';  
     } 
     $this->xml_response['ResponseStatusCode'] = 0; 
     $this->xml_response['VStatus'] = 'InvalidAddress'; 
     $this->xml_response['StatusMessage'] = 'invalid address. Please verify address and resubmit.'; 
    } else { 
     $message = '<span id="usps_error"></span></br>'; 
     $message .= "The address was matched. Please review updated address below and click continue to proceed."; 
     $message .= '<table><tr><td><input type="checkbox" id="verified" value="true" /></td>'; 
     $message .= '<td>' . $check->Address->FullName . '</br>'; 
     $message .= $check->Address->Address1 . '</br>'; 
     $message .= count($check->Address->Address2) < 0 ? $check->Address->Address2 . '</br>' : ''; 
     $message .= $check->Address->City . ', ' . $check->Address->State . ' ' . $check->Address->ZIPCode . '-' . $check->Address->ZIPCodeAddOn . '</td></tr><table>'; 

     //Added html button here for navigation purposes. This can be accessed by its ID in Js after it is added to the dialog box. 
     $message .= '</br></br><div><button class="dialog_nav" id="btn_continue">Continue</button></div>'; 

     $this->xml_response['ResponseStatusCode'] = 1; 
     $this->xml_response['VStatus'] = 'AddressMatch'; 
     $this->xml_response['StatusMessage'] = $message; 
     $this->xml_response['Authenticator'] = $check->Authenticator; 
     $this->xml_response['Method'] = 'USPS'; 
     $this->xml_response['Title'] = 'Step 1: Address Verfication'; 
    } 

    if(is_soap_fault($check)) { 
     $this->xml_response = handle_errors($check); 
    } 

    return $this->xml_response; 
} 

그러면 JS에서 jQuery를 통해 버튼에 액세스 할 수 있습니다.

usps_address_check = function(obj) { 
    if(obj.VStatus === 'AddressMatch') { 
     var title = obj.Title; 
     var options = { 
      resizable: false, 
      width:800, 
      modal:true, 
      buttons: { 
       //Cancel button functions correctly 
       'Cancel': function() { 
        $(this).dialog('close'); 
       } 
      } 
     } 

    show_dialog(title, obj.StatusMessage, options); 
    $('#dialog').dialog('open'); 

      //Button is accessed here and is code is only executed once. 
     $('#btn_continue').click(function(e) { 
      if($('#verified').attr('checked')) { 
       data = { 
        action: 'usps_ajax', 
        call: 'check_rate', 
        post: $('#post_id').val(), 
       }; 
       ajax_request(data); 
      } else { 
       $('#usps_error').text("Please click the checkbox to confirm corrected address, and click continue to proceed.").css('color','red'); 
      } 
     }); 
    } 
} 

더 나은 해결책을 찾고 있지만 지금은 효과가 있습니다.