The 'refresh' function in jQM listview is causing issues with inset lists

For some reason, I am struggling to understand why this issue is occurring: In jQuery Mobile, I have an unordered list with data-inset="true". Initially, it displays perfectly with rounded top and bottom edges. However, on dynamically adding new elements to the list and calling listview('refresh'), it no longer appears as an inset list.

Update: This problem only arises when invoking listview('refresh'); on a list that is not on the currently active page. When navigating to the page containing the list, the listview updates with all necessary styles for an inset list except for the rounded corners at the top and bottom. To replicate this issue, refer to this link: http://jsfiddle.net/94X7S/10/

Below is the HTML structure of the list before executing .listview('refresh');

<ul data-role="listview" data-inset="true" data-theme="c" data-divider-theme="b" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
    <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-top ui-btn-up-undefined">
        User Reviews (4) <span class="rate"><img src="..." alt="Rating"/></span>
    </li>
    <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li">
        <div class="ui-btn-inner ui-li" aria-hidden="true">
            <div class="ui-btn-text">
                <a href="#reviews" class="ui-link-inherit">
                    <h3 class="ui-li-heading"><img src="..." alt="Rating"/>Review Title</h3>
                    <p class="ui-li-desc">Review Content...</p>
                </a>
            </div>
            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"/>
        </div>
    </li>
    <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-bottom">
        <div class="ui-btn-inner ui-li" aria-hidden="true">
            <div class="ui-btn-text">
                <a href="#reviews" class="ui-link-inherit">
                    <h3 class="ui-li-heading"><img src="..." alt="Rating"/>Review Title</h3>
                    <p class="ui-li-desc">Review Content...</p>
                </a>
            </div>
            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"/>
        </div>
    </li>
</ul>

Here is how the list's HTML changes after invoking .listview('refresh'); <

ul data-role="listview" data-inset="true" data-theme="c" data-divider-theme="b" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
    <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-b">
        User Reviews (4) <span class="rate"><img src="..." alt="Rating"/></span>
    </li>
    <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li">
        <div class="ui-btn-inner ui-li" aria-hidden="true">
            <div class="ui-btn-text">
                <a href="#reviews" class="ui-link-inherit">
                    <h3 class="ui-li-heading"><img src="..." alt="Rating"/>Review Title</h3>
                    <p class="ui-li-desc">Review Content...</p>
                </a>
            </div>
            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"/>
        </div>
    </li>
    <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li">
        <div class="ui-btn-inner ui-li" aria-hidden="true">
            <div class="ui-btn-text">
                <a href="#reviews" class="ui-link-inherit">
                    <h3 class="ui-li-heading"><img src="..." alt="Rating"/>Review Title</h3>
                    <p class="ui-li-desc">Review Content...</p>
                </a>
            </div>
            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"/>
        </div>
    </li>
</ul>

It's evident that some classes are missing from the first and last <li> tags post-listview('refresh');. Is there any specific reason behind this or any solution to avoid such issues? Any suggestions would be highly valued.

jqueryhtmlcssjquery-mobile

Answer №1

After exploring further, I understand your point about navigating to the second page. One solution could be to only update the listview elements when the current page is displayed:

$('.add').click( function(){

    // you can use a comma to combine selectors
    $('#1, #2').append('<li>' + count + '</li>');

    // refresh the listview on the current page (if it exists)
    $(this).closest('.ui-content').find('.ui-listview').listview('refresh');

    count++;
});

$('[data-role="page"]').bind('pageshow', function () {

    // refresh the listview on the current page (if it exists)
    $(this).find('.ui-listview').listview('refresh');
});

Check out this demo: http://jsfiddle.net/94X7S/12/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating dynamic charts using a factory pattern

I'm working on dynamically adding charts to a widget based on a selection from a combobox. To achieve this, I've implemented the factory pattern. Here's the backend code snippet: public interface ICharts { string chartType ( ...

c#htmlangularjschartshighcharts

Maximizing the use of default top positioning for absolutely positioned elements

After observing that an element with position:absolute can have its default top value determined based on its immediate parent's position, regardless of whether it is set to relative or not, BoltClock explained that in such cases, it remains in a stat ...

csscss-position

Box without a border wrapping around it

I can't seem to figure out why the border I applied to a child div is not completely enclosing the element. I created two boxes using div tags and added a border to one of them. #box { height: 500px; width: 500px; background-c ...

htmlcss

Learn how to create a registration form using Ajax, PHP, and MySQL

So far I've been working with HTML <form id="account_reg" action="reg.php" method="post"> <div id="response"></div> <div class="input"> <label>Login</> <input name="login" type="text" class=" ...

phpjqueryajaxjson

Struggling to combine select dropdown choices in one calculation

​​I'm currently working on a project where I need to create a website that multiplies three numbers selected from dropdown menus together. However, when I attempt to perform the calculation, I only get the result "1" displayed. I've spent sev ...

javascripthtmlcss

There seems to be a compatibility issue between AngularJS and HTML

Here is a simple AngularJS code snippet I have written: var app=angular.module("myApp",[]); app.controller("MyController",['$scope',function($scope){ $scope.name="Asim"; $scope.f1=function(){ console.log("i am clicked"); $scope.vr="lol"; } co ...

javascripthtmlangularjsnode.js

Why does the scrollbar appear even when the inner element is smaller in CSS transformation?

Please check out this link .wrapper { width: 200px; height: 200px; padding: 10px; border: 1px solid #888; overflow: auto; } .scale { width: 400px; height: 300px; background-color: red; transform: scale(0.4); transform-origin: 0 0; transitio ...

cssgoogle-chromeinternet-explorerscrollbartransform

Transforming a JavaScript JSON object into a string representation

Currently in the process of constructing a website utilizing Tornado Websocket, and I've come to understand that Tornado Websocket only accepts a specific type of json format: {"key1":1,"key2":2,"key3":3} The goal is to fill element attributes with ...

javascriptjquerypython

You can submit a photo to a form as an attached file

I had a code that looked like this My goal is to simplify the process for users by allowing them to fill out additional information in a form without having to upload an image separately. I want to display the canvas image from the previous page in the fo ...

javascriptphphtml

What is the method to enable both text and numbers in an input field while restricting special characters?

Is it possible to allow both text and numbers but disallow special characters in this input field? Currently, my code only allows numbers. How can I modify it to also allow text? Is it possible to achieve this using JavaScript? http://jsfiddle.net/mhgv0 ...

jquerycss

Utilizing CSS to position an image at both the top and bottom of a webpage

I have been struggling to find a solution to this particular issue. My goal is to position an image at both the top and bottom of the page using a background property. I understand that by making the positioning relative, the image will be placed at the bo ...

htmlcss

ChakraUI ForwardRef in React not applying variant to child component

Encountering an issue with the combination of forwardRef and Input from ChakraUI. Attempting to create a generic input component with a flushed variant, but facing difficulty as Chakra keeps resetting it back to default. ModalInput Component import { for ...

cssreactjsreact-propschakra-ui

Validation method in jQuery for a set of checkboxes with distinct identifiers

I am faced with a situation where I have a set of checkboxes that, due to the integration with another platform, must have individual names even though they are all interconnected. <div class="form-group col-xs-6 checkbox-group"> <label cla ...

javascriptjqueryjquery-validate

Loading Ajax content into div (Wordpress) without pre-loading the font can cause display issues

Currently, I'm implementing a JavaScript function within Wordpress using Ajax to load the content of a post into a modal div when specific elements are clicked. Here is an example of how the JS function appears: function openProjectModal($that) { ...

javascriptphpcssajaxwordpress

The close button on my modal isn't functioning properly

There seems to be an issue with the close button functionality. <div class="modal fade show " id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="display: block;left: -6.5%;"> <div class="modal-dialog" ...

javascriptjquerybootstrap-4

What is the best way to have an image trail another in JavaScript coding for my game?

Hey, can someone help me create a zombie game where a zombie image moves towards a player image (zs.png) at a specific speed and decreases the player's health upon contact? This game is designed for the 3ds browser, so it must be coded in JavaScript ...

javascripthtml

The attribute in the JSON response from jQuery is incorrect and does not comply

I need to retrieve data from a different server and I am implementing an authentication method using jQuery. The expected data format from the server should be in JSON, but I'm encountering an error stating "invalid XML attribute value" in Firebug. M ...

jqueryjson

What is the best way to target the shadow DOM host element specifically when it is the last child in the selection?

I want to style the shadow DOM host element as the last child. In this particular situation, they are currently all green. I would like them to be all red, with the exception of the final one. class MyCustomElement extends HTMLElement { constructor() ...

javascripthtmlcsscustom-element

Resize a circle upon hovering while keeping the same thickness of the border

I'm working on creating a circle with just a border (no background) that scales on hover. Here's the code I have so far: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link type="text/css" rel="stylesh ...

csscss-transitionscss-transforms

jQuery does not cache Ajax requests by default

I have implemented the following code to make an AJAX request. I am trying to determine if the requests are being cached by using the Chrome developer tools. However, when I check the request tab, I notice that all data is always being pulled from the serv ...

javascriptjquery