Question

$('#quest').click(function() {
                    $('#replaceit').load('class/cars.php?q=true',function(){$('#replaceit').collapsible('refresh');});

“cannot call methods on collapsible prior to initialization; attempted to call method ‘refresh'”

Html code that is generated seems to be working fine eg:

<div data-collapsed="true" data-role="collapsible">
<h1>Which warranty policy of the following is the best for you?</h1>
<p><input type="checkbox" value="2yearsunlimittedkilometers" name="question[Warranty][]">2 years unlimitted kilometers
<input type="checkbox" value="3yearsor60000kilometers" name="question[Warranty][]">3 years or 60000 kilometers
</p></div>

but yet its not styled into collapsable :(.. any clue ?

Answer 1

Looks like you’re missing some closing brackets in the function call

You have this:

$('#quest').click(function() {
    $('#replaceit').load('class/cars.php?q=true',function() {
        $('#replaceit').collapsible('refresh');
});

Looks like it should be this:

$('#quest').click(function() {
    $('#replaceit').load('class/cars.php?q=true',function() {
        $('#replaceit').collapsible('refresh');
    })
});

Also I’v never seen this:

collapsible('refresh')

Could you provide documentation/examples of it?

Maybe try:

$('#replaceit').collapsible().page();

Alternative Syntax for your HTML markup: Live Example: http://jsfiddle.net/Rj6AW/4/

<div data-role="page" id="home"> 
    <div data-role="content"> 
        <div data-collapsed="true" data-role="collapsible">
            <legend>Which warranty policy of the following is the best for you?</legend>
            <fieldset data-role="controlgroup" data-role="fieldcontain">                
                <input type="checkbox" value="2yearsunlimittedkilometers" name="question[Warranty][]" id="2yearsunlimittedkilometers" />
                <label for="2yearsunlimittedkilometers">2 years unlimitted kilometers</label>
                <input type="checkbox" value="3yearsor60000kilometers" name="question[Warranty][]" id="3yearsor60000kilometers" />
                <label for="3yearsor60000kilometers">3 years or 60000 kilometers</label>
            </fieldset>
        </div>
    </div>
</div>