2017-08-08 1 views
0

Je travaille sur une page de formulaire comportant des zones de sélection multiples recto-verso. La case 1 chargera du serveur toutes les dates disponibles. Lorsque vous double-cliquez ou sélectionnez et cliquez sur>, les options de la boîte 1 se déplaceront vers la case 2. Les options de la boîte 2 seront mises en surbrillance et sélectionnées.
Lors de la sauvegarde, j'ai ajouté no.selected = true dans l'un des codes javascript pour sélectionner toutes les options de la case 2 et l'enregistrer.
Mais lorsque j'entre dans la page en mode édition, j'ai quelques problèmes:
1. Lorsque la page se charge, toutes les options sélectionnées seront chargées et mises en surbrillance dans l'encadré 2. Je dois les présélectionner en ajoutant à nouveau les = 'sélectionné' dans la balise d'option. Cela les maintiendra sélectionnés de sorte que lorsque j'appuierai la mise à jour, je parviendrai à obtenir leurs valeurs et mettre à jour les enregistrements en fonction. 2. Mais lorsque je clique sur le transfert d'une seule option de la boîte 2 à la boîte 1, tout est sélectionné et mis en surbrillance dans les boîtes 1 et 2, est-il possible de ne pas sélectionner les articles dans la boîte? 3. La boîte 2 ne me dérange pas de rester toujours sélectionnée, mais y a-t-il un CSS ou quelque chose pour cacher les surbrillances sélectionnées? 4. Au cours de la sauvegarde et de la mise à jour, j'ai besoin que le serveur parvienne à demander les valeurs de la balise options dans la boîte2. Ce que j'ai fait est de demander toutes les valeurs dans une longue chaîne, et de la diviser et de la sauvegarder. Si les options ne sont pas sélectionnées, je n'arrive pas à obtenir les valeurs. Encore une fois, comment laisser les options restent sélectionnées lors du passage de la boîte 1 à la boîte 2? 5. Double-cliquez une fois et tout sélectionnera dans la case 1? S'il vous plaît voir Double click highlight Box1 issue. 6. Reculer ou transférer de nouveau il mettra en évidence en gris foncé dans la case 1? S'il vous plaît voir Transfer back highlight Box 1 issueProblèmes de mise en surbrillance de plusieurs zones de sélection recto-verso ASP Classic

Pour tous les gourous, s'il vous plaît aidez-moi, merci beaucoup.

<% 
sHOL_ID= request("txtHOL_ID") 
iPage = request("Page") 
sSearch = request("txtSearch") 
sModeSub = request("sub") 

if sHOL_ID <> "" then 
    sID = sHOL_ID 
else 
    sID = UCase(reqForm("txtID")) 
end if 

sName= reqForm("txtName") 

sMainURL = "tmholcal.asp?" 
sAddURL = "txtSearch=" & server.HTMLEncode(sSearch) & "&Page=" & iPage 

if sModeSub = "up" then 
    arr=Split(reqform("ToLB"),",")  

    if Ubound(arr) < 0 then 
     response.write "<script language='javascript'>" 
     response.write "if (confirm(""Emptying the selected box will delete the Holiday Calendar Code"")==0)" 
     response.write " {window.history.back();}" 
     response.write "</script>" 
    end if 

    sSQL = "delete from TMHOL1 where HOL_ID = '" & sID & "'" 
    conn.execute sSQL 

    for j = 0 to Ubound(arr) 

     sDt_Hol = arr(j) 
     j = j + 1 
     sPart = arr(j) 

     sSQL = "insert into tmhol1 (HOL_ID,NAME,DT_HOL,PART,USER_ID,DATETIME) " 
     sSQL = sSQL & "values (" 
     sSQL = sSQL & "'" & pRTIN(sID) & "',"  
     sSQL = sSQL & "'" & pRTIN(sName) & "',"  
     sSQL = sSQL & "'" & fdate2(sDt_Hol) & "',"  
     sSQL = sSQL & "'" & pRTIN(sPart) & "'," 
     sSQL = sSQL & "'" & session("USERNAME") & "'," 
     sSQL = sSQL & "'" & fdatetime2(Now()) & "'" 
     sSQL = sSQL & ") " 
     conn.execute sSQL 
    Next 

     sAddURL = "txtSearch=" & sSearch & "&Page=" & iPage 

    call confirmBox("Update Successful!", sMainURL&sAddURL&"&txtHOL_ID=" & sID & "") 

elseif sModeSub = "save" then 

    if sID = "" then 
     alertbox(" Holiday Calendar Code cannot be empty! ") 
    end if 

    arr=Split(reqform("ToLB"),",")  

    for i = 0 to Ubound(arr) 
     sDt_Hol = arr(i) 
      i = i + 1 
     sPart = arr(i) 

     sSQL = "insert into tmhol1 (HOL_ID,NAME,DT_HOL,PART,USER_ID,DATETIME) " 
     sSQL = sSQL & "values (" 
     sSQL = sSQL & "'" & pRTIN(sID) & "',"  
     sSQL = sSQL & "'" & pRTIN(sName) & "',"  
     sSQL = sSQL & "'" & fdate2(sDt_Hol) & "',"  
     sSQL = sSQL & "'" & pRTIN(sPart) & "'," 
     sSQL = sSQL & "'" & session("USERNAME") & "'," 
     sSQL = sSQL & "'" & fdatetime2(Now()) & "'" 
     sSQL = sSQL & ") " 
     conn.execute sSQL 

     call confirmBox("Save Successful!", sMainURL&sAddURL&"&txtHOL_ID=" & sID & "") 
    next 
end if 

function ShowAvailDates(sParam) 
Set rs=server.CreateObject("ADODB.Recordset") 
sql="Select * from tmhol " 
sql=sql & "order by dt_hol" 
rs.open sql, conn 
if len(sParam) > 0 then 

    do while not rs.eof 

      bflag=true 

      Set rs1=server.CreateObject("ADODB.Recordset") 
      sql="Select * from tmhol1 " 
      sql = sql & " where hol_id = '" & sParam & "'" 
      sql = sql & " order by dt_hol" 
      rs1.open sql, conn 
       do while not rs1.eof 

        if fdate2(rs("DT_HOL")) = fdate2(rs1("DT_HOL")) then 
         bflag= false 
         exit do 
        end if 
        rs1.movenext 
       loop 

      if bflag = true then 
       response.write "<option value='" & rs("DT_HOL") & "," & rs("PART") & "'>" & rs("DT_HOL") & " - " & rs("PART") & "</option>" 
      end if  

     rs.movenext 
    loop 
else 
    do while not rs.eof 

     if year(rs("DT_HOL")) = year(date) then 
      response.write "<option value='" & rs("DT_HOL") & "," & rs("PART") & "'>" & rs("DT_HOL") & " - " & rs("PART") & "</option>" 
     end if 

     rs.movenext 
    loop 
    pCloseTables(rs) 
end if 
end function 

Set rstTMHOL1 = server.CreateObject("ADODB.RecordSet")  
sSQL = "select * from TMHOL1 where HOL_ID ='" & sID & "'" 
rstTMHOL1.Open sSQL, conn, 3, 3 
    if not rstTMHOL1.eof then 
     sName = rstTMHOL1("Name") 
    end if 
%> 

</head> 
<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>Holiday Calendar Details</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="tmholcal_det.asp" method="POST"> 
           <input type="hidden" name="Page" value='<%=iPage%>' /> 
           <div class="form-group"> 
            <label class="col-sm-3 control-label">Holiday Calendar Code : </label> 
            <div class="col-sm-7"> 
             <% if sHOL_ID <> "" then %> 
             <span class="mod-form-control"><% response.write sHOL_ID%> </span> 
             <input type="hidden" id="txtID" name="txtID" value="<%=sHOL_ID%>" /> 
             <%else%> 
             <input class="form-control" id="txtID" name="txtID" value="<%=sID%>" maxlength="30" style="text-transform: uppercase" input-check /> 
             <% end if %> 
            </div> 
           </div> 
           <div class="form-group"> 
            <label class="col-sm-3 control-label">Name : </label> 
            <div class="col-sm-7"> 
             <input class="form-control" id="txtName" name="txtName" value="<%=server.Htmlencode(sName)%>" maxlength="30"> 
            </div> 
           </div> 
           <!--<div class="form-group"> 
            <label class="col-sm-3 control-label">Year : </label> 
            <div class="col-sm-2"> 
             <%if sSHFPAT_ID <> "" then%> 
             <span class="mod-form-control"><% response.write sYear%> </span> 
             <input type="hidden" id="selYear" value="<%=sYear%>" /> 
             <%else%> 
             <select name="selYear" id="selYear" class="form-control"> 
              <%For i = 1 to 34 
                selyear = Cint(2016) + Cint(i) 
              %> 
              <option value="<%=selyear%>" <%if sYear = selyear then%>Selected<%end if%>><%=selyear%></option> 
              <%Next%> 
             </select> 
             <% end if %> 
            </div> 
           </div>--> 
           <div> 
            <table id="example1"> 
             <tbody> 
              <tr> 
               <td width="5%"></td> 
               <td width="20%" style="padding: 7px"><b>Available Dates :</b> 
                <select multiple size="15" style="width: 405px;" name="FromLB" id="FromLB" ondblclick="move(this.form.FromLB,this.form.ToLB)"> 
                 <% 
                  ShowAvailDates(sHOL_ID) 
                 %> 
                </select> 
               </td> 
               <td width="3%" style="padding: 9px" align="center"> 
                <input type="button" class="btn btn-primary" style="width: 50px" onclick="move(this.form.FromLB, this.form.ToLB)" value=" > "> 
                <br> 
                <br> 
                <input type="button" class="btn btn-primary" style="width: 50px" onclick="move(this.form.ToLB, this.form.FromLB)" value=" < "> 
               </td> 
               <td width="30%" style="padding: 11px"><b>Selected : </b> 
                <select multiple size="15" style="width: 405px;" name="ToLB" id="ToLB" ondblclick="move(this.form.ToLB,this.form.FromLB)"> 
                 <% Set rstTMHOL1 = server.CreateObject("ADODB.RecordSet")  
                  sSQL = "select * from TMHOL1 where HOL_ID ='" & sID & "'" 
                  rstTMHOL1.Open sSQL, conn, 3, 3 

                  do while not rstTMHOL1.eof 
                   response.write "<option value='" & rstTMHOL1("DT_HOL") & "," & rstTMHOL1("PART") & "' selected='selected'>" & rstTMHOL1("DT_HOL") & " - " & rstTMHOL1("PART") & "</option>" 
                   rstTMHOL1.movenext 
                  loop 

                 %> 

                </select> 
               </td> 
              </tr> 
             </tbody> 
            </table> 
           </div> 
           <div class="box-footer"> 
            <%if sHOL_ID <> "" then %> 
            <a href="#" data-toggle="modal" data-target="#modal-delholcal" data-hol_id="<%=server.htmlencode(sHOL_ID)%>" 
             class="btn btn-danger pull-left" style="width: 90px">Delete</a> 
             <button type="submit" name="sub" value="up" class="btn btn-info pull-right" style="width: 90px">Update</button> 
            <%else%> 
            <button type="submit" name="sub" value="save" class="btn btn-default pull-right" 
             style="width: 90px"> 
             Save</button> 
            <%end if%> 
           </div> 
          </form> 
         </div> 
         <!-- /.box-body --> 
        </div> 
       </div> 
       <!-- /.col --> 
      </div> 
      <!-- /.row --> 
      <div class="modal fade bd-example-modal-lg" id="modal-delholcal" 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> 
          <h4 class="modal-title" id="exampleModalLabel"></h4> 
         </div> 
         <div class="modal-body"> 
          <div id="del-content"> 
           <!--- Content ----> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </section> 
     <!-- /.content --> 
    </div> 
    <!-- /.content-wrapper --> 

    <!-- #include file="include/footer.asp" --> 
</div> 
<!-- ./wrapper --> 
<!-- input-check --> 
<script src="plugins/Custom/input-check.js"></script> 
<script> 
    $('#modal-delholcal').on('show.bs.modal', function (event) { 
    var button = $(event.relatedTarget) // Button that triggered the modal 
    var hol_id = button.data('hol_id') 
    var modal = $(this) 
    modal.find('.modal-body input').val(hol_id) 
    showDelmodal(hol_id) 
}) 

function showDelmodal(str){ 
    var xhttp; 

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

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

} 
</script> 
<script> 
function move(tbFrom, tbTo) { 
    var arrFrom = new Array(); var arrTo = new Array(); 
    var arrLU = new Array(); 
    var i; 
    for (i = 0; i < tbTo.options.length; i++) { 
     arrLU[tbTo.options[i].text] = tbTo.options[i].value; 
     arrTo[i] = tbTo.options[i].text; 
    } 
    var fLength = 0; 
    var tLength = arrTo.length; 
    for(i = 0; i < tbFrom.options.length; i++) { 
     arrLU[tbFrom.options[i].text] = tbFrom.options[i].value; 
     if (tbFrom.options[i].selected && tbFrom.options[i].value != "") { 
      arrTo[tLength] = tbFrom.options[i].text; 
      tLength++; 
     } else { 
      arrFrom[fLength] = tbFrom.options[i].text; 
      fLength++; 
     } 
    } 

    tbFrom.length = 0; 
    tbTo.length = 0; 
    var ii; 

    for(ii = 0; ii < arrFrom.length; ii++) { 
     var no = new Option(); 
     no.value = arrLU[arrFrom[ii]]; 
     no.text = arrFrom[ii]; 
     no.selected = true; 
     tbFrom[ii] = no; 

    } 

    for(ii = 0; ii < arrTo.length; ii++) { 
     var no = new Option(); 
     no.value = arrLU[arrTo[ii]]; 
     no.text = arrTo[ii]; 
     no.selected = true; // I enable it because when 
     tbTo[ii] = no; 
    } 
} 
</script> 
</body> 

Répondre

0

Fondamentalement, j'ai eu le flux faux. Je devrais supprimer toutes les no.selected = true dans le code javascript et ajouter ce qui suit Jquery

$(document).ready(function() { 
    $('#btnUp').click(function() { 
    $('#ToLB').each(function() { 
     $('#ToLB option').attr("selected", "selected"); 
     }); 
    }); 
}); 

$(document).ready(function() { 
    $('#btnSave').click(function() { 
    $('#ToLB').each(function() { 
     $('#ToLB option').attr("selected", "selected"); 
     }); 
    }); 
}); 

Fondamentalement, le Jquery sélectionnera toutes les options lorsque btnSave ou btnUpdate cliquez dessus. Par conséquent, le serveur parviendra à récupérer les valeurs des étiquettes d'option.