Java jQuery、jsp、valums上传-上传区don'；看不见_Java_Jquery_Jsp

Java jQuery、jsp、valums上传-上传区don'；看不见

java jquery jsp

Java jQuery、jsp、valums上传-上传区don'；看不见,java,jquery,jsp,Java,Jquery,Jsp,我正在尝试使用valums上传(http://valums.com/ajax-upload/)，但上载区域不可见。我的代码是： main.jsp <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <%@page contentType="text/html; charset=UTF-8"%> <head> <title>NET Waiter By KiT</title>

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

main.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>


网络服务员
$（文档）.ready（函数（）{
var ajax_load=“Betöltés…”；
$（“#hrefUnits”）。单击（函数（）{
$（“#content”）.html（ajax_load）.load（“/admin/JSP/BaseDates/units.JSP”）；
});
伦兹·帕拉梅·特雷克（Rendszer paraméterek），adatok menedzselése

系统参数







其他行动

unit.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>


$（文档）.ready（函数（）{
jQuery（“#unitsTable”）.jqGrid({
jsonReader：{
重复项：false，
root:'行'，
第页：'第页'，
单元格：'单元格'，
id:'id'
},
url:“/admin/UnitsServlet”，
mtype:'获取'，
数据类型：“json”，
有一次：是的，
colNames:['Name'，'Shortname'，'Comment'，'Status']，
colModel：[
{name:'name'，index:'name'，可编辑：true}，
{name:'shortname'，索引：'shortname'，对齐：'right'，可编辑：true}，
{名称：'comment'，索引：'commnet'，可编辑：true}，
{名称：'status'，索引：'status'，对齐：'center'，宽度：70，
可编辑：true，edittype:“选择”，editoptions:{值：
“活动：活动；非活动：非活动”
},
隐藏：真的
},
],
sortname:'名称'，
行数：25，
行列表：[5,10,25]，
描述：“Mértékegység lista”，
希德格里德：错，
身高：590，
宽度：690，
寻呼机：“unitsTablePager”，
viewrecords：是的，
editurl:“/admin/UnitsServlet”，
//多选：对，
}).navGrid（“#unitsTablePager”，{edit:true，add:true，del:true，search:true}，
{//编辑选项
后提交：函数（）{
setGridParam（{datatype:'json'，page:1}）；
返回[true'，]；
},
reloadAfterSubmit：对，
}, 
{//添加选项
后提交：函数（）{
$（this.setGridParam（{datatype:'json'，page:1}）；
返回[真”，“假]；
},
reloadAfterSubmit：对，
//closeAfterAdd:true
}, 
{//删除选项
后提交：函数（）{
setGridParam（{datatype:'json'，page:1}）；
返回[true'，]；
},
reloadAfterSubmit：对，
}, 
{//搜索选项
}  
).navSeparatorAdd（“#UnitStablePage”{
}).navbuttonad（“#unitsTablePager”{
标题：“XLS”，
按钮：“无”，
onClickButton:function（）{
jQuery（“#unitsTable”）.excelExport({
url:“/admin/Export？listtype=listallnotdeletedunits&type=XLS”
});
},
标题：'Lista ments Excel be'，
}).navSeparatorAdd（“#UnitStablePage”{
}).navbuttonad（“#unitsTablePager”{
标题:"PDF",，
按钮：“无”，
onClickButton:function（）{
jQuery（“#unitsTable”）.excelExport({
url:“/admin/Export？listtype=listallnotdeletedunits&type=PDF”
});
},
标题：'Lista ments PDF be'，
});
});
梅尔特·凯吉斯·盖克
函数createUploader（）{
新的qq.FileUploader({
元素：document.getElementById（'fileUploader'），
操作：'/admin/Import'，
多重：假，
调试：正确
});           
}
window.onload=createUploader；

当我单击main.jsp上的Unit菜单时，Unit.jsp被加载到content div中，但是

丢失了。我在Chrome-Tools-Developer Tools菜单中进行了检查，但它不在我的页面中。我能做些什么来解决这个问题

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">

我认为问题在于：

 <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，如果不起作用，则删除这两个文件并检查它是否再次起作用。

我解决了它…你必须以这种格式将其放在正文代码之前：）


$（document）.ready（函数createUploader（）{
var uploader=new qq.FileUploaderValums({
元素：document.getElementById（'fileUploader'），
操作：'/admin/Import'，
});           
});

我看到您已经包含了jquery ui js。为什么要包含单独的脚本文件（小部件、手风琴等）？我清理了main.jsp，但什么也没发生…

<script>        
    $(document).ready(function createUploader(){
      var uploader = new qq.FileUploaderValums({
        element: document.getElementById('fileUploader'),
        action: '/admin/Import',            
      });           
    });
</script>