2016-06-30 2 views
-1

Ich habe diese Funktion und HTML-Datei:Call a JavaScript-Funktion von HTML funktioniert nicht

<%@page contentType="text/html" pageEncoding="UTF-8"%> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%> 
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> 

<html> 

    <head> 

     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" > 
      <link href="resources/css/stiylesheet1.css" rel="stylesheet" media="screen"> 
      <link href="resources/css/printStyle.css" rel="stylesheet" media="print"> 
     <title></title> 

     <script type="text/javascript"> 

    window.onload = function() { 

    document.getElementById("cancelSubSubjectDialog").addEventListener('click', function(e) { 
      e.preventDefault(); 

      document.getElementById("addSubSubjectDialog").close(); 
      }); 
    document.getElementById("saveSubSubjectDialog").addEventListener('click', function(e) { 
      e.preventDefault(); 
      document.getElementById("addSubSubjectDialog").close(); 
      }); 

    document.getElementById("cancelSubjectDialog").addEventListener('click', function(e) { 
      e.preventDefault(); 

      document.getElementById("addSubjectDialog").close(); 
      }); 
    document.getElementById("saveSubjectDialog").addEventListener('click', function(e) { 
     e.preventDefault(); 
     document.getElementById("addSubjectDialog").close(); 
     }); 

     } 

    function updateSubSubject(param) 
    { 
     selectList(); 
     document.getElementById("addSubSubjectDialog").showModal(); 
     document.getElementById("Departments_Select").value=param; 

    } 
    function selectList(){ 
    var selectDepartment=document.getElementById("Departments_Select"); 
    var selectSubjects=document.getElementById("Subjects_Select"); 
    var departmentsArray =getList("departments"); 
    var subjectsArray= getList("subjects"); 
    for (var i = 0; i < departmentsArray.length; i++) { 

     var departmentsOption = document.createElement("option"); 
     departmentsOption.value = departmentsArray[i]; 
     departmentsOption.text = departmentsArray[i]; 
     departmentsOption.name = departmentsArray[i]; 
     selectDepartment.appendChild(departmentsOption); 
    } 
for (var i = 0; i < subjectsArray.length; i++) { 

     var subjectsOption = document.createElement("option"); 
     subjectsOption.value = subjectsArray[i]; 
     subjectsOption.text = subjectsArray[i]; 
     subjectsOption.name = subjectsArray[i]; 
     selectSubjects.appendChild(subjectsOption); 
    } 
    } 
    </script> 

    </head> 

<body class="grad" style="font-family: 'Open Sans', sans-serif;"> 
    <div class="header" 
     style="height: 100px; background-image: url(resources/images/streep_green.gif); margin: 0px;"> 
    </div> 

    </div> 


    <div align="center" class="main" 
     style="background-image: url(resources/images/final_background.gif); background-repeat: repeat-x; margin: 0"> 

     <div class="main" 
      style="background-image: url(resources/images/final_background.gif); background-repeat: repeat-x; margin: 0"> 



     <div class="searchDiv" style="margin-top:5%;width:50%;overflow-y: scroll;overflow-x: hidden; height:500px" > 
     <form:form method="post" modelAttribute="sub_subjects"> 
      <table dir="rtl" class="table" > 

       <th><label style="float:right;"><fmt:message key="subjectName" /></label></th> 
       <th><label style="float:right;"><fmt:message key="subSubjectName"/></label></th> 
       <th><label style="float:right;"><fmt:message key="department" /></label></th> 

       <c:forEach items="${sub_subjects.sub_subjects_list}" var="subsubject" varStatus="status" > 
       <tr id="tr"> 

        <td ><form:hidden path="" name="sub_subjects_list[${status.index}].subjectObj.view" value="${subsubject.subjectObj.view}"/>${subsubject.subjectObj.view}</td> 
        <td ><form:hidden path="" name="sub_subjects_list[${status.index}].description" value="${subsubject.description}"/>${subsubject.description}</td> 
        <td ><form:hidden path="" name="sub_subjects_list[${status.index}].departmentObj.inCurrentLanguage" value="${subsubject.departmentObj.inCurrentLanguage}"/>${subsubject.departmentObj.inCurrentLanguage}</td> 

        <td > 
         <input id="editSubSubject" onClick="updateSubSubject("this is the text")" style="width:30%; height: 80%;" type="button"> </input>     
        </td> 
       </tr> 
       </c:forEach>       
      </table> 
     <br/> 
     </div> 
     </form:form> 
    </div> 
</div> 
</div> 
</div> 
</div> 
    <dialog id="addSubSubjectDialog" style="width:25%; height:35%;"> 
     <div style="width:100%; hegit:20%;"><h2 style="font-size:100%;"><fmt:message key="add_sub_subject_dialog_title" /></h2></div> 
      <form action="addSubSubject" method="post" > 
     <div style="width:100%; hegit:20%;"> 

      <h2 style="font-size:100%;"><input id="subSubjectName" name="subSubjectName" style="font-size:100%;text-align: right;"></input> <fmt:message key="insert_sub_subject_name" /> </h2> 

     </div> 
     <div style="width:100%; hegit:20%;"> 

      <h2 style="font-size:100%; "> 
        <h2 style="float:right; width: 20%; font-size: 100%;"> 
             <fmt:message key="select_subject" /> </h2> 
        <select id="Subjects_Select" name="Subjects_Select" class="form-control" style="width: 50%; text-align:right; float:right;"> </select> 

      </h2> 

     </div> 
     <div style="width:100%; hegit:20%; margin-top: 15%;"> 

       <h2 style="font-size:100%;"> 
         <h2 style="float:right; width: 20%; font-size: 100%;"> <fmt:message key="select_department" /></h2> 
        <select id="Departments_Select" name="Departments_Select" class="form-control" style="width: 50%;text-align:right;float:right; "> </select> 

       </h2> 
     </div> 

     <div style="height: 60px;margin-top:30% ;"> 

      <fmt:message key="save" var="save"/> 
      <input type="submit" class="btn btn-success" style=" float: left; width:40%; "value="${save}"></input> 
      <button id="cancelSubSubjectDialog" class="btn btn-warning" style="float: right; width: 40%;" ><fmt:message key="cancel" /></button> 
     </form> 
     </div> 
     </dialog> 
</body> 

<script type="text/javascript"> 

       function getList(listName){ 
        var ListFromDB = []; 
        if(listName=="departments") 
         { 
          <c:forEach items="${departmentsList}" var="listItem"> 
          ListFromDB.push("<c:out value="${listItem.inCurrentLanguage}"/>"); 

          </c:forEach> 
         } 
        else if(listName=="subjects") 
        { 
         <c:forEach items="${subjectsList}" var="listItem"> 
         ListFromDB.push("<c:out value="${listItem.description}"/>"); 

         </c:forEach> 
        } 

       return ListFromDB; 
      } 
      </script> 
</html> 

Das Problem ist, dass, wenn ich diese HTML-Datei ausführen und klicken Sie auf „editSubSubject“ -Taste nichts passiert. Die JavaScript-Funktion wird nicht aufgerufen. Wenn ich die Parameter dieser Funktion entferne und sie wie folgt aufrufe: onClick = "updateSubSubject()" funktioniert es einwandfrei und öffnet den Dialog,

Was ist falsch in meinem Code?

Antwort

2

Sie sind auf der Flucht hier Ihre doppelten Anführungszeichen, die den Fehler verursacht:

onClick="updateSubSubject("this is the text")" 

Sie müssen entweder die doppelten Anführungszeichen entkommen (mit &quot;) oder einfachen Anführungszeichen verwenden:

onClick="updateSubSubject('this is the text')" 
+0

Wie kann Ich mache das, wenn ich ein Objekt oder eine Zeichenfolge senden möchte, die ein Teil eines Objekts wie folgt ist: myObj.myString Ich mache sowas wie dieses, aber es funktioniert nicht .. Ich muss nicht hinzufügen, weil es String myObj sein wird .myString ', Wie kann ich das machen? – user6319790

+0

@ user6319790 Nein, das ist nicht der Fall, sonst wäre es der Text "myObj.myString" 'und nicht der Wert" myObj.myString ". Sie können einfach 'updateSubSubject (myObj.myString)'. –

+0

Ok das ist das Problem, dass updateSubSubject (myObj.myString) nicht funktioniert .... die Übersetzung von diesem bei der Verwendung von F12 ist updateSubSubject (myObj.myString) und nicht der Wert von myObj.myString ... Was kann ich tun? – user6319790