Sử dụng hộp thoại giao diện người dùng jQuery ("phá hủy") đặt phần tử ở vị trí sai?

Tôi có một hình thức lớn với nhiều phần. Đối với mỗi phần, tôi muốn thêm một nút nhỏ "Popup as Dialog" sẽ chuyển đổi phần đó thành một hộp thoại theo yêu cầu, và sau đó (khi đóng hộp thoại) để quay lại biểu mẫu với các đầu vào mới.Sử dụng hộp thoại giao diện người dùng jQuery ("phá hủy") đặt phần tử ở vị trí sai?

Tôi đang sử dụng hàm dialog() của giao diện người dùng jQuery. Các phần pop-up hoạt động tốt - sub-form chuyển đổi thành một hộp thoại. Tuy nhiên, khi tôi hộp thoại ("hủy") biểu mẫu con, phần tử xuất hiện trở lại, nhưng ở cuối tài liệu DOM thay vì vị trí ban đầu.

Đây có phải là "tính năng" của hộp thoại() không? Bất cứ điều gì để làm về điều đó? Có cách nào tốt hơn để thực hiện điều này bằng cách sử dụng hộp thoại() không?

Nguồn

2009-11-18 Sleepster

Ừ , đó là một 'tính năng' ... haha ... chạy vào nó một lúc trở lại. Dưới đây là một vài 'gotchyas' và sau đó là một cách thực sự hackity đối phó với chúng (mặc dù hiệu quả nếu bạn đang có kế hoạch để có nhiều subforms):

Khi bạn tạo một hộp thoại, jquery nhớ nó, và lưu trữ nó trong một div riêng biệt, sau đó không bao giờ đặt nó trở lại (yep, tài liệu nằm trong ý nghĩa rằng các yếu tố không bao giờ quay trở lại nơi nó)
Kinh nghiệm của tôi đã được rằng nếu bạn mess với các yếu tố ẩn quá nhiều sau đó, bạn có thể phá vỡ chức năng thoại trong tương lai. Tốt hơn là chỉ cần tạo một hộp thoại mới từ nội dung mới (đặc biệt là nếu ứng dụng của bạn có nhiều trong số này ... mã hóa từng biểu mẫu con bằng tay sẽ trở nên tẻ nhạt rất nhanh).
Nếu bạn không thể tái sử dụng của div, bạn sẽ phải sao chép chúng & đổi tên họ (đó là những gì tôi làm bên dưới)

Sau khi đóng hộp thoại, đoạn dưới đây 'nhái' các nội dung của hộp thoại, đổi tên thuộc tính id của nó, sau đó nối nội dung đã thay đổi vào 'sub_form_container', do đó tạo hộp thoại/biểu mẫu hoàn toàn mới mỗi lần người dùng đóng hộp thoại. Hi vọng điêu nay co ich!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <link type="text/css" href="ui.css" rel="stylesheet" /> 
    <script type="text/javascript" src="j.js"></script> 
    <script type="text/javascript" src='ui.js'></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
       newDialogs(2); 
    });  
    function newDialogs(idCounter) { 
     $('#d1').unbind().bind('click', function() { 
     $('#d'+ idCounter.toString()).dialog({close: function(event, ui){ 
      var newSubForm = $('#d'+idCounter.toString()).clone(); 
       idCounter += 1; 
       newSubForm.attr('id', 'd'+idCounter.toString()).attr('class', '').attr('style', ''); 
      $('#sub_form_container').append(newSubForm); 
      newDialogs(idCounter); 
      $('ui-dialog').remove() 
      } 
     }); 
     }); 
    } 

    </script> 

</head> 
    <body> 
    <h1>Element above</h1> 
    <div> 
     <div id='d1'>Activate dialog</div> 
     <div id='sub_form_container'> 
     <div id='d2'>Dialog content <input type='text' /></div> 
     </div> 
    </div> 
    <h1>Element below</h1> 
    </body> 
</html>

Nguồn

2009-11-18 03:45:15 btelles

Có lẽ thêm một số mã khác thật khó để biết nơi/tại sao mã của bạn có thể thất bại

Bạn chỉ có thể làm điều đó như thế này hoặc tương tự

<input id="text" name="textname" type="text"> 
<input 
    type="button" 
    value="Pop me up" 
    onclick="$('#text').clone().dialog({ 
    modal:true, 
    close: function(event, ui) { 
     $('#text').val(this.value); 
    } 
    });" 
>

Kiểm tra cho một mẫu http://jsbin.com/ujema/

Nguồn

2009-11-18 02:39:35 jitter

này đã làm việc cho tôi:

Clone hộp thoại
Khởi tạo hộp thoại nhân bản (vì vậy ở lại ban đầu trên trang)
Tháo thoại nhân bản khi tôi đang thực hiện với nó

Mã mẫu:

$('a.popup-modal').click(function(e){ 
    var $modal = $(this).closest('form').find('.modal').clone(); 
    $modal.dialog({ 
     autoOpen: true, 
     close: function(event, ui){ 
      $(this).remove(); 
     } 
    }); 
});

Nguồn

2011-08-09 21:54:54 Andrew

Điều này thật tuyệt vời. Nó dễ dàng hơn so với cách tiếp cận của câu trả lời được chấp nhận. Đây thực sự là một "tính năng" cực kỳ khốc liệt, họ nên thực sự sửa lỗi này. – Milimetric

Rất hiệu quả. Chỉ cần chắc chắn rằng bạn không đóng 'div' với 'id'. – geowa4

Bạn sẽ đối phó với các modals bằng id như thế nào? Mọi thứ đều hoạt động trừ khi tôi đóng nó mà không kích hoạt sao chép. – Mikhail

Sử dụng hộp thoại giao diện người dùng jQuery ("phá hủy") đặt phần tử ở vị trí sai?

Trả lời

Các vấn đề liên quan