$.mobile.changePage() changes page with No data(white screen)?

Question

i have many links in my page each with two attributes that are format & src.

<a class="play" src="'.$p['video_path'].'" format="'.$p['video_type'].'"></a>

what its clicked i get its 2 attr and make HTML in js like this.

$(".play").live('click',function() {
   var src = $(this).attr('src');
   var fmt = $(this).attr('format');
   var html = '<video width="200" height="240" controls> <source src="'+src +'" type="video/'+ fmt +'"> </video>'; 
   $("#myVideoDiv").html(html);
   $.mobile.changePage( $("#myVideoDiv"), { transition: 'pop' } );
 });
<div data-role="dialog" id="myVideoDiv"></div>

when i clicked on any video link my browser url changes like this

http://pp.local/maps/maps/40295472#&ui-state=dialog

but nothing displaying just a white screen. although its working $("#myVideoDiv").html( html ); i can see the HTML through Firbug. No error or Warning in Firebug:(

Basically what i need to do is that i want to show each video in jquery Mobile dialog like we do in normal jquery UI like the code below.i need to do same thing here too but with jquery mobile dialog.

  $(".watchVideo").live('click', function() {
    if( $('div.ui-dialog').length ) {
      $('div.ui-dialog').remove();
    }
    var path  = $(this).attr('rel');
    var title = $(this).attr('title');        
    var $dialog = $('<div>', {
        title: 'Title'
    }).dialog({
        autoOpen: false,
        modal: true,
        width: 600,
        height: 500,
       closeOnEscape: false
    });

    var tab = '<table id="video_player" style="margin: 10px 10%;"><tr><td><object codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><param value="'+path+'" name="src"><param value="true" name="autoplay"><param value="true" name="controller"><embed pluginspage="http://www.apple.com/quicktime/download/" controller="true" style="height:300px;width:400px;background-color:#D9EBFB" autoplay="true" target="myself" src="'+path+'"></object></td></tr></table>';
    $('<div id="updateContent">').html( tab ).appendTo( $dialog );
    $dialog.dialog('open');
    return false;    
});

Answer 1

I have successfully recreated your problem, unfortunately I can't be 100 % sure this is the problem. I think you have a an error with your page/dialog setup.

Take a look at my working example, try to use it in your app: http://jsfiddle.net/Gajotres/5REkc/ . This example uses dialog as a video container:

$('#index').live('pagebeforeshow',function(e,data){   
    $('#show-video').live('click', function(e) {
        $('#video-content').append('<video width=450px height=300px controls="controls"><source src="http://dev.swinginsam.com/_files/testvid_01.ogv" type="video/ogg"></video>');  
        $.mobile.changePage("#second", { transition: "slide"});
    });        
});

I have also created another example for you. This one is much better and it uses popup as a video container. Unlike dialog popup will resize to accommodate video tag: http://jsfiddle.net/Gajotres/vscrU/ .

$('#index').live('pagebeforeshow',function(e,data){   
    $('#show-video').live('click', function(e) {
        $('#popup-video').append('<video width=600px height=300px controls="controls"><source src="http://dev.swinginsam.com/_files/testvid_01.ogv" type="video/ogg"></video>');  
        $('#popup-video').popup("open");
    });        
});

<div data-role="popup" id="popup-video" data-tolerance="15,15" class="ui-content"</div>

Data tolerance is here so popup can have a padding. Without it video player is overflowing popup container.

One more thing, I can see you are using php for content generation. In this case popup is much better solution. Unlike dialog (which acts as another page, and is a another page), popup is a part of a single page, so i has a much better usability in server side generation.

WARNING:

My examples will only work in firefox browser. I have used only a ogg video source. Video sources are taken from this post.