duandeng2265
duandeng2265
2015-07-16 14:36

jQuery在PC上运行但在WAMP或Shared Server上运行

已采纳

I don't know why but I have a piece of code which works on my system but is not working on WAMP or Shared server.

Below is my piece of code :-

<html>
  <body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script type="text/javascript">

      (function($) {

        $.ajax({
          url:"select2.json",
          type:"GET",
          dataType:"json",
          success:function(data){

            var selectedDepartment, selectedSubproj;

            $.fn.changeType = function() {

              var options_projname = '<option>Select<\/option>';
              $.each(data, function(i, d) {
                options_projname += '<option value="' + d.projname + '">' + d.projname + '<\/option>';
              });
              $("select#projname", this).html(options_projname);

              $("select#projname").change(function() {
                var index = $(this).get(0).selectedIndex;

                var d = data[index - 1]; // -1 because index 0 is for empty 'Select' option
                selectedDepartment = d;
                var options = '';
                if (index > 0) {
                  options += '<option>Select<\/option>';
                  $.each(d.subproj, function(i, j) {
                    options += '<option value="' + j.title + '">' + j.title + '<\/option>';
                  });
                } else {
                  options += '<option>Select<\/option>';
                }
                $("select#subproj").html(options);
              });
              $("select#subproj").change(function() {
                var index = $(this).get(0).selectedIndex;
                selectedSubproj = selectedDepartment.subproj[index -1];
                var options = '';
                if (index > 0) {
                  $.each(selectedSubproj.unit, function(i, b) {
                    //options += '<option value="' + b.name + '">' + b.name + '<\/option>';
                    options += '<input type="checkbox" name="' + b.name + '" value="' + b.name + '">' + b.name + '<br/>';
                  });
                } else {
                  options += '<option>Select<\/option>';
                }
                $("#unit").html(options);
              });
            };


          }
        });
      })(jQuery);

      $(document).ready(function() {
        $("form#search").changeType();
      });
    </script>

    <form id="search" action="" name="search">
      <select name="projname" id="projname">
        <option>Select</option>
      </select>

      <select name="subproj" id="subproj">
        <option>Select</option>
      </select>

      <div name="unit" id="unit">

      </div>

    </form>
  </body>
</html>

I am getting the following error when I run in WAMP or Shared Server. http://s8.postimg.org/vj19w76v9/error.png But it runs fine if I run it like a normal html file on my pc. My JSON is also rendering very well so I know that there is no issue with it.

I tried clearing cache and all the good stuff but its eating my brain off...

Would be glad if someone could help.

Thanks in advance... Cheers...

</div>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • dongxuandong2045 dongxuandong2045 6年前

    The problem is that you are defining your changeType plugin in your success callback of the ajax call. Thus, at the time the document is ready, when you call that plugin, it will be undefined. You will need to define the plugin first and think of a way to pass the data variable you get from the ajax call by parameter. I believe something rough like this should work:

    (function ($) {
        $.fn.changeType = function (data) {
            var selectedDepartment, selectedSubproj;
            var options_projname = '<option>Select<\/option>';
            $.each(data, function (i, d) {
                options_projname += '<option value="' + d.projname + '">' + d.projname + '<\/option>';
            });
            $("select#projname", this).html(options_projname);
    
            $("select#projname").change(function () {
                var index = $(this).get(0).selectedIndex;
    
                var d = data[index - 1]; // -1 because index 0 is for empty 'Select' option
                selectedDepartment = d;
                var options = '';
                if (index > 0) {
                    options += '<option>Select<\/option>';
                    $.each(d.subproj, function (i, j) {
                        options += '<option value="' + j.title + '">' + j.title + '<\/option>';
                    });
                } else {
                    options += '<option>Select<\/option>';
                }
                $("select#subproj").html(options);
            });
            $("select#subproj").change(function () {
                var index = $(this).get(0).selectedIndex;
                selectedSubproj = selectedDepartment.subproj[index - 1];
                var options = '';
                if (index > 0) {
                    $.each(selectedSubproj.unit, function (i, b) {
                        //options += '<option value="' + b.name + '">' + b.name + '<\/option>';
                        options += '<input type="checkbox" name="' + b.name + '" value="' + b.name + '">' + b.name + '<br/>';
                    });
                } else {
                    options += '<option>Select<\/option>';
                }
                $("#unit").html(options);
            });
        };
    
    
    })(jQuery);
    
    $(document).ready(function () {
        $.ajax({
            url: "select2.json",
            type: "GET",
            dataType: "json",
            success: function (data) {
                $("form#search").changeType(data);
            }
        });
    });
    
    点赞 评论 复制链接分享