AJAX and 500 Internal Server Error

Question

I'm building a web application in CodeIgniter and I'm using jQuery and AJAX. I created the whole app locally (using XAMPP) and everything worked fine. After I uploaded the app to my web hosting, one AJAX keeps failing. Here is the part of the code:

// Get all form inputs
var inputs = $('#app-options-existing-form :input[type="text"]');

// Put them in object as name=>value
var data = {};

for(i=0; i<inputs.length; i++) {
    data[inputs[i]["name"]] = inputs[i]["value"];
}

// Put loader while AJAX is working
$(".app-content-container").html('<center><img class="loader" src="<?php echo base_url();?>/img/loader.gif" ></center>');

console.log(data);

// Generate POST request
$.post("<?php echo site_url("admin/ajax_app_options"); ?>",
{"add_existing_form_submited" : true, "data" : data2},
function (data) {
    alert("test" + data);       
});

Here's the console showing error and result of console.log(data)

First, I thought that the key ("d1d1d1") was the problem because I was first using "1-1-1" and after I manually changed it, it was working. But then I changed everything in "d1d1d1" and it doesn't work again. As I said, it works on XAMPP but not on server. Can be a problem in using full URL for AJAX, instead of relative one? But I'm using it in other AJAX requests as well and it works.

Answer 1

Pretty sure you problem is this guy '<center><img class="loader" src="<?php echo base_url();?>/img/loader.gif" ></center>'

Yours source is going to output literally to <?php echo base_url();?>/img/loader.gif which is of course not a real link. Therefore it is a resource that can not be loaded.

You might want to try instead using: '<center><img class="loader" src="/img/loader.gif" ></center>'

The base_url() function is just going to return '/' anyway.

Important! In general you can not write php in javascript. Or this would be a massive security hole that would give every user who visits your site unlimited access to your server.