Как отобразить сообщение во всплывающем окне вместо внутреннего html - PullRequest
Новая
       7

Как отобразить сообщение во всплывающем окне вместо внутреннего html

0 голосов
/ 13 февраля 2020

Я хочу отобразить сообщение, которое изменяется в соответствии с проверкой из дБ во всплывающем окне рядом с полем ввода, а не как текст в диапазоне. Я запускаю проверку значения существует, которая вызовет файл jsp из моего html. Он возвращает ожидаемый результат в span в виде текста, но я хочу его во всплывающем окне

Отправка соответствующих кодов ниже. Пожалуйста, помогите

управлять. html

<body>
    <script type="text/javascript">

        function checkExist() {
            var xmlhttp = new XMLHttpRequest();
            var policyname = document.forms["addPolicy"]["policy_name"].value;
            var url = "exist.jsp?policyname=" + policyname;
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    if (xmlhttp.responseText == "\n\n\n\n\nPolicy already exists")
                        document.getElementById("isE").style.color = "red";
                    else
                        document.getElementById("isE").style.color = "blue";
                    document.getElementById("isE").innerHTML = xmlhttp.responseText;
                    var popup = document.getElementById("isE");
                    popup.classList.toggle("show");
                }
            };
            try {
                xmlhttp.open("GET", url, true);
                xmlhttp.send();
            } catch (e) {
                alert("unable to connect to server");
            }
        }

    </script>
    <div class="wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="page-header">
                        <a href="search.html">Search patient</a>
                        <h1>Add New Policy</h1>
                    </div>
                    <!-- calling the java service on submit to save the policy details  -->
                    <form name="addPolicy" action="SavePolicy" method="post">

                        <label>Organization Name: *</label>&emsp;&emsp;&nbsp;&nbsp;<input
                            type="text" list="orglist" name="org" required /></label>
                        <div class="dropdown">
                            <div id="myDropdown" class="dropdown-content">
                                <datalist id="orglist">
                                    <option value="Sagar">
                                    <option value="Appollo">
                                    <option value="Nehru">
                                </datalist>
                            </div>
                        </div>
                        <br> <br> <br> <br> <br> <br> <label
                            style="text-decoration: underline;">Policy Details</label>
                        <div class="policy_details">
                            <label>Policy Name:*</label>&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;
                            <input type="text" name="policy_name" pattern="[A-Za-z]+"
                                placeholder="Enter the policy name"
                                oninput="this.reportValidity();" onblur="checkExist()" required /><br>
                            <span id="isE" class="popuptext"></span><br>
                            <br> <label>Start date of the Policy:*</label>&emsp; <input
                                type="text" name="sop" id="sop" data-date-format='yy-mm-dd'
                                placeholder='yyyy-mm-dd' required readonly /><br> <br>
                            <script type="text/javascript">
                                $(document).ready(function() {
                                    $("#sop").datepicker();
                                });
                            </script>
                            <label>End date of the Policy:*</label>&emsp;&nbsp; <input
                                type="text" name="eop" id="eop" data-date-format='yy-mm-dd'
                                placeholder='yyyy-mm-dd' required readonly />
                            <script type="text/javascript">
                                $(document).ready(function() {
                                    $("#eop").datepicker();
                                });
                            </script>

                        </div>
                        <br> <br> <input type="submit" class="btn btn-primary"
                            value="Save Policy" />&emsp;<input type="reset"
                            class="btn btn-primary" value="Clear" />
                    </form>
                    <br> <a href="ViewPolicy">View Policies</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS

    /* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

1 Ответ

1 голос
/ 13 февраля 2020

Вам необходимо окружить ваш <span></span> каким-то внешним контейнером, например: <div>, чтобы при вызове ajax во всплывающем окне отображался ответ. Как ниже: 

var popup = document.getElementById("isE");
popup.innerHTML = " something";//xmlhttp.responseText
popup.classList.toggle("show");
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* The actual popup */

.popup .popuptext {
  visibility: hidden;
  width: 200px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  
  
  
}


/* Popup arrow */

.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 90%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}


/* Toggle this class - hide and show the popup */

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
<div class="popup">
  <span id="isE" class="popuptext">
    </span>
</div>
...