jQuery Mobile - Tự động tạo các phần tử biểu mẫu

Question

Tôi đang tạo một ứng dụng web ngoại tuyến được định hướng dựa trên cơ sở dữ liệu web được nhắm mục tiêu tại thiết bị iOS. Tôi đang cố gắng sử dụng jQuery Mobile, nhưng tôi có một vấn đề trong việc tạo ra các hình thức khác nhau.

Các tùy chọn biểu mẫu được lấy từ truy vấn cơ sở dữ liệu, do đó chúng được chèn vào trang sau khi đã tải, do đó, "jQuery-Mobilification" không xảy ra. Nhìn lướt qua nguồn, dường như không có cách nào rõ ràng để gọi điều này ở giai đoạn này (tất nhiên đó là bản phát hành alpha, và tôi nghĩ đây sẽ là một yêu cầu phổ biến hợp lý, vì vậy tôi hy vọng nó sẽ đến). Có một số loại workaround tôi có thể đưa vào để làm điều này? Tôi đặc biệt quan tâm đến các nút radio, hộp kiểm và danh sách lựa chọn.

Answer 1

này rối tung xung quanh trong internals không có giấy tờ, nhưng sau đang làm việc cho tôi:

$("#some-div").load("/html/fragment/", 
        function() { 
         $(this).find("input").customTextInput(); 
        }); 

Có nhiều phương pháp tương đương cho các nút, hộp kiểm tra, vv

Có một cái nhìn tại _enchanceControls [sic] phương pháp trong http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.js.

Cập nhật cho 1.0Alpha2: Như có thể mong đợi khi phát xung quanh với nội bộ của thư viện, điều này không còn hoạt động trong phiên bản mới nhất. Thay đổi customTextInput() thành textinput() khắc phục một chút, nhưng chủ đề không được áp dụng đầy đủ vì một lý do nào đó. Chúng tôi đã được cảnh báo ...

Answer 2

Vâng vấn đề là như bạn mô tả. 'Huy động' được kích hoạt khi tài liệu sẵn sàng. Nhưng vì các truy vấn DB ngoại tuyến của bạn là không đồng bộ, nó kết thúc sau khi document.ready được kích hoạt. Vì vậy, DOM được cập nhật sau này trong quá trình và không có thêm CSS được thêm vào tất cả các div và danh sách các mục.

Tôi nghĩ bạn sẽ phải thay đổi nguồn của các js di động để không chạy trên tài liệu sẵn sàng nhưng chạy khi bạn yêu cầu nó chạy. Sau đó, bạn sẽ phải gọi hàm đó trong cơ sở dữ liệu của bạn gọi lại.

Có vẻ như đó là tùy chọn duy nhất vào lúc này.

Theo truyền thống, tôi đã sử dụng jqtouch và bây giờ là sencha. Tôi đã không chơi nhiều với jQuery điện thoại di động.

ALTERNATIVELY - bạn có thể viết HTML của mình sau khi truy vấn nó ra khỏi cơ sở dữ liệu với các kiểu CSS cần thiết trên đó. Nếu bạn sử dụng plugin Firebug cho Firefox, bạn có thể xem những kiểu/lớp nào được áp dụng khi chạy huy động. Bạn chỉ có thể viết HTML của mình bằng cách sử dụng các quy ước đó. Không lý tưởng, nhưng sẽ hoạt động.

Answer 3

Sau khi kết thúc cuộc gọi AJAX của bạn và bạn chèn các yếu tố hình thức thử gọi:

$("#the-page-id").page(); 

Tôi tin rằng đội jquery-mobile sẽ được bổ sung thêm một phương pháp .refresh() trên các yếu tố giao diện người dùng khác nhau để giải quyết vấn đề này trong tương lai.

Answer 4

CẬP NHẬT

Beta2 có một sự kiện create. Tôi sẽ cập nhật faq của tôi khi bản beta2 được phát hành.Xem http://jquerymobile.com/blog/2011/07/22/jquery-mobile-team-update-week-of-july-18th/

faq Cập nhật: http://jquerymobiledictionary.pl/faq.html

---

Như CaffeineFueled đề xuất - .page() là cách để làm cho công việc JQM với bất kỳ phần nào của HTML

.page() có thể được gọi là một lần duy nhất cho một phần tử. Gọi nó trên một yếu tố bao bì bạn thêm vào trang. Nó sẽ xử lý mọi thứ.

Answer 5

naugtur là đúng, bạn phải gọi .page() trên bất kỳ yếu tố mà bạn thêm vào các dom, sau đó nó hoạt động ra độc đáo:

var el = $('<input type="text"/>') 
el.page(); 
$('#something').append(el); 

Answer 6

Dưới đây là một liên kết đến các tài liệu cho tính năng này mà Tom đã nói về. Không chắc chắn chính xác khi nào chúng được thêm vào, nhưng tôi đang sử dụng nó và nó hoạt động cho tôi!

http://jquerymobile.com/test/docs/forms/plugin-eventsmethods.html

Answer 7

Câu trả lời được chọn hiện tại hơi lỗi thời. Sử dụng 'làm mới', không phải 'trang', để tạo kiểu nội dung được thêm động (danh sách hoặc biểu mẫu).

Nếu bạn thêm các mục vào một listview, bạn sẽ cần phải gọi phương thức làm mới() trên nó để cập nhật các phong cách và tạo ra bất kỳ danh sách lồng nhau được thêm vào. Đối với dụ, $('ul').listview('refresh');

qua jQuery Mobile docs, 1.0.4a

Answer 8

này đã làm việc cho tôi (jquerymobile1.7.0):

$('#formular').append('<div data-role="fieldcontain" class="ui-hide-label">' + 
'<label for="name" class="ui-hidden-accessible">Name:</label>' + 
'<input type="text" name="name" size="25" id="name" placeholder="Name"/>' + 
'</div>'); 
$('#name').textinput(); 

Có hiện cái gọi là chức năng plugin cho tất cả các loại của các yếu tố hình thức (ví dụ thanh trượt, textinput, vv) để tạo chúng.