开发者

Building dynamic list in jquery and losing CSS

开发者 https://www.devze.com 2023-03-28 18:53 出处：网络
I am building a list of appointments by day and the appointments for the day are collapsible under the date header. I am using append to insert the list items. When the list is built dynamically, ther
相关专题：csscustom-listsjquery

I am building a list of appointments by day and the appointments for the day are collapsible under the date header. I am using append to insert the list items. When the list is built dynamically, there is zero formatting. None of the jquery goodness or CSS shows through. Should I be building the list using a different method than append? The link below shows a static list built below a dynamic one.

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>
<!--开发者_如何学Go RX -->




</body>
</html>

You're expecting CSS and bindings which are applied by jquery mobile before page load. Because you're creating additional DOM elements later you need to reinitialize the elements after append using

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

See the JQM FAQs for more.

I dug into your source PLEASE POST YOUR OWN CODE!! and it looks like you've got other problems. Jquery append doesn't work the way you think it does. When you do this:

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

The UL is closed before the LIs are appended and you get:

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

When I assume what you want is:

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

Build your string and then append the whole thing. I recommend reading up on append.

If you are using a CSS stylesheet and the jQuery addClass() method, the actual formatting should show through.

Since you are using jQuery to apply CSS to HTML elements after the webpage loads using 

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

the dynamic list will not receive those CSS attributes. The elements haven't yet been written to the page and since the function runs after the page loads, your dynamic list will never receive those CSS attributes.

I would recommend creating a CSS stylesheet and then use the addClass() method specified here:

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

My guess is that append() is fine, but you need to re-initialize collapsible after appending items so it can work all its magic.

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

上一篇:

:下一篇

更多 问答 相关资讯：

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

    关注公众号

    热门标签

    图文推荐

    Delphi - Custom drawing a message list

    Delphi - Custom drawing a message list
    C++ header-only include pattern

    C++ header-only include pattern
    IE7 Margin Collapses Into Padding

    IE7 Margin Collapses Into Padding
    in CoffeeScript, how can I use a variable as a key in a hash?

    in CoffeeScript, how can I use a variable as a key in a hash?
    Interactive visualization of a graph in python [closed]

    Interactive visualization of a graph in python [closed]
    How to customise PHP MYSQL tables?

    How to customise PHP MYSQL tables?
    High quality, simple random password generator

    High quality, simple random password generator
    Image Recognition ApI in android

    Image Recognition ApI in android

    开发者开发者网给大家分享系统运维,大数据运维,云计算,编程开发技巧,路由交换,运维和开发相关的资讯及技术文章，同时StackOverflow中文社区，知识经验交流分享。

    法律声明：本站内容均为网友上传，网站举办方负责审核和监督，如存在版权或非法内容，欢迎举报，我们将尽快予以删除。邮箱：devze@qq.com

    Copyright © 2018-2020 开发者. All rights reserved. Powered by 开发者ICP备案号: 京ICP备10032868号-9