0


I have two pages, A and B:
A --> login page.
B --> contain HTML elements and iScoll "pull to refreash" code.
evrey thing works fine but when I login from A to B the iScroll content Not appear, if i do refresh for page B the content appear back and work well, this is iScroll code:

<script type="text/javascript">

    var myScroll,
    pullDownEl, pullDownOffset,
    generatedCount = 0;

    function pullDownAction() {
        setTimeout(function () {    
            var el, li, i;
            el = document.getElementById('thelist');

            var returnedLIs = "";
            for (i = 0; i < 3; i++) {

                returnedLIs += '<li><a href="#" data-ajax="false" class="PDFLink"></a></li>';

            }
            $(returnedLIs).prependTo($('#thelist'));
            myScroll.refresh(); 
        }, 0); 
    }


    function loaded() {
        pullDownEl = document.getElementById('pullDown');
        pullDownOffset = pullDownEl.offsetHeight;

        myScroll = new iScroll('wrapper', {
            hideScrollbar:false,
            useTransition: true,
            topOffset: pullDownOffset,
            onRefresh: function () {
                if (pullDownEl.className.match('loading')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
                } 

            },
            onScrollMove: function () {
                if (this.y > 5 && !pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'flip';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
                    this.minScrollY = 0;
                } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
                    this.minScrollY = -pullDownOffset;
                } 
                                },
            onScrollEnd: function () {
                if (pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'loading';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
                    pullDownAction(); // Execute custom function (ajax call?)
                } 

            }
        });

        setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
    }

    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);


</script>

can any one help,,,


edit: <head> section for A.aspx --> Login page: 

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    <link href="css/Site.css" rel="stylesheet" type="text/css" />

    <!-- Validition Library -->
    <script src="Validate/jquery.validVal-4.3.3.js" type="text/javascript"></script>
</head>


edit: <head> section for B.aspx: 

<head runat="server">

    <%--PULL TO REFREASH--%>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <%--PULL TO REFREASH--%>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

    <%--PULL TO REFREASH--%>
    <script type="text/javascript" src="jq/iscroll.js"></script>
    <%--PULL TO REFREASH--%>

    <link href="css/Site.css" rel="stylesheet" type="text/css" />

<%--pull to refresh--%>

<script type="text/javascript">



    var myScroll,
    pullDownEl, pullDownOffset,
    generatedCount = 0;

    function pullDownAction() {
        setTimeout(function () {    
            var el, li, i;
            el = document.getElementById('thelist');

            var returnedLIs = "";
            for (i = 0; i < 3; i++) {

                returnedLIs += '<li><a href="#" data-ajax="false" class="PDFLink"></a></li>';

            }
            $(returnedLIs).prependTo($('#thelist'));
            myScroll.refresh(); 
        }, 0);    
    }


    function loaded() {
        pullDownEl = document.getElementById('pullDown');
        pullDownOffset = pullDownEl.offsetHeight;

        myScroll = new iScroll('wrapper', {
            hideScrollbar:false,
            useTransition: true,
            topOffset: pullDownOffset,
            onRefresh: function () {
                if (pullDownEl.className.match('loading')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
                } 

            },
            onScrollMove: function () {
                if (this.y > 5 && !pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'flip';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
                    this.minScrollY = 0;
                } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
                    this.minScrollY = -pullDownOffset;
                } 

            },
            onScrollEnd: function () {
                if (pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'loading';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
                    pullDownAction(); // Execute custom function (ajax call?)
                } 
            }
        });

        setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
    }

    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);


</script>
<%--pull to refresh--%>
</head>
Gajotres
  • 57,309
  • 16
  • 102
  • 130
Momo88
  • 61
  • 1
  • 2
  • 10
  • `$('[data-role=listview]').listview('refresh')` after you append items to it. – Omar May 07 '13 at 09:09
  • it should go after this `$(returnedLIs).prependTo($('#thelist'));`, try `$('#thelist').listview('refresh')`. – Omar May 07 '13 at 09:22
  • yes I do this but still not work ,,, – Momo88 May 07 '13 at 09:27
  • try this then `$(document).on('pagebeforeshow', '[data-role=page]', function () { $(this).trigger('pagecreate'); });` – Omar May 07 '13 at 09:28
  • I add this line $(document).on('pagebeforeshow', '[data-role=page]', function () { $(this).trigger('pagecreate'); }); at the beginning of – Momo88 May 07 '13 at 09:32
  • Yes, outside the functions you have, you can put it inside ``. – Omar May 07 '13 at 09:33
  • add this also: but not work – Momo88 May 07 '13 at 09:35
  • Nothing happened? can you post `` links? – Omar May 07 '13 at 09:36
  • okay I will edit the Q – Momo88 May 07 '13 at 09:37
  • Are you using multipages template (one page) or multi-html files? a.html b.html? – Omar May 07 '13 at 10:03
  • two separate pages, a.aspx, b.aspx – Momo88 May 07 '13 at 10:05
  • Do you have same javascript code in both of your html files? And if answer is yes is it placed in HEAD in both cases? – Gajotres May 07 '13 at 10:12
  • @Gajotres No they are different I will edit the Q and add the header for the first page – Momo88 May 07 '13 at 10:27
  • My point is is your second HTML has its own logic/javascript in its HEAD? – Gajotres May 07 '13 at 10:29
  • @Gajotres yes you can see the code in the Q ,I edit it – Momo88 May 07 '13 at 10:39
  • then add this `$('#thelist').listview('refresh')` in the second page where you have the `listview` items. you can use it with this `$(document).on('pagebeforeshow', '[data-role=page]', function () { $('#thelist').listview('refresh') }); `. let me know what you get. – Omar May 07 '13 at 10:54
  • @Omar thx but still not work ,,, now I try to refresh the second page by code when it load after login – Momo88 May 07 '13 at 11:02

1 Answers1

1

Let me explain you what is happening.

You have 2 separate HTML pages. Every page has a HEAD with javascript content.

Your problems comes to how jQuery Mobile handles page loading. Only first page is fully loaded. When next page is about to be loaded ONLY its body is loaded into the DOM and rest is discarded. This is because first page is already inside the DOM, there's no point in having to HEAD's inside.

This can be fixed in few ways:

  • Move your second page javascript to the HEAD of your first page
  • Move your second page javascript to the second page BODY
  • When making page transition add these attributes into your link: data-ajax="false" or rel="external". Just be waned, in this case transitions wont work so stick to solution 1. or 2.

Also take a look, I have another great answer regarding this + examples: Why I have to put all the script to index.html in jquery mobile

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130