jQuery Mobile: Uncaught cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'

Question

I am pulling my hair out dealing with this problem. These are the code that I used and caused the mentioned problem.

$(document).ready(function () {
    $("#at-site-btn").bind("tap", function () {
        $.mobile.changePage("view/dialog/at-site.php", { transition:"slidedown", role:"dialog" });
    });
    $('#at-site-page').live('pagecreate', function(){
        var $checked_emp    = $("input[type=checkbox]:checked");
        var $this           = $(this);
        var $msg            = $this.find("#at-site-msg");
        $checked_emp.appendTo($msg);
        $checked_emp.trigger('create');
        $msg.trigger('create');
        $(document).trigger('create');
        $this.trigger('create');
        $("html").trigger('create');

    });
});

Explanation:

The above code is in a file named hod.php. The file contain a number of checkboxes. These checkboxes and be checked simultaneously and when I pressed the #at-site-btn button the at-site.php appear (as a dialog) and display every checked checkboxes.

This is where the problem occurred. When I pressed the back button in the dialog to go back to the previous page and tried to uncheck those checkboxes, the error pops out as mentioned in the title. There are no calls to 'refresh method' in my code so I don't see the way to fix this.

1. Can anyone please suggest a way to solve this problem?
2. Am I using it right? (I am very new to jQuery Mobile. If there are some concepts behind using JQM please explain it to me [I've tried read JQM Docs it seems so unclear to me]).

Best regards and thank you very much for your answers.

Answer 1

What version of jQueryMobile are you using? You might need to use pageinit instead of pagecreate. This portion of the jQueryMobile documentation talks about the choices.

For re-painting or creation, the solution that @Taifun pointed out, which looks like:

$("input[type='radio']").checkboxradio();
$("input[type='radio']").checkboxradio("refresh");

worked okay for me, but it didn't paint the controls 100% correctly. Radio buttons didn't get the edges painted with rounded corners.

Before I saw your code, I read here that you can call .trigger('create') on the container object and it worked for me. You are doing that but inside pagecreate instead of in pageinit.