Chèn các phần tử vào DOM trong trang dựa trên jQuery Mobile

Tôi đang thử nghiệm với ứng dụng jQuery Mobile cuối cùng sẽ kết thúc dưới dạng ứng dụng không phải trên web trên thiết bị di động và vì vậy tất cả nội dung phải là cục bộ. Vì lý do đó (tôi nghĩ) Tôi cần phải xây dựng các ứng dụng trong một trang duy nhất được mô tả bởi data-role="page" thẻ nếu không cơ chế tải ajax trong jQuery Mobile dường như không hoạt động.Chèn các phần tử vào DOM trong trang dựa trên jQuery Mobile

Ứng dụng sẽ đọc dữ liệu từ một DB lưu trữ cục bộ và hiển thị nó trên trang trong danh sách không theo thứ tự, được tạo kiểu bằng cách sử dụng jQuery Mobile giống như một ứng dụng gốc.

Trong chức năng $(document).ready() tôi thực hiện tra cứu DB và cho mỗi kết quả, tôi tạo ra một thẻ <li> xung quanh kết quả DB của tôi và sau đó gọi $(".list").append(li_str); nơi .list là lớp của thẻ <ul> tôi.

Trang hiển thị như thể jQuery Mobile không có mặt - tôi thấy dữ liệu chính xác trong mỗi <li> nhưng không đúng.

So sánh kết quả này với một phiên bản mà tôi cứng mã <li> thẻ trong mã HTML của trang - có vẻ như jQuery Mobile sẽ thay đổi các thẻ và chèn nhiều lớp học mới vv

Có lẽ tôi cần phải xây dựng trang từ DB trước đó trong chu kỳ tải trang? Bất kỳ đề xuất?

Nguồn

2011-02-10 speedwell

Sự cố là this issue. Vì vậy, thay đổi mã của bạn:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 
    <script> 
    function build_dynamic_content() 
    { 
     var num_entries = 5; 

     for (var i = 0; i < num_entries; ++i) 
     { 
      var li_str = "<li id=\"" + i + "\"><a href=\"#\">" + "Entry number " + (i + 1) + "</a>"; 
      li_str += "<img src=\"" + "icon.png" + "\" />"; 
      li_str += "</li>"; 

      $(".mainlist").append(li_str); 
     } 
    } 
    </script> 
</head> 

<body> 
    <div data-role="page" id="list" data-fullscreen="false"> 
     <div data-role="content"> 
      <ul class="mainlist" data-role="listview"> 
       <li id="0"><a href="#">Test entry</a><img src="icon.png"/></li> 
      </ul> 
     </div> 
    </div> 
<script>build_dynamic_content();</script> 
</body> 
</html>

Cách khác, bạn có thể trì hoãn việc tạo ra giao diện danh sách cho đến khi tất cả các yếu tố đã được tạo ra (như mô tả trong các chủ đề liên quan):

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 
    <script> 
    function build_dynamic_content() 
    { 
     var num_entries = 5; 

     for (var i = 0; i < num_entries; ++i) 
     { 
      var li_str = "<li id=\"" + i + "\"><a href=\"#\">" + "Entry number " + (i + 1) + "</a>"; 
      li_str += "<img src=\"" + "icon.png" + "\" />"; 
      li_str += "</li>"; 

      $(".mainlist").append(li_str); 
     } 
    } 

    $(function() 
    { 
     build_dynamic_content(); 
     $('ul.mainlist').listview(); 
    }); 
    </script> 
</head> 

<body> 
    <div data-role="page" id="list" data-fullscreen="false"> 
     <div data-role="content"> 
      <ul class="mainlist"> 
       <li id="0"><a href="#">Test entry</a><img src="icon.png"/></li> 
      </ul> 
     </div> 
    </div> 
</body> 
</html>

Xin lỗi vì bãi đang ; Tôi không thể làm việc này trong jsfiddle.

Nguồn

2011-02-10 01:18:37

Đó dường như không thực hiện bất kỳ Matt khác nhau. Tôi đã thực hiện một ứng dụng thử nghiệm nhỏ không có DB trình bày vấn đề. Mục nhập đầu tiên trong danh sách được mã hóa cứng và có vẻ chính xác. Phần còn lại được tạo động và không: http://pastebin.com/1LTDZ4nE Bạn có thể thấy những gì tôi đang làm sai không? – speedwell

@speedwell: xem chỉnh sửa của tôi. –

hoạt động hoàn hảo. Thật sự cám ơn nhiều. – speedwell

Câu trả lời của Matt không phải là câu trả lời chung cho câu hỏi. Tôi đã bao phủ rất nhiều lần trong các câu hỏi khác.

Các công trình trên có chế độ xem danh sách, nhưng không phải với bất kỳ nội dung nào nói chung.

Để thêm phần tử vào DOM trong jQuery Mobile, bạn cần biết hàm .page().

tôi đã làm một hướng dẫn trên mà http://jquerymobiledictionary.pl/faq.html

Nguồn

2011-02-10 07:57:39 naugtur

Trang này không thể truy cập được, điều này thật không may vì nó chứa câu trả lời chính xác duy nhất cho vấn đề của OP ... Tìm thấy trên http://jquerymobiledictionary.pl/faq.html: => sau khi cập nhật DOM, trình kích hoạt cuộc gọi ('create') trên phần tử được chèn, như sau: $ ('# myelement'). Html ('nội dung cập nhật'). Trigger ('create'); – chrisv

Có, tôi đã di chuyển trang web này sang một miền và tôi đã cập nhật hầu hết các bài đăng, nhưng có rất nhiều bản sao gần như trùng lặp, tôi không tìm thấy tất cả chúng. Cảm ơn bạn đã báo cáo. – naugtur

Cả gọi $("changed-parent-element").listview() cũng không $("changed-parent-element").trigger("create") thực sự làm việc cho tôi. Để thay đổi nội dung DOM nhiều lần và làm lại các phong cách điện thoại di động jQuery tôi cần này:

$("changed-parent-element").listview("refresh");

Version: jQuery di động 1.0 RC2

Nguồn

2011-11-08 17:55:21

Chèn các phần tử vào DOM trong trang dựa trên jQuery Mobile

Trả lời

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