0

我正在尝试使用 valums 上传 (http://valums.com/ajax-upload/)，但上传区域不可见。我的代码是：

主.jsp

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@page contentType="text/html; charset=UTF-8"%>
<head>
  <title>NET Waiter By KiT</title>
<script type="text/javascript" src="/admin/JQuery/jquery-1.7.2.js"></script>
<script type="text/javascript" src="/admin/JQuery/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="/admin/JQuery/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="/admin/JQuery/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/admin/JQuery/ui/jquery.ui.accordion.js"></script>
<script type="text/javascript" src="/admin/JQuery/ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="/admin/JQuery/ui/jquery.ui.timepicker.js"></script>
<script type="text/javascript" src="/admin/JQuery/ui/jquery.ui.tabs.js"></script>
<script type="text/javascript" src="/admin/JQuery/jquery.jqGrid/js/jquery.jqGrid.js"></script>
<script type="text/javascript" src="/admin/JQuery/jquery.jqGrid/js/i18n/grid.locale-hu.js"></script>

<link rel="stylesheet" type="text/css" href="/admin/style/themes/base/jquery.ui.all.css">
<link rel="stylesheet" type="text/css" href="/admin/style/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/admin/style/themes/main.css">
<link rel="stylesheet" type="text/css" href="/admin/JQuery/jquery.jqGrid/css/ui.jqgrid.css">
<script type="text/javascript">
$(document).ready(function(){
  var ajax_load = "Betöltés...";
$("#hrefUnits").click(function() { 
      $("#content").html(ajax_load).load("/admin/JSP/BaseDates/units.jsp"); 
 });
 </script>
 </head>
  <body>
  <div id="container">
  <div id="navCol">
    <div id="mainmenu">
      <h3 id="administration"><a href="#">Adminisztráció</a></h3>
      <div>
        <p>Rendszer paraméterek, adatok menedzselése</p>
        <ul>
          <li>System params</li>
          <ul>
            <li><a href="#" id="hrefMeals">Meals</a></li>
            <li><a href="#" id="hrefUnits">Units</a></li>
          </ul>
          <br/>
            </ul>
      </div>
      <h3 id="other"><a href="#">Other</a></h3>
      <div>
        <p>Other Action</p>
        <ul>
          <li><script type="text/javascript" src="/admin/JQuery/ui/themeswitchertool.js"></script>
          <div id="switcher"></div></li>
          <li><a href="/admin/index.jsp">Exit</a></li>
        </ul>
      </div>
    </div> <!--  div mainmenu -->
  </div> <!-- div navCol -->
  <div id="content">
  </div> <!-- div content -->
</div>

单元.jsp

<%@page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>

<script type="text/javascript">
$(document).ready(function(){
    jQuery("#unitsTable").jqGrid({
        jsonReader:{
            repeatitems: false,
            root: 'rows',
            page: 'page',
            cell: 'cell',
            id: 'id'
        },
        url:'/admin/UnitsServlet',
        mtype: 'GET',
        datatype: 'json',
        loadonce:true,
        colNames:['Name', 'Shortname', 'Comment', 'Status'],
        colModel:[
            {name:'name', index:'name', editable: true},
            {name:'shortname', index:'shortname', align: 'right', editable: true},
            {name:'comment', index:'commnet', editable: true},
            {name:'status', index:'status', align:'center', width: 70, 
                editable:true, edittype:"select", editoptions:{value:
                    "ACTIVE:ACTIVE;INACTIVE:INACTIVE"
                },
             hidden: true
            },
        ],
        sortname: 'name',
        rowNum:25,
        rowList: [5, 10, 25],
        caption: "Mértékegység lista",
        hidegrid: false,
        height: 590,
        width: 690,
        pager: "#unitsTablePager",
        viewrecords: true,
        editurl: "/admin/UnitsServlet",
        // multiselect: true,
    }).navGrid('#unitsTablePager', {edit:true, add:true, del:true, search:true},
        { //edit options
            afterSubmit: function(){
               jQuery("#unitsTable").setGridParam({datatype: 'json', page: 1});
               return [true, ''];
            },
            reloadAfterSubmit: true,
        }, 
        { //add options
            afterSubmit: function(){
                $(this).setGridParam({datatype: 'json', page: 1});
                return [true, '', false];
            },
            reloadAfterSubmit: true,
            // closeAfterAdd: true
        }, 
        { //delete options
            afterSubmit: function(){
                   jQuery("#unitsTable").setGridParam({datatype: 'json', page: 1});
                   return [true, ''];
                },
            reloadAfterSubmit: true,
        }, 
        { //search options
        }  
    ).navSeparatorAdd('#unitsTablePager', {
    }).navButtonAdd('#unitsTablePager', {
        caption: 'XLS',
        buttonicon: 'none',
        onClickButton: function(){
            jQuery("#unitsTable").excelExport({
                url:'/admin/Export?listtype=listallnotdeletedunits&type=XLS'
            });
        },
        title: 'Lista mentés Excel-be',
    }).navSeparatorAdd('#unitsTablePager', {
    }).navButtonAdd('#unitsTablePager', {
        caption: 'PDF',
        buttonicon: 'none',
        onClickButton: function(){
            jQuery("#unitsTable").excelExport({
                url:'/admin/Export?listtype=listallnotdeletedunits&type=PDF'
            });
        },
        title: 'Lista mentés PDF-be',
    });
});
</script>

<body>
  <div id="units" style="outline-width: 0px; outline-style: initial; outline-color: initial; width:714px; position: relative; display: block; z-index: 1002; left: 0px; top: 0px; height: 759px; " class="ui-dialog ui-widget ui-widget-content ui-corner-all" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog">
    <div id="unitsHeader"class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <table width="100%">
        <tr>
          <td width="30%">
            <span class="ui-dialog-title" id="ui-dialog-title-dialog">Mértékegységek</span>
          </td>
          <td width="70%" align="right">
            <div id="units">
            </div> 
          </td>
        </tr>    
      </table>
    </div>
    <div id="unitsEditorContent" class="ui-dialog-content ui-widget-content" style="width: auto; height: 670px; ">
      <table id="unitsTable"></table>
      <div id="unitsTablePager"></div>
    </div>
   <div id="fileUploader"></div>
   <link href="/admin/JQuery/jquery.Util/fileupoader.css" rel="stylesheet" type="text/css">
   <script type="text/javascript" src="/admin/JQuery/jquery.Util/fileupoader.js"></script>
    <script>        
    function createUploader(){            
        new qq.FileUploader({
            element: document.getElementById('fileUploader'),
            action: '/admin/Import',
            multiple: false,
            debug: true
        });           
    }
    window.onload = createUploader;     
    </script> 
    <div class="ui-resizable-handle ui-resizable-n"></div>
    <div class="ui-resizable-handle ui-resizable-e"></div>
    <div class="ui-resizable-handle ui-resizable-s"></div>
    <div class="ui-resizable-handle ui-resizable-w"></div> 
  </div>

当我单击 main.jsp 上的 Unit 菜单时，unit.jsp 被加载到内容 div 中，但<div id="fileUploader"></div>丢失了。我检查了 Chrome - 工具 - 开发人员工具菜单，但它不在我的页面中。我能做些什么来解决这个问题？

THX 套件

我清理了 main.jsp 但什么也没发生....

<script type="text/javascript" src="/admin/JQuery/jquery-1.7.2.js"></script>
<script type="text/javascript" src="/admin/JQuery/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="/admin/JQuery/jquery.jqGrid/js/jquery.jqGrid.js"></script>
<script type="text/javascript" src="/admin/JQuery/jquery.jqGrid/js/i18n/grid.locale-hu.js"></script>

<link rel="stylesheet" type="text/css" href="/admin/style/themes/base/jquery.ui.all.css">
<link rel="stylesheet" type="text/css" href="/admin/style/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/admin/style/themes/main.css">
<link rel="stylesheet" type="text/css" href="/admin/JQuery/jquery.jqGrid/css/ui.jqgrid.css">
4

2 回答 2

0

我认为问题出在这里：

 <script type="text/javascript" src="/admin/JQuery/jquery-1.7.2.js"></script>
 <script type="text/javascript" src="/admin/JQuery/jquery-ui-1.8.13.custom.min.js"></script> 
<script type="text/javascript" src="/admin/JQuery/ui/jquery.ui.core.js"></script>

我过去遇到过这个问题，因为您导入了具有相同功能的“.js”文件 - 我的意思是 jquery-1.7.2 和 jquery-ui.1.8.13 和 jquery.ui.core 可能是相同的，但是只有不同的版本。首先，删除 jquery.ui.core.js 或 jquery-ui-1.8.13.custom.min.js，如果不起作用，则将两者都删除并检查是否再次起作用。

于 2012-07-07T23:46:46.783 回答
0

我解决了...您必须以这种格式将其放在正文代码之前:)

<script>        
    $(document).ready(function createUploader(){
      var uploader = new qq.FileUploaderValums({
        element: document.getElementById('fileUploader'),
        action: '/admin/Import',            
      });           
    });
</script>
于 2012-07-09T09:02:21.727 回答