jQuery Mobil List Item set css for image and details

Alexander_F_1 · ‎01-24-2016

Hi Supportteam,

In my example, the employee logs into the application and receives an overview of all arriving guests.

This view I navigate through a List Item entry that I navigate through a Web Service.

with every new entry adds getJSON ('#bookinglist'). append
it works great!

but the problem is that the attributes for HTML are ignored, see screenshot.

Can you tell me what am I doing wrong?

Please look at the code:

index.html:

                    <h1>Buchungen</h1>
                    <div class="widget-container wrapping-col single-centered"></div>
                    <div class="widget-container content-area horiz-area wrapping-col left"></div>
                    <div class="widget-container content-area horiz-area wrapping-col right"></div>
                </div>
                <div id="sub-page_bookingoverview" class="upage-content vertical-col left ">
                    <div class="widget uib_w_14 ui-content no_wrap outset-margin d-margins" data-uib="jquery_mobile/listview" data-ver="0">
                        <ul id="bookinglist" data-role="listview" data-theme="a" data-filter="true" data-filter-theme="a">

                        </ul>
                    </div>
                </div>
                <div data-role="footer" data-position="fixed" class="container-group inner-element uib_w_13" data-uib="jquery_mobile/footer" data-ver="0">
                    <h1></h1>
                    <div class="widget-container wrapping-col single-centered"></div>
                    <div class="widget-container content-area horiz-area wrapping-col left"></div>
                    <div class="widget-container content-area horiz-area wrapping-col right"></div>
                </div>
            </div>
        </div>

Index_user_scripts.js:

$.getJSON(serviceURL + 'getbookinglist.php?client_id='
                  + userHandler.client_id +'&employee_id='
                  + userHandler.employee_id , function(data) {
       $('#bookinglist li').remove();
       var gaeste = data.bookings;
       $.each(gaeste, function(index, bookings) {

           /* hier vielleicht noch die Images für Anzahl der Gäste einbauen */
           var human_images = ''

           var booking_typ = parseInt(bookings.booking_typ_ID)
           var buchungstyp ='Buchung'
           if (booking_typ === 2) {
               buchungstyp ='Nachberechnung'
               };
           if (booking_typ === 4) {
               buchungstyp ='Privat'
               };
       $('#bookinglist').append('<li id="' + bookings.lfdnr + '"><a>' +
                       '<img src="' + bookings.app_images + '" alt="Appartement" style="width:80px;height:60px;">' +
                       '<h3>' + buchungstyp + '</h3>' +
                       '<h4>App. : ' + bookings.app_name + '</h4>' +
                       '<h4>Name: ' + bookings.anrede + ' ' + bookings.lastname + '</h4>' +
                       '<h5>Anreise: ' + bookings.anreisedatum + '</h5>' +
                       '<h5>Abreise: ' + bookings.abreisedatum + '</h5>' +
                       '</a></li>');

       });
       $('#bookinglist').listview('refresh');

       });
       /*global activate_subpage */
         activate_subpage("#sub-page_bookingoverview");
    });

Have you any samples to set the list item with a css for formatting ?

thanks

Alexander

Chris_P_Intel · ‎01-25-2016

jQuery Mobile overrides a _lot_ of CSS. Have you actually tested this "plain"?

Here is how I might make a multi-line JQM List Item:

          <li>
            <a href="#froyo">
              <img src="bob.png">
              <h2>label</h2>
              <p><strong>Line 1</strong></p>
              <p>Line 2</p>
            </a>
          </li>

And it looks like this:

Alexander_F_1 · ‎01-27-2016

Hi Chris,

i can not see your sample...

But when i check my online site with firebug, we have any other class entries, see.

<h3 class="fewo">Buchung</h3>

<h4>App. : Alpenblick</h4>

<h4>Name: Testmeier</h4>

<h5>Anreise: 02.01.2016</h5>

<h5>Abreise: 12.01.2016</h5>

</a>

jquery ignored the class "fewo" and overwrites all, see the css file section, it´s only a test:
.fewo {
font-family: Tahoma, sans-serif;
font-size: 14px;
font-weight: bold;
padding: 0px 0px 5px 0;
}

what can i do?

regards Alexander

Chris_P_Intel · ‎01-27-2016

Hi Alexander,

Yes, jQuery Mobile is very aggressive with how it over-determines the CSS. It can be frustrating.

You may have to use the !important CSS qualifier on rules that aren't being respected.

.fewo {
 font-family: Tahoma, sans-serif !important;
 font-size: 14px  !important;
 font-weight: bold  !important;
 padding: 0px 0px 5px 0  !important;
}

Or you can try putting an id at the top of your list, and changing your CSS selector to incorporate it: #someid .fewo { .... }

Good luck,

Chris