1. 技术文章
  2. jquery ajax: doctype syntax error and $ is not defined error on remote server

jquery ajax: doctype syntax error and $ is not defined error on remote server

由 亡梦爱人 提交于 2020-01-16 11:49:28

问题


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"> 
            &copy;  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 &amp; 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"> 
        &copy;  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.


回答1:


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.




回答2:


The most probable answer could be the way you have linked your jquery file. 

<script type="text/javascript" src="/js/jquery.js"></script>

Check firebug > Scripts and see what the result of jquery.js is. If I guessed it right, jquery.js is not returning the jquery code instead returning either 404 or something.




回答3:


CakePHP has a feature where it will generate its urls nicely. It's very easy to use see HTML Helper URL.

Your jQuery issue I believe isn't related to CakePHP. My guess would either be your jQuery file link is invalid or your jQuery context is broken. Hard to tell.

EDIT: After seeing your page, im guessing that the problem is either.

  • You are adding a full HTML document into each of the .ctp templates. This only needs to be in the default.ctp
  • Or you are loading your complete page again with Ajax, whilst within your current page.



回答4:


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", ... );



回答5:


Ok with lazerblade's guidance, I found the problem, there was no jquery.js in public_html/merry_flowers/js and www/merry_flowers/js folders. Now after adding jquery.js into those folders i'm not getting any errors in jquery.js's network response (chrome developer tool's network) anymore and jquery.js is of type application/javascript in network. However, my jquery functions are not working yet. So, i have to look into that now.

thanks a tonnes to all of you guys. YOur help is priceless!



来源：https://stackoverflow.com/questions/10133490/jquery-ajax-doctype-syntax-error-and-is-not-defined-error-on-remote-server

标签
jquery
ajax
cakephp
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!