Question

I have a CodeIgniter web app I’m trying to convert (UPDATE: I’m trying to overlay the JQM UI) [to a jQuery Mobile app]. I’m having problems setting up tabs that link to my CodeIgniter controllers.

This is the code in my “header.php” view – inside a <div data-role="page"></div>. This is called by a main controller, which works fine. Now, the problem: I am trying to set up my jQuery Mobile navbar tabs to call a new controller called inbox.

<div data-role="footer" data-position="fixed">
  <div data-role="navbar">
    <ul>
      <li>
          <a href='<?php echo base_url()."inbox"?>' data-ajax="false">Inbox</a>
      </li>
    </ul>
  </div>
</div>

Without jQuery Mobile, the link works fine and triggers the Inbox CodeIgniter controller, but with JQM enabled in my header.php view, I get a “404 Not Found” page when I click on the Inbox tab.

Update – this jQuery code in the html head:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/all-mobile.css" type="text/css" media="screen"/>

<link rel="icon" href="<?php echo base_url(); ?>assets/images/logo.png" />
<link rel="apple-touch-icon-precomposed" href="<?php echo base_url(); ?>assets/images/logo.png" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

Update 2: If I insert this code in t.js to remove the automatic ajax links:

$(document).bind("mobileinit", function(){
    $.mobile.ajaxEnabled = false;
});

and my new head html code is now:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/t.js"></script>

<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

… the jQuery Mobile does load up but the “inbox” link still generates a 404 page by CI.

UPDATE 3: I determined it’s a problem with something local. When I upload the CI code and the new jQuery Mobile scripts to my web server, the tab linking to my inbox.php controller does in fact work! Does anyone know why it doesn’t work on my local machine using MAMP? Now, it appears that I can’t develop and test locally with this configuration. Is there a fix?

Looking at allowCrossDomainPages at jquerymobile.com/demos/1.2.0/docs/api/globalconfig.html I added $.mobile.allowCrossDomainPages = true; to the jQuery initialization but it did not help the localhost server running MAMP serve up the inbox.php controller – still 404.

UPDATE 4: PROBLEM SOLVED. It turns out there was a problem in the hidden file .htaccess. To rewrite the URI, it contains a “RewriteBase /myapp-mobile/”; this directory became incorrect when I moved it over to the new folder under htdocs.

Answer 1

As per the documentation:

Working with jQuery Mobile’s Auto-initialization – Unlike other jQuery projects, such as jQuery and jQuery UI, jQuery Mobile
automatically applies many markup enhancements as soon as it loads
(long before document.ready event fires).

And…

ajaxEnabled (boolean, default: true): jQuery Mobile will automatically handle link clicks and form submissions through Ajax,
when possible. If false, url hash listening will be disabled as well,
and urls will load as regular http requests.

Looks like it treats all links as ajax requests unless you specifically set that option to false within the mobileinit function, which you don’t yet have.

Use this function below to force jQuery mobile to treat all links as normal http requests.

$(document).bind('mobileinit', function(){
    $.mobile.ajaxEnabled = false;
    // other options to enable on intialization
});