Page transition issues with mobile jquery

[anikralhan]

Hi All, I'm new to jquery mobile. Recently, I was working on mobile jquery + phonegap for ipad. I found various issues especially with page transition. I google out and found an issue here as well https://github.com/jquery/jquery-mobile/issues/455 but couldn't found any way out. Using a4.0 mobile jquery: 1) I used $.mobile.changePage(url,"fade") method as I want to have transition effect when an external .html page is requested. But I noticed a strange issue that no javascript could run on that page( On the other.html, I have a div which fetch some data from database based on requested page using javascript and sqlite database). I googled out and found that this was because $.mobile.changePage calls through ajax.

2) I even tried out window.location.href=url, but no transition effect was shown.

Using b3 mobile jquery: When used this version I found that blinky effect when transition was used as been discussed on https://github.com/jquery/jquery-mobile/issues/455 .

What I want is smooth transition like flip,fade etc. So please guide what i should do to get desired result.

[toddparker]

A lot of helpful info is here: http://jquerymobile.com/test/docs/pages/page-scripting.html http://jquerymobile.com/test/docs/pages/page-dynamic.html http://jquerymobile.com/test/docs/pages/page-cache.html http://jquerymobile.com/test/docs/pages/page-transitions.html

[anikralhan]

@toddparker:- 1.Docs link you have send is of beta3. With this there is flicker on page transition(it is not smooth). So I have used a4 and Transition effect is smooth with that. 2.I have js file where all my javascript logic is placed. Since ajax donot read anything inside head tag so I can't include it in head section, for sure. As directed in docs, I included all js, style sheets etc which were earlier in head section but no success in pagecreate event handler as below:-

$("#agriculture").live('pagecreate',function(event){

                document.write('<scr' + 'ipt type="text/javascript" src="jquery-1.6.2.min.js"><\/scr' + 'ipt>');
                document.write('\n'); // adds a line break

                document.write('<link rel="stylesheet" href="jquery.mobile-1.0b3.min.css" />');
                document.write('\n'); // adds a line break

                document.write('<style>html {background-color: #000000;}</style>');
                document.write('\n'); // adds a line break

                document.write('<scr' + 'ipt type="text/javascript" src="jquery.mobile-1.0b3.min.js"><\/scr' + 'ipt>');
                document.write('\n'); // adds a line break

                document.write('<scr' + 'ipt type="text/javascript" charset="utf-8" src="phonegap.js"><\/scr' + 'ipt>');
                document.write('\n');

                document.write('<scr' + 'ipt type="text/javascript" charset="utf-8" src="general.js"><\/scr' + 'ipt>')
                document.write('\n');

    });

Transition effect is fine now but no javascript is executed on next page.

Actually, I have some images on that next page. When user clicks on the desired image, javascipt file checks which image is clicked(using the id of image tag) and therefore, fetch result from database. But since no javascript is executing, nothing can be done. I see an error on console "Failed to load webpage with error: Frame load interrupted". I'm newbie to mobile jquery, so please guide what should I do further to execute my general.js file. I have even tried to put the whole .js content inside pagecreate event but no success.