Jquery mobile, need to refresh page to see changes to CSS

Question

I am new to JQM, but not no jquery. I am using the corner.js plugin which works fine on normal web pages.

So I have the following code in the html HEAD.

<script type="text/javascript">
    $(document).ready(function() {

        $('div.grid_inner').corner("round 8px").parent().css('padding', '4px').corner("round 14px");

    });
</script>

I have the following DIV

<div data-role="content">
            <div class="grid_outer" id="grid_outer_profile">
                <div  class="grid_inner" id="grid_inner_profile">

                    <table>
                        <tr>
                            <td><img src="<?php echo $avatarpath; ?>" /></td>
                        </tr>
                        <tr>
                            <td><?php echo $email; ?></td>
                        </tr>
                        <tr>
                            <td><?php echo $aboutme; ?></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div><!-- /content -->

The problem is that the CSS corners are not applied. not on my desktop, my Android phone or Android Tab.

ONLY AFTER I do a refresh they are applied. I am trying to find out if I need to do a forced refresh of components, but if so, I do not know how to do it for a named DIV. Or, maybe I am fundamentally doing something wrong ??

Thanks for your help!

score 1 · Answer 1 · answered Mar 04 '13 at 16:05

jQuery Mobile is page-oriented and implements its own document load strategy. You have to bind to the pageinit event instead of ready:

$(document).on("pageinit", function(e) {
    $("div.grid_inner", e.target)
        .corner("round 8px")
        .parent().css("padding", "4px").corner("round 14px");
});

score 1 · Accepted Answer · edited May 23 '17 at 11:46

1

Working example: http://jsfiddle.net/Gajotres/8pG6c/

document ready is your problem. Usually it should not be used with jQuery Mobile because it can (and it usually does) trigger before jQuery Mobile page is ready.

It can be fixed with a correct jQuery Mobile page event, in your case use this:

$(document).on('pagebeforeshow', '#page-id', function(){  
    $('div.grid_inner').corner("round 8px").parent().css('padding', '4px').corner("round 14px");
});

page-id is an id of your page where grid is displayed, in case of my example it is #index.

Usual way is to use a pageinit event but in your case better solution is pagebeforeshow. pageinit event triggers only once per loaded page (unless page is manually refreshed).

If you want to find out more about this topic please take a look at my other ARTICLE, to be more transparent it is my personal blog. Or find it HERE.

edited May 23 '17 at 11:46

Community

1
1

answered Mar 04 '13 at 16:05

Gajotres

57,309
16
102
130

Respectfully disagree, `pageinit` will be called once for each loaded page. Are you confusing it with `mobileinit`? – Frédéric Hamidi Mar 04 '13 at 16:15
You can disagree all you want, pageinit will trigger only once per loaded page. – Gajotres Mar 04 '13 at 16:17
It seems we do agree since your last edit :) Note that "once per loaded page" means every time a new page is fetched through AJAX (so no manual refresh is necessary). – Frédéric Hamidi Mar 04 '13 at 16:18
I have added "per loaded page", my thought is the same. Lets say his data is dynamically generated, that same data will then be modified only during initial page load. Each subsequent return to this page will fail to execute this change. Also we don't want to run this code on every page initialization, so it must be tied to the designated page. – Gajotres Mar 04 '13 at 16:22
OK, I want to be able to call this every time the page is shown, not on init. – Coen Damen Mar 04 '13 at 16:37

Jquery mobile, need to refresh page to see changes to CSS

2 Answers2