Скрытие определенных строк в таблице до тех пор, пока не будет завершен запрос Ajax.

-2

У меня есть определенные строки в таблице HTML, которые я не хочу отображать при загрузке страницы. После загрузки страницы будет выполнен запрос Ajax, который возвращает значения, которые заполнят строки таблицы. Итак, я хотел бы отображать эти строки только после возвращения Ajax с ответом, и до тех пор я хочу отображать сообщение «загрузка» вместо этих строк. Я попытался добавить эти строки в div и использовать jQuery show()/hide() соответственно, но это не сработало. Я новичок в JS и jQuery, поэтому любая помощь приветствуется.Скрытие определенных строк в таблице до тех пор, пока не будет завершен запрос Ajax.

<html> 
    <body onload="my_ajax_func()"> 
    <table> 
    . 
    . <!-- Other rows that will be displayed--> 
    . 
    <tr> 
     <th colspan=2 class="custHeader">High Value Flags</th> 
    </tr> 
    <tr> 
     <td align=right><div id="loading_msg"><b>Loading..</b></div></td> 
    </tr> 
    <tr> 
     <td id="val_header" class=caption>Value Tier:&nbsp;</td><td id="val"> </td> 
    </tr> 
    <tr> 
     <td id="hypo_val_header" class=caption>Hypo Value Tier:&nbsp;</td><td id="hypo_val"> </td> 
    </tr> 
    <tr> 
     <td id="service_type_header" class=caption>Service Type:&nbsp;</td><td id="service_type"></td> 
    </tr> 
</table> 
</body> 

<script> 
function my_ajax_func() { 
    //retrieves values for table rows 
    //on success calls another func, say display_data 
} 
function display_data() { 
    $("loading_msg").hide(); 
document.getElementById("val").innerHTML = <some_value>; 
document.getElementById("hypo_val").innerHTML = <some_value>; 
document.getElementById("service_type").innerHTML = <some_value>; 
} 
</script> 
</html>

В принципе, я хочу, чтобы div для сообщения «загрузка», которое будет отображаться по умолчанию. После успешного завершения Ajax-запроса этот div должен быть скрыт, а другой div (с этими двумя строками таблицы) должен отображаться на своем месте.

источник

2015-05-15 Tcl_newbie

Пожалуйста, предоставьте свой код, чтобы мы могли вам помочь. – Ted

@Ted: Редактировал вопрос, добавив код –

Чтобы скрыть строки на странице загрузки, просто создать два класса CSS, как это:

.displayNone{ 
    display:none; 
} 

.displayBlock{ 
    display:block; 
}

и использовать этот класс в своих рядах

<tr class="displayNone"></tr>

Итак, когда страница загружается, эти строки будут скрытый.

Так, в Ajax успеха поставить это Js:

$(".displayNone").removeClass("displayNone").addClass("displayHidden");

Затем скачать некоторые загрузки GIF изображения, как это:

http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif

После этого обернуть этот IMG тег в DIV с «displayNone «класс тоже, и используйте обратный путь для ваших строк:

Перед вызовом ajax удалите из него класс« displayNone »и поставьте« displayBlock ».

Наконец, в случае успеха ajax удалите класс displayBlock из div и верните «displayNone», чтобы скрыть его снова.

Надеюсь, что это поможет.

Некоторые сомнения, пожалуйста, дайте мне знать.

С уважением

источник

2015-05-15 17:20:48

вы можете использовать .done() метод

$.post("example.php", function() { 
    alert("success"); 
}) 
    .done(function() { 
    alert("ajax request completed"); 
    })

источник

2015-05-15 17:15:04

Если вам нужно изменить только текстовые значения в строках, вы могли бы уйти с классом значением «отображения: ни один» в CSS для каждой полной строки, пока вы не будете готовы ее обновить. Но вам нужно будет иметь уникальный идентификатор для каждого или способ подсчета детей, чтобы снова найти эту строку, когда вам нужно ее обновить. Кроме того, ваша таблица должна быть действительной без этих строк.

Другим способом справиться с этим было бы просто добавить новые строки динамически. Если вы это сделаете, помните, что строки не существуют в DOM, пока вы не вставляете их там, и поэтому вы не можете ссылаться на них раньше.

источник

2015-05-15 17:15:22 ColdSharper

как упоминалось выше AJAX имеет некоторые методы, как раньше, и сделано, где у вас есть возможность показать и скрыть свои элементы.

<table> 
    <thead> 
    <tr><th>header 1</th><th>header2</th><th>header3</th><tr> 
    <tr id="loadingrow"><th colspan=3>Loading Data...</th><tr> 
    </thead> 
    <tbody>.... 
$.ajax({ 
url: "http://fdafdas", 
beforeSend: function() { 
    $('#loadingrow').show(); 
} 
}) 
.done(function(data) { 
$('#loadingrow').hide(); 

//load your data 
} 
});

источник

2015-05-15 17:24:19

Скрытие определенных строк в таблице до тех пор, пока не будет завершен запрос Ajax.

ответ

Смежные вопросы