您的位置: 首页  >  技术问答  >  Datepicker将不会显示在模式

Datepicker将不会显示在模式

分类: 技术问答 • 2022-02-11 23:18:17
问题描述：

我正在ASP经典和模态。我有一个页面位于名为tmshiftot的根文件夹中。点击tmshiftot显示按钮，它将显示一个名为ajax的函数，并显示来自另一个页面的内容，它位于子文件夹中。点击页面上的另一个链接将弹出一个模态表单。模态div和函数位于根文件夹页面tmshiftot中，而模态形式位于子文件夹中。我所有的js和css文件也驻留在子文件夹中。Datepicker将不会显示在模式

但是，日期选择器不会加载。我不知道在哪里放置datepicker的js和css，我怀疑存在一些链接问题。请帮助我，非常感谢你。

我在调试时包含错误。很高兴您的帮助。

The file structure

Running debugger and the erros

根页tmshiftot.asp

<!DOCTYPE html> 
<html> 
<head> 
<!-- #include file="include/connection.asp" --> 
<!-- #include file="include/proc.asp" --> 
<!-- #include file="include/option.asp" --> 
<!-- #include file="include/adovbs.inc" --> 
<!-- #include file="include/validate.asp" --> 

<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<title>IQOR</title> 
<!-- Tell the browser to be responsive to screen width --> 
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> 
<!-- Bootstrap 3.3.6 CSS --> 
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> 
<!-- DataTables --> 
<link rel="stylesheet" href="dist/css/dataTables.bootstrap.css"> 
<!-- Font Awesome --> 
<link rel="stylesheet" href="font_awesome/css/font-awesome.min.css"> 
<!-- Ionicons --> 
<link rel="stylesheet" href="ionicons/css/ionicons.min.css"> 
<!-- Theme style --> 
<link rel="stylesheet" href="dist/css/AdminLTE.min.css"> 
<!-- AdminLTE Skins. Choose a skin from the css/skins 
    folder instead of downloading all of them to reduce the load. --> 
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css"> 
<!-- Jquery 1.12.0 UI CSS --> 
<link rel="stylesheet" href="plugins/jQuery-ui/1.12.0/Css/jquery-ui.css"/> 
<!-- Date Picker --> 
<link rel="stylesheet" href="plugins/datepicker/datepicker3.css" /> 

</head> 
<% 
    sMonth = Month(Date) 
    sYear = Year(Date) 
%> 

<body class="hold-transition skin-blue sidebar-mini"> 
    <div class="wrapper"> 

    <!-- #include file="include/header.asp" --> 
    <!-- Left side column. contains the logo and sidebar --> 
    <!-- #include file="include/sidebar_tm.asp" --> 

    <!-- Content Wrapper. Contains page content --> 
    <div class="content-wrapper"> 
     <!-- Content Header (Page header) --> 
     <section class="content-header"> 
      <h1>Time Clock Entry </h1> 
     </section> 
     <!-- Main content --> 
     <section class="content"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <div class="box"> 
         <!-- /.box-header --> 
         <div class="box-body "> 
          <form name="form1" class="form-horizontal" action="tmshiftot.asp" method="POST"> 
           <div class="form-group"> 
            <label class="col-sm-2 control-label">Employee ID : </label> 
            <div class="col-sm-3"> 
             <div class="input-group"> 
              <input class="form-control" id="txtID" name="txtID" value="<%=sID%>" maxlength="6"> 
              <span class="input-group-btn"> 
               <a href="#" name="btnSearchID" id="btnSearchID" class="btn btn-default" 
                data-toggle="modal" data-target="#modal-userID"> 
                <i class="fa fa-search"></i> 
               </a> 
              </span> 
             </div> 
            </div> 
            <div class="col-sm-2"> 
             <button type="submit" id="btnShow" name="btnShow" class="btn btn-default" 
              onclick="showContent();return false;" style="width: 90px"> 
              Show</button> 
            </div> 
           </div> 
           <div class="form-group"> 
            <label class="col-sm-2 control-label">Start From : </label> 
            <div class="col-sm-1" style="width:100px"> 
             <div class="input-group"> 
              <select name="selMonth" id="selMonth" class="form-control"> 
               <%For j = 1 to 12 %>               
                <option value="<%=j%>" <%if sMonth = j then%>Selected<%end if%>><%=MonthName(j,true)%></option> 
               <%Next%> 
              </select> 
             </div> 
            </div> 
            <div class="col-sm-2"> 
             <div class="input-group"> 
              <select name="selYear" id="selYear" class="form-control"> 
               <%For i = 1 to 30 
                selyear = Cint(2016) + Cint(i) 
               %> 
                <option value="<%=selyear%>" <%if sYear = selyear then%>Selected<%end if%>><%=selyear%></option> 
               <%Next%> 

              </select> 
             </div> 
            </div> 
           </div> 
          </form> 
          <div id="searchresult"> 
           <!-- CONTENT HERE --> 
          </div> 
         </div> 
         <!-- /.box-body --> 
        </div> 
       </div> 
       <!-- /.col --> 
      </div> 
      <!-- /.row --> 
      <div class="modal fade bd-example-modal-lg" id="modal-userID" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> 
       <div class="modal-dialog modal-lg" role="document"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
           <span aria-hidden="true">&times;</span></button> 
         </div> 
          <div id="userID"> 
           <!--- Content ----> 
          </div> 
        </div> 
       </div> 
      </div> 
      <div class="modal fade" id="modal-shiftotentry"> 
       <div class="modal-dialog"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
           <span aria-hidden="true">&times;</span></button> 
          <h4 class="modal-title">Shift Maintenance Entry</h4> 
         </div> 
         <div class="modal-body"> 
          <div id="shiftotentry"></div> 
         </div> 
        </div> 
       <!-- /.modal-content --> 
       </div> 
       <!-- /.modal-dialog --> 
      </div> 
      <!-- /.modal --> 
     </section> 
     <!-- /.content --> 
    </div> 
    <!-- /.content-wrapper --> 

    <!-- #include file="include/footer.asp" --> 
</div> 
<!-- ./wrapper --> 
<!-- JQuery 2.2.3 Compressed --> 
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script> 
<!-- Bootstrap 3.3.6 --> 
<script src="bootstrap/js/bootstrap.min.js"></script> 
<!-- Jquery 1.12.0 UI --> 
<script src="plugins/jQuery-ui/1.12.0/jquery-ui.js"></script> 
<!-- Jquery for autocomplete --> 
<script src="plugins/jQueryAutoComplete/jquery.ui.autocomplete.scroll.min.js"></script> 
<!-- SlimScroll --> 
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script> 
<!-- FastClick --> 
<script src="plugins/fastclick/fastclick.js"></script> 
<!-- AdminLTE App --> 
<script src="dist/js/app.min.js"></script> 
<!-- datepicker --> 
<script src="plugins/datepicker/bootstrap-datepicker.js"></script> 

<script> 
$(document).ready(function(){ 
    document.getElementById('txtID').focus(); 
    }); 

$(function() { 
    $("#btnShow").click(function() { 
     $("#searchresult").show(); 
    }); 
}); 

</script> 

<script> 
function getValue(svalue) 
    { 
     document.getElementById("txtID").value = svalue; 
     $('#modal-userID').modal('hide'); 
    } 

    $('#modal-userID').on('show.bs.modal', function (event) { 
     var button = $(event.relatedTarget) // Button that triggered the modal 
     var modal = $(this) 
     showDetails('page=1') 
    }) 

function showDetails(str){ 
    var xhttp; 

    xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
     document.getElementById("userID").innerHTML = xhttp.responseText; 
     } 
    }; 

    var search = document.getElementById("txtID"); 
    if (search != null && search != "") 
    { 
     str = str + "&txtEMP_ID=" + search.value; 
    } 

    xhttp.open("GET", "ajax/ax_view_userID.asp?"+str, true); 
    xhttp.send(); 

} 
</script> 

<script> 
function showContent() { 
    var xhttp; 

    xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
     document.getElementById("searchresult").innerHTML = xhttp.responseText; 
     } 
    }; 

    str = "txtEMP_ID=" + document.getElementById("txtID").value; 
    str = str + "&txtMonth=" + document.getElementById("selMonth").value 
    str = str + "&txtYear=" + document.getElementById("selYear").value 
    xhttp.open("GET", "ajax/ax_tmshiftot_info.asp?"+str, true); 
    xhttp.send(); 
} 
</script> 


<script> 
     $('#modal-shiftotentry').on('show.bs.modal', function (event) { 
     var button = $(event.relatedTarget) // Button that triggered the modal 
     var recipient = button.data('sdate') 
     recipient = recipient + "," + button.data('emp_id') 
     var modal = $(this) 
     modal.find('.modal-body input').val(recipient) 
     showDetails2(recipient) 
    }) 

function showDetails2(str){ 
    var xhttp; 

    xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
     document.getElementById("shiftotentry").innerHTML = xhttp.responseText; 
     } 
    }; 

    xhttp.open("GET", "ajax/ax_tmshiftot_entry.asp?txtstring="+str, true); 
    xhttp.send(); 

} 
</script> 
</body> 
</html>

子文件夹中的内容页称为AJAX

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<!-- #include file="../include/connection.asp" --> 
<!-- #include file="../include/proc.asp" --> 
<!-- #include file="../include/option.asp" --> 
<!-- #include file="../include/adovbs.inc" --> 
<!-- #include file="../include/validate.asp" --> 

<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 


</head> 
<body> 
<div class="col-sm-12" style="overflow:auto;padding:0px;margin:0px"> 

<table id="example1" class="table table-bordered table-striped"> 

    <thead> 
     <% 
      response.write "<tr>" 
       response.write "<th>Month</th>" 
       For i = 1 to 31 
        if i < 10 then 
         i = "0" & i 
        end if 
        response.write "<th>" & i & "</th>" 
       next 
      response.write "<tr>"  
     %>    
    </thead> 
    <tbody> 
     <% 
      sURL = "&page=" & PageNo & "&txtEMP_ID=" & sEMP_ID 
      sEMP_ID = request("txtEMP_ID") 
      sBegMonth = CInt(request("txtMonth")) 
      sBegYear = CInt(request("txtYear")) 
      sEndMonth = CInt(sBegMonth) + 12 

      do while sBegMonth <=sEndMonth 

       sMonth = sBegMonth 
       sYear = sBegYear 
       if sMonth > 12 then 
        sMonth = sBegMonth mod 12 
        sYear = sBegYear + 1 
       end if       

       response.write "<tr>" 
       response.write "<td>" & MonthName(sMonth,True) & "</td>" 

        For j = 1 to 31 

         sDate = j & "/" & sMonth & "/" & sYear 

         if IsDate(sDate) then 'Check if the date is valid 
          if weekday(sDate, 1) = 1 then 'Check if it is Sunday 
           response.write "<td bgcolor='#F08080'><a href='#' style='display:block;' data-toggle=""modal"" data-target=""#modal-shiftotentry"" data-emp_id=" & sYear & " data-sdate=" & sDate & ">&nbsp;</a></td>" 
          else 
           response.write "<td><a href='#' style='display:block;' data-toggle=""modal"" data-target=""#modal-shiftotentry"" data-emp_id=" & sYear & " data-sdate=" & sDate & ">&nbsp;</a></td>" 
          end if 
         end if  
        next 
        response.write "</tr>" 

      sBegMonth = sBegMonth + 1 

      loop 
     %>      
    </tbody> 
</table> 
</div> 
</body> 
</html>

模态代码页也子目录阿贾克斯

<!-- #include file="../include/connection.asp" --> 
<!-- #include file="../include/adovbs.inc"--> 
<!-- #include file="../include/proc.asp"--> 

<% 
sMode = request("Mode") 
sString = request("txtstring") 
    if sString <> "" then 
     sSplit = split(sString,",") 
     sDate = sSplit(0) 
     sEMP_ID = sSplit(1) 
    end if 

sModeSub = reqform("sub") 
sShift_Code = reqform("txtShift_Code") 
sID = UCase(reqform("txtEMP_ID")) 
dt_Date = fdate2(reqform("txtdt_date")) 

if sModeSub = "up" then 
    sSQL = "UPDATE TMSHIFTOT SET "    
    sSQL = sSQL & " SHIFT_CODE = '" & sShift_Code & "'," 
    sSQL = sSQL & " WHERE DT_SHIFT = '" & dt_Date & "'" 
    sSQL = sSQL & " AND EMP_ID = '" & sID & "'" 
    conn.execute sSQL 

    call confirmBox("Update Successful!", "tmshiftot.asp") 

elseif sModeSub = "save" then 
    sSQL = "insert into TMSHIFTOT (EMP_ID,DT_SHIFT,SHIFT_CODE,USER_ID,DATETIME) " 
    sSQL = sSQL & "values (" 
    sSQL = sSQL & "'" & sID & "',"  
    sSQL = sSQL & "'" & dt_date & "'," 
    sSQL = sSQL & "'" & sShift_Code & "'," 
    sSQL = sSQL & "'" & session("USERNAME") & "'," 
    sSQL = sSQL & "'" & fdatetime2(Now()) & "'" 
    sSQL = sSQL & ") " 
    conn.execute sSQL 
end if 

Set rstTMSHIFTOT = server.CreateObject("ADODB.RecordSet")  
sSQL = "select * from TMSHIFTOT where DT_SHIFT ='" & fdate2(sDate) & "'" 
rstTMSHIFTOT.Open sSQL, conn, 3, 3 
    if not rstTMSHIFTOT.eof then 
     sShift_Code = rstTMSHIFTOT("SHIFT_CODE") 
    end if 
pCloseTables(rstTMSHIFTOT) 

%> 
<form class="form-horizontal" action="ax_tmshiftot_entry.asp" method="post"> 
<input type="hidden" name="txtEMP_ID" value='<%=sEMP_ID%>' /> 
<div class="modal-body"> 
    <div class="col-sm-12"> 
     <div class="row"> 
      <div class="form-group"> 
       <label class="col-sm-3 control-label">Employee ID : </label> 
       <div class="col-sm-8"> 
        <span class="mod-form-control"><% response.write sEMP_ID %></span> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-sm-3 control-label">Shift Code : </label> 
       <div class="col-sm-8"> 
        <input class="form-control" name="txtShift_Code" value="<%=sShift_Code%>" maxlength="30"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-sm-3 control-label">Dates From : </label> 
       <div class="col-sm-8 col-lg-8"> 
        <div class="input-group"> 
         <input id="dt_From" name="dt_From" value="<%=sDate%>" type="text" class="form-control"> 
         <div class="input-group-addon" style="background-color: gainsboro"> 
          <span><b>To</b></span> 
         </div> 
         <input id="dt_To" name="dt_To" value="<%=dt_To%>" type="text" class="form-control"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="modal-footer"> 
    <div class="col-sm-12"> 
     <%if sMode = "N" then %> 
      <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button> 
      <button type="submit" name="sub" value="up" class="btn btn-info pull-left" style="width: 90px">Update</button> 
     <%else %> 
      <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button> 
      <button type="submit" name="sub" value="save" class="btn btn-primary-left" style="width: 90px">Save</button> 
     <%end if %> 
    </div> 
</div> 
</form> 

<link rel="stylesheet" href="plugins/datepicker/datepicker3.css" /> 
<!-- JQuery 2.2.3 Compressed --> 
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script> 
<!-- Bootstrap 3.3.6 --> 
<script src="bootstrap/js/bootstrap.min.js"></script> 
<!-- datepicker --> 
<script src="plugins/datepicker/bootstrap-datepicker.js"></script> 

<script> 
$(function() { 
    //Date picker 
    $("#dt_From").datepicker({ 
    autoclose: true, format: "dd/mm/yyyy" 
    }).datepicker("setDate", new Date()); 
}); 
</script>

答

基本上将在Showcontent（）

function showContent() { 
    var xhttp; 

    xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
     document.getElementById("content2").innerHTML = xhttp.responseText; 
     $("[data-mask]").inputmask(); 
     $("[date-picker]").datepicker({ 
     format: "dd/mm/yyyy", 
     autoclose: true, 
     }).datepicker("setDate", new Date()); 


     } 
    }; 

    xhttp.open("GET", "ax_test.asp?", true); 
    xhttp.send(); 
} 
</script>

答

您在tmshiftot.asp文件中包含文件的所有路径似乎都基于根文件夹。

但是在MODAL CODE中，您引用了包含文件的父路径（../）。

我在猜测MODAL CODE是在一个子文件夹中，但请记住，如果它是从根文件夹中的脚本包含的，HTML中的相对引用将基于原始脚本URL，而不是包含的脚本的子文件夹。

尝试改变以下行...

<link href="../plugins/datepicker/datepicker3.css" rel="stylesheet" /> 
<!-- JQuery 2.2.3 Compressed --> 
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script> 
<script src="../plugins/datepicker/bootstrap-datepicker.js"></script>

...到...

<link href="plugins/datepicker/datepicker3.css" rel="stylesheet" /> 
<!-- JQuery 2.2.3 Compressed --> 
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script> 
<script src="plugins/datepicker/bootstrap-datepicker.js"></script>

（假设插件文件夹是在根）

更好练习是使用绝对引用。这意味着引用将相对于根文件夹。绝对参考始于/。

你可以用两个ASP做这包括使用的不是文件虚拟：（例如脚本，链接，一，IMG等）

<!-- #include virtual="/include/yourfile.asp" -->

和HTML中的任何引用：

<script src="/folder/filejs"></script>

如果这不是答案，请从网络开发者工具控制台发布任何错误。

+0

喜Johna以下部分，非常感谢你帮我在这里。我已经按照你的建议，并改变了所有的CSS和JS链接。但是模式仍然不会加载。我编辑了我的原始文章，并包含代码和视频以显示我的文件夹结构以及调试过程中的错误。很高兴您的帮助。 –

+0

尝试在每个'script'和'link'的每个路径的开头添加'/'或'/ iqor /'，包含并查看是否有帮助。 – johna

相关推荐