Блог

Главная - Вопросы по программированию - очистить div в javascript

очистить div в javascript

#javascript #jquery

Вопрос:

я новичок в разработке javascript и столкнулся с проблемой: в зависимости от выбранного параметра в форме я хочу сначала очистить внутреннюю часть div, а затем заполнить ее другим контентом с помощью ajax. Это мой текущий код:

 $(document).on('change','#uebungsart', function() {
    var div = document.getElementById('zusatz-uebung');
    while(div.firstChild) {
        div.removeChild(div.firstChild);
    }
});
 
$( document ).ready(function() {
    if(document.getElementById('uebungsart').value == "bet") {  
    $.ajax({  
            type: 'POST',  
            url: 'helper/javascript-loadings/addOMT.php', 
            success: function(response) {
                $("#zusatz-uebung").html(response);   
            }
        });
    }

    if(document.getElementById('uebungsart').value == "omt") {
    $.ajax({  
            type: 'POST',  
            url: 'helper/javascript-loadings/addBET.php', 
            success: function(response) {
                $("#zusatz-uebung").html(response);
                }
            });
    }      
});

К сожалению, это не работает… Может кто-нибудь мне помочь? 🙂

с наилучшими пожеланиями, Флориан

Комментарии:

1. как именно это не работает? Какую ошибку / неожиданное поведение вы видите? Вы понимаете, как подробно отлаживать свой код? Вам нужно будет более подробно рассказать о проблеме, прежде чем мы сможем оказать вам большую помощь.

2. Однако я вижу, что вы запускаете AJAX сразу же после загрузки вашей страницы (если выполняется одно из условий), но не при изменении выбора в вашей форме

3. Кроме того, ваш код представляет собой странное сочетание jQuery и стандартного синтаксиса JavaScript. Как правило, лучше выбрать один стиль и придерживаться его, это делает ваш код намного более читабельным. Если вы собираетесь использовать jQuery для манипуляций с DOM, то имеет смысл использовать jQuery везде, где вы можете. Если вы не собираетесь использовать jQuery, то полностью избегайте его.

4. Эти два фрагмента должны быть объединены. Вам понадобятся операторы if внутри события изменения, иначе при изменении параметра select ajax не будет запущен.

5. с моим опубликованным кодом он не очистил div ответа, поэтому каждый раз отображалось одно и то же содержимое. Но с вашими подсказками я отредактировал свой код, так что теперь все работает нормально. Большое спасибо!

Ответ №1:

Спасибо вам, ребята, за ваши подсказки, я отредактировал свой код следующим образом:

 $(document).on('change','#uebungsart', function() {
           document.getElementById('zusatz-uebung').innerHTML = "";
            if(document.getElementById('uebungsart').value == "bet") {
                $.ajax({  
                    type: 'POST',  
                    url: 'helper/javascript-loadings/addOMT.php', 
                    success: function(response) {            
                        $("#zusatz-uebung").html(response);
                        }
                });
            }

            if(document.getElementById('uebungsart').value == "omt") {
                $.ajax({  
                    type: 'POST',  
                    url: 'helper/javascript-loadings/addBET.php', 
                    success: function(response) {
                        $("#zusatz-uebung").html(response);
                        }
                    });
                }
        });

Теперь он правильно очищает содержимое response-div и загружает ответ обоих php-скриптов в зависимости от выбранной опции

Ответ №2:

Попробуйте это:

 <form action="">
 <label for="fname">DATA:</label>
 <input type="text" id="fname" name="fname" onkeyup="datawithquery(this.value)">
</form>
<p>User: <span id="show"></span></p>

function datawithquery(id) {
  if (id.length == 0) {
  document.getElementById("fname").placeholder = "none data";
return;
}
else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 amp;amp; this.status == 200) {
    document.getElementById("show").innerHTML = this.responseText;
  }
}
xmlhttp.open("POST", "helper/javascript-loadings/addBET.php?q=" id, true);
xmlhttp.send();

}
}

Метки: