JQuery: скрыть div при загрузке страницы, при отправке show div без обновления страницы

Question

Проект MVC: у меня есть страница поиска с кнопкой отправки при отправке: она отправляет строку запроса в контроллер для выполнения поиска и возвращает результаты в представление в виде списка элементов в таблице на том жестр.Вот почему у меня есть таблица и кнопка отправки в одном представлении.Поэтому, когда пользователь впервые открывает страницу поиска, он получает текстовое поле и кнопку, но ТАКЖЕ таблицу со всеми данными из базы данных, после отправки он возвращает только релевантные результаты.Я хочу сделать следующее: когда пользователь впервые открывает страницу, он получает только текстовое поле и кнопку поиска.Затем при отправке страница обновится и покажет пользователю текстовое поле, кнопку поиска и таблицу данных.В зависимости от этой таблицы данных существуют некоторые функции jquery. Я пытался сделать это с помощью частичных представлений, но функции jquery не работают в ascx.Я попытался с помощью jquery скрыть таблицу при загрузке, но затем показать ее при отправке, но после отправки вся страница обновляется, поэтому таблица снова скрывается.Вот часть кода в index.aspx:

>

   $(document).ready(function () {
       $("form").submit(function (e) {
       });
       $("#listtable tr td:first-child").click(function () {
           $("#text1").val(this.innerHTML);
           alert("You have chosen Account Number " + this.innerHTML);
       });
   });

> > Введите свой поиск:

закрыть тег формы

table id = "listtable"
% Для каждого элемента в модели% // просматривает список данных в базе данных, которые имеют отношение
тег закрытия таблицы

Я не знаю, достаточно ли это ясно.Я не могу понять, как это сделать, поэтому в первый раз, когда пользователь открывает страницу поиска, он не видит эту таблицу.И увидеть это только после отправки поискового запроса.Это можно сделать?если да, то можно ли это сделать без использования ajax, потому что я действительно не понимаю этого!

Answer 1

Вы можете использовать AJAX для отправки формы, чтобы при отправке страница не обновлялась и все работало должным образом.

$(document).ready(function () {
       $("form").submit(function (e) {
             $.get('../ajax_index.aspx',{

                               /*add parameters here*/


                     },function(){
                   /* after the submit .....*/
                   /*Here you can use load() to add new content*/
                   $('#listtable').load('/your/ajax.url', {query: $('#my_input').val()});
               });
       });
      $("#listtable tr td:first-child").click(function () {
       $("#text1").val($(this).innerHTML);
       alert("You have chosen Account Number " + this.innerHTML);
   });
});

Answer 2

Что ж, прятки довольно просты.Вы захотите дать все идентификаторы этих элементов, чтобы упростить таргетинг:

$(function(){ 
    $("#listtable").hide();
    $("#my_form).submit(function(){ $("#listtable").show(); return false; }
}

Теперь для того, чтобы сделать что-то полезное, потребуется перезагрузка страницы, в этом случае вам не нужен jQueryизменение страницы вообще или Ajax, что, вероятно, то, что вы после.Вы можете посмотреть на что-то вроде .load () .Используя этот метод, вы можете легко загрузить результаты вызова Ajax в целевой элемент.Обратите особое внимание на аргумент data.Это просто объект пар «ключ-значение» данных для передачи.Таким образом, вы можете сделать что-то вроде:

$('#listtable').load('/my/ajax.url', {query: $('#my_input').val()});

HTH