如何将其应用于我在jquerymobile中的所有页面

Question

Im using jquerymobile together with codeigniter framework and I'm having a problem

I have this script below and I want it to be trigger in all of my pages.

<script type="text/javascript">
        var i = 0;
    $(function() {
        $("#h1").hide();
        $("#h2").hide();
        $("#h3").hide();
        <? if ($account_type != 'prepaid' && $account_type != 'PREPAID') : ?>
            $("#h4").hide();
        <? endif ?>
        head();
        setInterval('head()',2000);
    });

        function head()
        {
            i++;
            if (i==1) h1();
            if (i==2) h2();
            <? if ($account_type == 'prepaid' || $account_type == 'PREPAID') : ?>
                if (i==3){ h3(); i=0; }
            <? else : ?>
                if (i==3) h3();
                if (i==4){ h4(); i=0; }
            <? endif ?>
        }

        function h1()
        {
            <? if ($account_type == 'prepaid' || $account_type == 'PREPAID') : ?>
                $("#h3").hide();
            <? else : ?>
                $("#h4").hide();
            <? endif ?>
            $("#h1").fadeIn().delay(1000);
            //h2();
        }

        function h2()
        {
            $("#h1").hide();
            $("#h2").fadeIn().delay(1000);
        }

        function h3()
        {
            $("#h2").hide();
            $("#h3").fadeIn().delay(1000);
        }

        function h4()
        {
            $("#h3").hide();
            $("#h4").fadeIn().delay(1000);
        }

    </script>

tried replacing the $(function() { to $(document).bind('pageinit', function () { but still doesn't work. The function only fires in my index.php not in the other pages. Please help.

Answer 1

Try this one. Prepare an index file with following scripts

<script type="text/javascript">
var i = 0;
$(function() {
    start();        
});

function start(){

    $("#h1").hide();
    $("#h2").hide();
    $("#h3").hide();
    <? if ($account_type != 'prepaid' && $account_type != 'PREPAID') : ?>
        $("#h4").hide();
    <? endif ?>
    head();
    setInterval('head()',2000);
}

    function head()
    {
        i++;
        if (i==1) h1();
        if (i==2) h2();
        <? if ($account_type == 'prepaid' || $account_type == 'PREPAID') : ?>
            if (i==3){ h3(); i=0; }
        <? else : ?>
            if (i==3) h3();
            if (i==4){ h4(); i=0; }
        <? endif ?>
    }

    function h1()
    {
        <? if ($account_type == 'prepaid' || $account_type == 'PREPAID') : ?>
            $("#h3").hide();
        <? else : ?>
            $("#h4").hide();
        <? endif ?>
        $("#h1").fadeIn().delay(1000);
        //h2();
    }

    function h2()
    {
        $("#h1").hide();
        $("#h2").fadeIn().delay(1000);
    }

    function h3()
    {
        $("#h2").hide();
        $("#h3").fadeIn().delay(1000);
    }

    function h4()
    {
        $("#h3").hide();
        $("#h4").fadeIn().delay(1000);
    }

</script>

now, call this function when you initpage like the following

$('#my_page').live('pageinit',function(event){
start();

});

Answer 2

Try this:

$(document).bind('mobileinit', function () {
    var i = 0;

    $(function() {
        $("#h1").hide();
        $("#h2").hide();
        $("#h3").hide();
        <? if ($account_type != 'prepaid' && $account_type != 'PREPAID') : ?>
            $("#h4").hide();
        <? endif ?>
        head();
        setInterval('head()',2000);
    });

    function head()
    {
        i++;
        if (i==1) h1();
        if (i==2) h2();
        <? if ($account_type == 'prepaid' || $account_type == 'PREPAID') : ?>
            if (i==3){ h3(); i=0; }
        <? else : ?>
            if (i==3) h3();
            if (i==4){ h4(); i=0; }
        <? endif ?>
    }

    function h1()
    {
        <? if ($account_type == 'prepaid' || $account_type == 'PREPAID') : ?>
            $("#h3").hide();
        <? else : ?>
            $("#h4").hide();
        <? endif ?>
        $("#h1").fadeIn().delay(1000);
        //h2();
    }

    function h2()
    {
        $("#h1").hide();
        $("#h2").fadeIn().delay(1000);
    }

    function h3()
    {
        $("#h2").hide();
        $("#h3").fadeIn().delay(1000);
    }

    function h4()
    {
        $("#h3").hide();
        $("#h4").fadeIn().delay(1000);
    }
}).trigger('mobileinit');

Answer 3

If you want to fire in other pages too. Include the script in all pages. Using

<script src="common.js"></script>