duandeng2265
2015-07-16 14:36
浏览 55

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 2015-07-16 14:46
    已采纳

    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);
            }
        });
    });
    
    点赞 打赏 评论

相关推荐 更多相似问题