jquery ajax: doctype syntax error and $ is not defined error on remote server
Question by vaanipala
My jquery ajax code is working fine on my local server. However, it is not working on the remote server justhost.com. This is driving me nuts. 🙁 Can someone point out on where i’m going wrong?
Merry Flowers is the link to my website. When u go to the website with firebug on, u will be able to see the below mentioned errors.
When I try to debug with firebug, i’m getting the following 2 errors:
i’m getting a syntax error on the following line:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I tried with different doctypes and I was still getting the same errors.
i’m getting “$ is not defined error” on the following line:
$(document).ready(function(){
Google chrome developer tool’s errors:
Resource interpreted as Script but transferred with MIME type text/html: "http://www.merryflowers.com/js/jquery.js".
jquery.js:1Uncaught SyntaxError: Unexpected token <
home:8Uncaught ReferenceError: $ is not defined
When i click on network tab for chrome developer tool,
jquery.js's type is text/html not application/javascript. While the other javascript files are of type application/javascript.
cakephp’s original default.ctp code after all the corrections as requested by Lazerblade:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
echo $this->Html->charset();
?>
<title>
<?php __('Merry Flowers Montessori'); ?>
<?php echo $title_for_layout; ?>
</title>
<?php
//echo $this->Html->meta('icon');
echo $this->Html->css('cake.generic'); //link to cake.generic.css will be
placed in $scripts_for_layout
echo $this->Html->css('navbar.css');
echo $this->Html->script('jquery.js'); //Include jquery library
/* echo $this->Html->script('swfobject.js');
*/
echo $this->Session->flash();
echo $this->Session->flash('email');
echo $scripts_for_layout;
?>
<script type="text/javascript">
//var j=jQuery.noConflict();
$(document).ready(function(){
$("#MerryParentEmail").change(function(){
//txt=$("#MerryParentEmail").val();
email_id=$("#MerryParentEmail").serialize();
//alert(txt);
$.post("/students/get_parent_info",email_id,function(result_str){
result_array=result_str.split('*****');
$("#MerryParentInitial").val(result_array[0]);
$("#MerryParentName").val(result_array[1]);
$("#MerryParentLandline").val(result_array[2]);
$("#MerryParentMobile").val(result_array[3]);
$("#MerryParentAddress").val(result_array[4]);
$("#MerryParentStateId").val(result_array[5]);
state=result_array[5];
txt_str="state_id="+state;
$.get("/students/getcities",txt_str,function(result){
$("#MerryParentCityId").html(result).show();
$("#MerryParentCityId").val(result_array[6]);
});
$("#MerryParentPostalCode").val(result_array[7]);
});
});
$("#MerryParentStateId").change(function(){
state=$(this).val();
txt_str="state_id="+state;
$.get("/students/getcities",txt_str,function(result){
$("#MerryParentCityId").html(result).show();
});
});
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<?php
echo $this->element('logo');
echo $this->element('navbar');
?>
</div> <!-- finish div header -->
<div id="content">
<div>
<div id="content1">
<?php echo $content_for_layout; ?>
</div>
<div id="content2">
<?php
echo $this->Html->link($this->Html->image("admission_open.gif",array("alt"=>"admissions")),
"/students/add",array('escape'=>false)); //if escape is false, admission_open.gif
displays, otherwise only link <img src="/merry_flowers/img/admission_open.gif" alt="admissions"/> displays.
echo $this->Html->image("contact_us.gif", $options=array());
?>
</div>
</div>
</div> <!--finish div content-->
<div id="footer">
© 2011 Merry Flowers Montessori | Designed by VRI Web
</div>
</div><!--div container finish-->
</body>
</html>
The following is the view source code of default.ctp after all the corrections (the layout page in cakephp).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>
Merry Flowers Montessori Home </title>
<link rel="stylesheet" type="text/css" href="/css/cake.generic.css" /><link rel="stylesheet" type="text/css" href="/css/navbar.css" /><script type="text/javascript" src="/js/jquery.js"></script><script type="text/javascript" src="/js/swfobject.js"></script> <script type="text/javascript">
//var j=jQuery.noConflict();
$(document).ready(function(){
$("#MerryParentEmail").change(function(){
//txt=$("#MerryParentEmail").val();
email_id=$("#MerryParentEmail").serialize();
//alert(txt);
$.post("/students/get_parent_info",email_id,function(result_str){
result_array=result_str.split('*****');
$("#MerryParentInitial").val(result_array[0]);
$("#MerryParentName").val(result_array[1]);
$("#MerryParentLandline").val(result_array[2]);
$("#MerryParentMobile").val(result_array[3]);
$("#MerryParentAddress").val(result_array[4]);
$("#MerryParentStateId").val(result_array[5]);
state=result_array[5];
txt_str="state_id="+state;
$.get("/students/getcities",txt_str,function(result){
$("#MerryParentCityId").html(result).show();
$("#MerryParentCityId").val(result_array[6]);
});
$("#MerryParentPostalCode").val(result_array[7]);
});
});
$("#MerryParentStateId").change(function(){
state=$(this).val();
txt_str="state_id="+state;
$.get("/students/getcities",txt_str,function(result){
$("#MerryParentCityId").html(result).show();
});
});
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<div>
<div style="float:left; width:98%; background-color:#ffffff;">
<img src="/img/logo.png" alt="" /> </div>
<div style="float:right; width:5%; top:100%; right:10%;">
<a href="/pages/home">Home</a> </div>
</div><div id="menu">
<ul id="nav">
<!-- <li><a href="/pages/home">Home</a></li>
--> <li><a href="#">Our Program</a><ul>
<li><a href="/pages/preschool">Preschool</a></li>
<li><a href="/pages/kindergarten">Kindergarten</a></li>
<li><a href="/pages/summer_camp">Summer Camp</a></li>
</ul>
</li>
<li><a href="#">About Us</a><ul>
<li><a href="/pages/about_us">Merry Flowers</a></li>
<li><a href="/pages/tour_our_school">Tour Our School</a></li>
<li><a href="/pages/contact_us">Contact Us</a></li>
</ul>
</li>
<li><a href="#">My Child</a><ul>
<li><a href="/merry_parents/register">Report Card</a></li>
</ul>
</li>
<li><a href="#">Events</a><ul>
<li><a href="#">News & Events</a> <ul>
<li><a href="/pages/sports_day">Sports Day</a></li>
<li><a href="/pages/annual_day">Annual Day</a></li>
</ul>
</li>
<li><a href="/pages/list_of_holidays">List of Holidays</a></li>
</ul>
</li>
<li><a href="#">FAQ</a><ul>
<li><a href="/pages/faq">FAQ</a></li>
<li><a href="/feedbacks/add">Feedback</a></li>
<li><a href="/forum/home">Discussion</a></li>
</ul>
</li>
<li><a href="#">Admissions</a><ul>
<li><a href="/students/add">Enroll Now</a></li>
</ul>
</li>
</ul><!--finish ul nav-->
</div> <!--finish div menu--> </div> <!-- finish div header -->
<div id="content">
<div>
<div id="content1">
<script type="text/javascript">
//<![CDATA[
swfobject.embedSWF("/main_ani.swf", "content1", "530", "300", "9.0.0",
"", {}, {wmode : "opaque"}, {});
//]]>
</script> </div>
<div id="content2">
<a href="/students/add"><img src="/img/admission_open.gif" alt="admissions" /></a><img src="/img/contact_us.gif" alt="" />
</div>
</div>
</div> <!--finish div content-->
<div id="footer">
© 2011 Merry Flowers Montessori | Designed by VRI Web
</div>
</div><!--div container finish-->
</body>
</html>
By the way, i’m using jquery with cakephp. Thank you.
Answer by Lazerblade
Check again. The issue isn’t the jQuery file itself, it’s in the way it’s being added, possibly the .htaccess file has a conflict, or the path is set up wrong. It’s trying to load an error page. Look at the preview and response in Chrome Developer Tools, specifically the response when it loads jQuery.js. You’re loading your website page when you request the jQuery file. I’d need to see more of the actual code, not the view source, in order to figure out the exact issue, but the result is that jQuery isn’t loading…
EDIT: Check that your jQuery file is indeed in the /js/ folder and that it is named exactly jquery.js, not jquery.latest.min.js or something along those lines. Filenames are case sensitive, so if it’s jQuery.js (note the capital Q), you’ll need to rename or change your code. Also open the jQuery file and make sure it’s not empty (often “downloading” jQuery requires opening the file in your browser as plain text, copying all, pasting into a file, and saving that file).
EDIT2: If this is working locally but not remotely, there are 2 possible reasons. You’re either missing the rewrite conditions in your .htaccess file in your public folder, or you have /localhost/ in one of your config files, either apache httpd.config or an .htaccess file, or possibly in your config.php file (called from index.php in your public folder).
Options -Indexes
RewriteEngine on
#
# Redirect all non-image and non-file requests to index.php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?url=$1 [PT,L]
Example of .htaccess in your public folder, to redirect all requests whose path is not in your public folder to go to your index file instead.
Answer by Starx
The way you are sending the request is
$.post("../students/get_parent_info" ... );
Which seem more like a directory traversing not a link. Even though it might seem to work in a phase, you should use this. You might have to provide direct link like
$.post("http://domain.com/students/get_parent_info", ... );
