Codeigniter & Jquery Ajax, working on Localhost but not on Server, 404 Error
<blockquote>
  <p>This one took a whole day to figure out. And no matter how silly it
  may sound but it was what it was, a silly spelling mistake, not
  exactly a spelling mistake, I spelled controllers in the
  <strong>application>modules>Contact>controllers</strong> as <strong>application>modules>Contact>Controllers</strong> see the capitalization of the 'C' of the controllers. :|</p>
</blockquote>

<p>I tried the target url with the trailing '/' and without '/' and I tried to provide url manually to the ajax function instead of fetching it from the <code>action</code> attribute of the <code>&lt;form&gt;</code> but nothing worked. <strong>I keep getting Error 404</strong> what's going on ?</p>

<ol>
<li>alert (  jqXHR.responseText  ); <strong>Returns 404 html</strong></li>
<li>alert (  textStatus  ); <strong>Returns string 'error'</strong></li>
<li>alert (  errorThrown  ); <strong>Returns string 'Not Found'</strong></li>
</ol>

<p>I am using wiredesignz HMVC and Controller Contact resides in application>modules>Contact>controllers>Contact.php</p>

<blockquote>
  <p>One thing to mention, For some reason I can not access
  <a href="http://example.com/Contact" rel="nofollow">http://example.com/Contact</a> if I try to access it via url in a browser,
  I always get error 404. both on localhost and online</p>
  
  <p>Although I can access other controllers/pages on the website</p>
</blockquote>

<p><strong>FORM HTML</strong></p>

<pre><code>&lt;form id="contact-form" class="form-horizontal subscribe" accept-charset="utf-8" action="&lt;?= base_url ( 'Contact/' ); ?&gt;" method="post"&gt;
    &lt;!--Name--&gt;
    &lt;div class="form-group"&gt;
        &lt;label class="sr-only" for="name"&gt;Name&lt;/label&gt;
        &lt;div class="input-group"&gt;
            &lt;div class="input-group-addon"&gt;&lt;span class="glyphicon glyphicon-user" aria-hidden="true"&gt;&lt;/span&gt;&lt;/div&gt;
            &lt;input id="name" type="text" class="form-control validate" name="name" placeholder="Your full name" value=""&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--Email--&gt;
    &lt;div class="form-group"&gt;
        &lt;label class="sr-only" for="email"&gt;Email&lt;/label&gt;
        &lt;div class="input-group"&gt;
            &lt;div class="input-group-addon"&gt;&lt;span class="glyphicon glyphicon-envelope" aria-hidden="true"&gt;&lt;/span&gt;&lt;/div&gt;
            &lt;input id="email" type="text" class="form-control validate" name="email" placeholder="Your email address" value=""&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--Message--&gt;
    &lt;div class="form-group"&gt;
        &lt;label class="sr-only" for="message"&gt;Message&lt;/label&gt;
        &lt;div class="input-group"&gt;
            &lt;div class="input-group-addon"&gt;&lt;span class="glyphicon glyphicon-envelope" aria-hidden="true"&gt;&lt;/span&gt;&lt;/div&gt;
            &lt;textarea id="message" name="message" class="form-control" rows="3" placeholder="Message"&gt;&lt;/textarea&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--Submit Button--&gt;
    &lt;div class="form-group text-right"&gt;
        &lt;input id="contact_us" type="hidden" name="contact_us" value="Submit" /&gt;

        &lt;button type="submit" id="contact_us" class="btn btn-warning" name="contact_us" value="Submit"&gt;
            Send &amp;nbsp;&lt;span class="glyphicon glyphicon-send" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;/button&gt;
    &lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p><strong>JAVASCRIPT</strong></p>

<pre><code>&lt;script&gt;
$( '#contact-form' ).submit ( function ( event ) {

    event.preventDefault (  );
    event.stopPropagation (  );

    var $scriptUrl = $( '#contact-form' ).attr ( 'action' );

    var $data = new FormData( $( '#contact-form' ) [ 0 ] );
    $data.append ( 'myUrl', window.location.href );

    $.ajax ( {
        method : 'POST',
        url : $scriptUrl,
        data    : $data,
        cache : false,
        processData: false,
        contentType: false,
        dataType : 'json',
        success : function ( data, textStatus, jqXHR ) {
            if ( data.success === true ) { alert ('success'); }
            else { alert ('failure'); }
        },
        error : function ( jqXHR, textStatus, errorThrown ) {
            alert (  jqXHR.responseText  );
        }
    } );

} );
&lt;/script&gt;
</code></pre>

<p><strong>Controller</strong> <em>(<a href="http://example.com/Contact" rel="nofollow">http://example.com/Contact</a>)</em></p>

<pre><code>/*I am testing with print_r($_POST); only for the time being*/

&lt;?php defined('BASEPATH') OR exit('No direct script access allowed');

class Contact extends  MX_Controller {

    private $data;

    public function __construct (  )
    {
        $this-&gt;data['stylesheets'] = [ 'welcome' ];
        $this-&gt;data['javascripts'] = [ 'welcome' ];
    }

    public function index (  )
    {
        print_r($_POST);
    }
}
</code></pre>

<p><em>.htaccess</em></p>

<pre><code>&lt;IfModule mod_rewrite.c&gt;
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA] 


&lt;Files "index.php"&gt;
AcceptPathInfo On
&lt;/Files&gt;  
&lt;/IfModule&gt;

&lt;IfModule !mod_rewrite.c&gt;

ErrorDocument 404 /index.php
&lt;/IfModule&gt;
</code></pre>