Question

I am having problem with Yii and jQuery mobile. The problem is that jQuery mobile only use js files from rel="external" link, that are inside div with data-role="page". Yii generates active form js at the end of div or in the header

I tried to put

<script src='lala/js.js' type = "text/javascipt"></script>

and I could bind the js and css with :

js.js:

$('div').live('pagebeforeshow', function(event, ui){
$("head").append("<link>");
    css = $("head").children(":last");
    css.attr({
      rel:  "stylesheet",
      type: "text/css",
      href: "/site/css/mobile/mobile.css"
    });
     $.getScript("/site/js/fancyForm_qe.js", function(){
         //some other stuff
     );
     });
   $('.successMessage').hide();
});

the problem is that I want to use Yii functions to add css and js.
Any solutions?

Answer 1

The core problem is that jquery mobile does not include anything that’s returned outside the page div.

Workaround is to use registerScript etc as you usually would, then $markup = $this->render(‘view,$params,true,true); You can then echo the complete markup (with script) inside your jquery mobile page.

PS: There are some changes going on in JQuery Mobile that removes the requirement to wrap pages with a div data-role=page. Beta2 has this, but it seems like it’s bugged.