Создание динамического списка в jquery и потеря CSS - PullRequest
Новая
       16

Создание динамического списка в jquery и потеря CSS

1 голос
/ 17 августа 2011

Я строю список встреч по дням, и встречи на день складываются под заголовком даты. Я использую append для вставки элементов списка. Когда список строится динамически, форматирование нулевое. Ни один из jquery совершенства или CSS не показывает до конца. Должен ли я создавать список, используя метод, отличный от добавления? Ссылка ниже показывает статический список, построенный ниже динамического.

http://www.roamingq.com/jquery/Test2.htm#my_qs

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Page Title</title> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
        <!--<script type="text/javascript">
            $(document).ready(function () {
                $("#sayHelloButton").click(function (event) {
                    $.ajax({
                        type: 'GET',
                        url: 'http://www.roamingq.com/rqes/rqservice.svc/Test',
                        //url: 'http://www.roamingq.com/rqes/user.svc/Authenticate',
                        data: {},
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        processdata: true,
                        success: function (result) {
                            alert(result.d);
                        },
                        error: function (data) {
                            alert("failure");
                        }
                    });
                });
            });      
        </script>-->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
        <script type="text/javascript" >
            $(function () {
                $(".submit").click(function () {
                    var email = $("#lgn_email").val();
                    var password = $("#lgn_password").val();
                    var dataString = 'email=' + email + '&password=' + password;
                    alert(dataString);
                    return false;
                });
            });
</script>
    </head> 
<body> 


<!-- Start of Login -->
<div data-role="page" data-theme="b" id="login">
    <div data-role="header" data-position="inline" data-nobackbtn="true">
        <h1>Mobile Q Login</h1>
    </div>
    <div data-role="content" data-inset="true">
        <form id="target" method="post" action="#my_qs">
            <fieldset>
                <div data-role="fieldcontain">
                    <label for="lgn_email">Email:</label>
                    <input type="email" name="lgn_email" id="lgn_email" value=""  />
                </div>
                <div data-role="fieldcontain">
                    <label for="lgn_password">Password:</label>
                    <input type="password" name="lgn_password" id="lgn_password" value="" />
                </div>
                <p>
                    <fieldset data-role="controlgroup">
                        <input type="checkbox" name="lgn_rememberme" id="lgn_rememberme" class="custom" data-theme="c" />
                        <label for="lgn_rememberme">Remember me</label>
                    </fieldset>
                </p>
                    <a href="#my_qs" data-role="button" data-inline="true">Login</a>
                <!--<input type="submit" value="Login" class="submit"/>-->
                <!--<input id="sayHelloButton" value="Say Hello" type="button" />-->
                <p>Don't have an account? <a href="#registration">Register</a> now for free!</p>
            </fieldset>
        </form>
    </div>
</div>
<!-- End of Login -->









<!-- Start of Registration -->
<div data-role="page" data-theme="b" id="registration">
    <div data-role="header" data-position="inline" data-nobackbtn="true">
        <h1>Mobile Q Registration</h1>
        <!--<a href="#login" class="ui-btn-right">Cancel</a>-->
    </div>
    <div data-role="content" data-inset="true">
        <form action="/FormActions/register.ashx" method="get">
            <fieldset>
                <div data-role="fieldcontain">
                    <label for="rg_mobileNumber">Mobile #:</label>
                    <input type="text" name="rg_mobileNumber" id="rg_mobileNumber" value=""  />
                </div>
                <div data-role="fieldcontain">
                    <label for="rg_firstName">First name:</label>
                    <input type="text" name="rg_firstName" id="rg_firstName" value=""  />
                </div>
                <div data-role="fieldcontain">
                    <label for="rg_lastName">Last name:</label>
                    <input type="text" name="rg_lastName" id="rg_lastName" value=""  />
                </div>                
                <div data-role="fieldcontain">
                    <label for="rg_email">Email:</label>
                    <input type="email" name="rg_email" id="rg_email" value=""  />
                </div>
                <div data-role="fieldcontain">
                    <label for="rg_password1">Password:</label>
                    <input type="password" name="rg_password1" id="rg_password1" value="" />
                </div>
                <div data-role="fieldcontain">
                    <label for="rg_password2">Re-enter Password:</label>
                    <input type="password" name="rg_password2" id="rg_password2" value="" />
                </div>
                <div data-role="fieldcontain">
                    <p>By submitting this information, I acknowledge that I have
                    read and agree to the <a href='MobileQ_TermsofUse.DOC.html' data-rel=”dialog” rel="external" data-transition=”flip”>Terms of Use</a> and 
                    <a href='MobileQ_PrivacyPolicy.DOC.html' data-rel=”dialog” rel="external" data-transition=”pop”>Privacy Policy</a></p>
                </div>
                <div data-role="fieldcontain">
                    <a href="#my_qs" data-role="button" data-inline="true">Register</a>
                    <p>Already have an account? <a href="#login">Login</a></p>
                </div>
            </fieldset>
        </form>
    </div>
</div>
<!-- End of Registration -->





<!-- Start of My Q's -->
<div data-role="page" data-theme="b" id="my_qs">
    <div data-role="header"  data-backbtn="false">
        <h1>Mobile Q</h1> 
        <div data-role="navbar">
        <ul>
            <li><a href="#" class="ui-btn-active" data-role="button" data-icon="home" data-iconpos="top">My Q's</a></li>
            <li><a href="#new_q" data-role="button" data-icon="plus" data-iconpos="top">New Q</a></li>
            <li><a href="#favorites" data-role="button" data-icon="star" data-rel="dialog"  data-transition="pop" data-iconpos="top">Favorites</a></li>
            <li><a href="#offers" data-role="button" data-icon="info" data-rel="dialog" data-transition="pop" data-iconpos="top">Offers</a></li>
            <li><a href="#settings" data-role="button" data-icon="gear" data-rel="dialog" data-transition="pop" data-iconpos="top">Settings</a></li>
        </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->


    <div data-role="content" id="my_qs_listview">

    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: 'POST',
                url: 'http://www.roamingq.com/rqes/user.svc/Authenticate',
                data: '{"User": "' + "bruce@roamingq.com" + '","Password": "' + "bru2bec" + '","BookingCategories": "' + "7" + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                processdata: true,
                success: function (result) {
                    $("#my_qs_listview").append('<ul data-role="listview">');
                    $("#my_qs_listview").append('<div data-role="collapsible" data-collapsed="false">');
                    $("#my_qs_listview").append('<h3>June 02, 2011</h3>');
                    $("#my_qs_listview").append('<ul data-role="listview">');
                    $.each(result.d.Reservations, function (i, Res) {
                        $("#my_qs_listview").append('<li><img src="icons/Service_55x55.png" style="vertical-align:middle;"/><h3>' + Res.Name + '</h3><p>' + Res.Address1 + '</p><p class="ui-li-aside"><b>' + Res.Detail + '</b></p>');
                    });
                    $("#my_qs_listview").append('</ul></div></ul>');
                },
                failure: function (data) {
                    alert("Try again later.");
                }
            });
            $('#my_qs_listview').listview('refresh', true);
        });        
    </script>

</div>

    <div data-role="collapsible" data-collapsed="false" id="my_qs_listview">
        <h3>June 02, 2011</h3>
        <ul data-role="listview">
            <li>
                <img src="icons/Fitness_55x55.png" style="vertical-align:middle;"/>
                <h3>Gold's Gym</h3>
                <p>Yoga Class</p>
                <p class="ui-li-aside"><b>6:30pm</b></p>
            </li>
            <li>
                <img src="icons/Service_55x55.png"/>
                <h3>Dale's Dead Bug</h3>
                <p>Exterior bug spraying</p>
                <p class="ui-li-aside"><b>ETA 2:15pm</b></p>
            </li>
        </ul>
    </div>



    <!--<div data-role="content" id="my_qs_listview">   
        <ul data-role="listview">
            <div data-role="collapsible" data-collapsed="false">
                <h3>June 02, 2011</h3>
                <ul data-role="listview">
                    <li>
                        <img src="icons/Fitness_55x55.png"  style="vertical-align:middle;"/>
                        <h3>Gold's Gym</h3>
                        <p>Yoga Class</p>
                        <p class="ui-li-aside"><b>6:30pm</b></p>
                    </li>
                    <li>
                        <img src="icons/Service_55x55.png"/>
                        <h3>Dale's Dead Bug</h3>
                        <p>Exterior bug spraying</p>
                        <p class="ui-li-aside"><b>ETA 2:15pm</b></p>
                    </li>
                </ul>
            </div>
            <div data-role="collapsible" data-collapsed="false">
                <h3>June 03, 2011</h3>
                <ul data-role="listview">
                    <li>
                        <img src="icons/Golf_55x55.png" />
                        <h3>Sleepy Ridge Golf</h3>
                        <p>18 holes + cart</p>
                        <p class="ui-li-aside"><b>8:00am</b></p>
                    </li>
                    <li>
                        <img src="icons/Spas_55x55.png" />
                        <h3>Zen Spa</h3>
                        <p>60 minute massage</p>
                        <p class="ui-li-aside"><b>12:00pm</b></p>
                    </li>
                    <li>
                        <img src="icons/Dentist_55x55.png" />
                        <h3>Dr Smith DDS</h3>
                        <p>Checkup and bleaching</p>
                        <p class="ui-li-aside"><b>1:30pm</b></p>
                    </li>
                </ul>
            </div>
            <div data-role="collapsible" data-collapsed="false">
                <h3>June 04, 2011</h3>
                <ul data-role="listview">
                    <li>
                        <img src="icons/Salon_55x55.png" />
                        <h3>Super Salon</h3>
                        <p>Haircut and "Forever 41" tip frosting</p>
                        <p class="ui-li-aside"><b>4:00pm</b></p>
                    </li>                
                    <li>
                        <img src="icons/Restaurants_55x55.png" />
                        <h3>Tsunami</h3>
                        <p>Dinner reservation</p>
                        <p class="ui-li-aside"><b>7:30pm</b></p>
                    </li>
                </ul>
            </div>
        </ul>
    </div>-->
</div>
<!-- End of My Q's -->





<!-- Start of New Q -->
<div data-role="page" data-theme="b" id="new_q">
    <div data-role="header" data-backbtn="false">
        <h1>Mobile Q</h1> 
        <div data-role="navbar">
        <ul>
            <li><a href="#my_qs" data-role="button" data-icon="home" data-iconpos="top">My Q's</a></li>
            <li><a href="#" class="ui-btn-active" data-role="button" data-icon="plus" data-iconpos="top">New Q</a></li>
            <li><a href="#favorites" data-role="button" data-icon="star" data-rel="dialog" data-transition="pop" data-iconpos="top">Favorites</a></li>
            <li><a href="#offers" data-role="button" data-icon="info" data-rel="dialog" data-transition="pop" data-iconpos="top">Offers</a></li>
            <li><a href="#settings" data-role="button" data-icon="gear" data-rel="dialog" data-transition="pop" data-iconpos="top">Settings</a></li>
        </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->
    <div data-role="content" style="height:20px; text-align:center; font-weight:bold;">Select a New Q</div>
    <div data-role="content">   
        <div class="ui-grid-b"> 
            <div class="ui-block-a"><a href="#restaurants"><div style="height:120px; text-align:center;"><img src="icons/Restaurants_55x55.png" /><h5 >Restaurants</h5></div></a></div> 
            <div class="ui-block-b"><a href="#salons"><div style="height:120px; text-align:center;"><img src="icons/Salon_55x55.png" /><h5 >Hair Salons</h5></div></a></div> 
            <div class="ui-block-c"><a href="#service"><div style="height:120px; text-align:center;"><img src="icons/Service_55x55.png" /><h5 >Service</h5></div></a></div> 
            <div class="ui-block-a"><a href="#golf"><div style="height:120px; text-align:center;"><img src="icons/Golf_55x55.png" /><h5 >Golf</h5></div></a></div> 
            <div class="ui-block-b"><a href="#spas"><div style="height:120px; text-align:center;"><img src="icons/Spas_55x55.png" /><h5 >Spas</h5></div></a></div> 
            <div class="ui-block-c"><a href="#dentists"><div style="height:120px; text-align:center;"><img src="icons/Dentist_55x55.png" /><h5 >Dentists</h5></div></a></div> 
            <div class="ui-block-a"><a href="#fitness"><div style="height:120px; text-align:center;"><img src="icons/Fitness_55x55.png" /><h5 >Fitness</h5></div></a></div> 
            <div class="ui-block-b"><a href="#rx"><div style="height:120px; text-align:center;"><img src="icons/RX_55x55.png" /><h5 >Pharmacies</h5></div></a></div> 
            <div class="ui-block-c"><a href="#general"><div style="height:120px; text-align:center;"><img src="icons/MQ_55x55.png" /><h5 >Dining</h5></div></a></div> 
        </div><!-- /grid-c -->
    </div><!-- /page -->
</div>
<!-- End of New Q -->

<!-- Start of Favorites page -->
<div data-role="page" id="favorites">
<div data-role="header">
    <h1>Favorites</h1>
</div>
<div data-role="content">
<p>Come here to save time and book appointments at your bookmarked favorite restaurants, hair salons, golf courses, and more. </p>
</div>
</div>
<!-- End of Favorites page -->


<!-- Start of Offers page -->
<div data-role="page" id="offers">
<div data-role="header">
    <h1>Offers</h1>
</div>
<div data-role="content">
<p>This page will be updated with the hottest deals everywhere you like to go.</p>
</div>
</div>
<!-- End of Offers page -->


<!-- Start of Settings page -->
<div data-role="page" id="settings">
<div data-role="header">
    <h1>Settings</h1>
</div>
<div data-role="content">
<p>This screen is where you will change your geographical location, application preferences, etc.</p>
</div>
</div>
<!-- End of Settings page -->


<!-- New Q's ----------------->
<!-- New Q's ----------------->
<!-- New Q's ----------------->
<!-- Restaurants -->
<div data-role="page" id="restaurants">
<div data-role="header">
    <h1>Restaurants</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<!-- Restaurants -->

<!-- Salons -->
<div data-role="page" id="salons">
<div data-role="header">
    <h1>Hair Salons</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<!-- Salons -->

<!-- Service -->
<div data-role="page" id="service">
<div data-role="header">
    <h1>Service Technicians</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<!-- Service -->

<!-- Golf -->
<div data-role="page" id="golf">
<div data-role="header">
    <h1>Golf Courses</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<!-- Golf -->

<!-- Spas -->
<div data-role="page" id="spas">
<div data-role="header">
    <h1>Spas</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<!-- Spas -->

<!-- Dentists -->
<div data-role="page" id="dentists">
<div data-role="header">
    <h1>Dentists</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<!-- Dentists -->

<!-- Fitness -->
<div data-role="page" id="fitness">
<div data-role="header">
    <h1>Fitness</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<!-- Fitness -->

<!-- RX -->
<div data-role="page" id="rx">
<div data-role="header">
    <h1>Pharmacies</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<!-- RX -->




</body>
</html>

Ответы [ 3 ]

1 голос
/ 17 августа 2011

Вы ожидаете, что CSS и привязки будут применены jquery mobile перед загрузкой страницы.Поскольку вы создаете дополнительные элементы DOM позже, вам необходимо повторно инициализировать элементы после добавления, используя 

$('#something').append(data).trigger('create');

Подробнее см. JQM FAQ .

Я вкопался в вашsource ПОЖАЛУЙСТА, РАЗМЕСТИТЕ СВОЙ СОБСТВЕННЫЙ КОД !! и похоже, что у вас есть другие проблемы.Приложение Jquery не работает так, как вы думаете.Когда вы делаете это: 

$("#my_qs_listview").append('<ul data-role="listview">');
$.each(result.d.Reservations, function (i, Res) {
    $("#my_qs_listview").append('<li>...');
});

UL закрывается до добавления LIs, и вы получаете: 

<ul data-role="listview"></ul>
<li>...</li>
...

Когда я предполагаю, что вы хотите: 

<ul data-role="listview">
  <li>...</li>
  ...    
</ul>

Создайте свою строку, а затем добавьте все это.Я рекомендую прочесть по append .

0 голосов
/ 17 августа 2011

Если вы используете таблицу стилей CSS и метод jQuery addClass (), фактическое форматирование должно просвечивать.

Поскольку вы используете jQuery для применения CSS к элементам HTML после загрузки веб-страницы, используя 

$(function(){
    //apply css to html elements
});

динамический список не получит эти атрибуты CSS. Элементы еще не были записаны на страницу, и поскольку функция запускается после загрузки страницы, ваш динамический список никогда не получит эти атрибуты CSS.

Я бы рекомендовал создать таблицу стилей CSS, а затем использовать метод addClass (), указанный здесь:

http://api.jquery.com/addClass/

0 голосов
/ 17 августа 2011

Я предполагаю, что append () - это хорошо, но вам нужно повторно инициализировать сворачиваемый объект после добавления элементов, чтобы он мог использовать всю свою магию. 

$('#updated-element').collapsible('refresh');
...