Dynamics list from DB, stars disappear when change page

Dec 15, 2013 at 1:49 AM
Edited Dec 15, 2013 at 1:50 AM
I have created a dynamic listview from a DB.

CLICK HERE TO SEE THE PAGE

Using the buttons you can go show the next page, jump to the last, etc.

If you refresh the page you will see the stars, if you use the buttons the stars disappear.

I try to put this code before </body> without success:
  <script>
            $("#listview").listview("refresh");
            $('.rateit').rateit();
            $('.star').rating();
  </script>
Can someone help me?
Thanks.
Coordinator
Dec 15, 2013 at 8:39 AM
Your pages are loaded via Ajax, so your rateit init script is not called.

You have to register to the jquery mobile page change events, and in that callback call to rateit.

http://api.jquerymobile.com/pagechange/
Dec 15, 2013 at 3:44 PM
Thanks, after some tests I find this solution:
  <script>
    $(document).on('pagechange', function(e, data){    
      $('.rateit').rateit();
        });
  </script>
I hope this can help others programmers that like me have no good feeling with Jquery :D

TY
Dec 16, 2013 at 3:22 PM
Anyway I find another little problem.

The script solve the problem if I refresh the page but not automaticaly when the page is show.

I had try tu use window.location.reload(); but it doesn't work.

You can see that when the page is load there is no stars, if you refresh stars are on....

Some ideas?

ty
Coordinator
Dec 18, 2013 at 2:30 PM
Could you show me the "non-working" demo again?
Dec 19, 2013 at 12:12 AM
Edited Dec 19, 2013 at 12:12 AM
Ciao, yes, I have change the filenames...

You can start from here:

TEXT

This is a search page. Select what you want (doesn't matter, don't work for now) and click CERCA (or click CERCA directly).

How you can see the stars aren't show. Refresh the page and you will see its.
Dec 21, 2013 at 7:33 PM
Have you understood why?
Coordinator
Dec 22, 2013 at 1:27 PM
The page doesn't work.
Dec 22, 2013 at 2:07 PM
Edited Dec 22, 2013 at 2:08 PM
SORRY, you are right.

This because I am developing always new upgrade...

Check this: TEXT

Anyway in the meantime I found a solution, I have put all the HTML and Jquery code inside PHP variables, at the end I print $variable...

In this way seems to work, so I think the problem can be connect to the DOM...

Thanks for your time!
Coordinator
Dec 22, 2013 at 2:38 PM
Edited Dec 22, 2013 at 2:39 PM
  1. I guess changing the event to "pagebeforeshow" , might make the flicker go away.
  2. Furthermore, just as an explanation: you need to init rateit twice.
    Once when the page loads for the first time. You could just move the call $('.rateit').rateit(); (which is now inside your 'load' event handler) to the bottom off the page, so it kicks in as fast as possible. The other one, is when jQuery mobile changes the content of the page. I guess here you could better change it to using "pagebeforeshow", so it won't flicker.