How to hide the table until a string is searched?

Question

I'm currently interning as part of my school course at a small tech company and one of the projects I'm working on right now is making a web application with MVC.

The manager gave me a SQL database to work with and I've been following this tutorial by Microsoft here to help me build the web app.

Now, the specific thing the manager wants me to do is hiding the table when someone loads the page and when a string is submitted into the search bar, the relevant information in the table matching the string shows up.

I've been looking everywhere, including SO how to do this for a few days now, no matter what code I try it doesn't seem to work! I've been trying different things using HTML and JS, following some examples posted here, I just can't figure out how to do it, the table flashes for a second when I click the search button, I think it's the page refreshing but why?

Here's my controller with the searchBar

 public ActionResult Index(string searchString)
{
    ViewBag.NameSortParm = String.IsNullOrEmpty    (searchString) ? "name_prmrnm" : "";
    var person = from p in db.persons
                 select p;
    if (!String.IsNullOrEmpty(searchString))
    {
        person = person.Where(s => s.name.Contains(searchString));     
    }

    return View(person.ToList());
}

Here's my javascript in the View:

<script type="text/javascript">
    function escondeTable(){
        var hideTab = document.getElementById("table-class");
        if (hideTab.style.display == 'none') {
            hideTab.style.display = '';
        }
    else {
            hideTab.style.display == 'none'
        }
    }
</script>

And here's my form:

<form action="/people/Index" method="post" onsubmit="escondeTable()">
        <p class="barraProc">
            @Html.TextBox("searchString", "", new { placeholder = "Insira um nome..." })
            <input type="button" value="Procurar">
        </p>
    </form>

Can anyone tell me what I could be using or doing?

You're submitting the form when you click the button (change the button from type="submit" to type="button") If you do want to submit the form and update the page then you're going to need to use Ajax, rather than a postback. — Reinstate Monica Cellio, Apr 13 '18 at 14:04
@Archer Thank you, that's good to know! Is Ajax necessary for a web application in MVC? I mean aside from this problem I'm having. Fixed up my code a little. — worseIntern, Apr 13 '18 at 14:20
I'm not an MVC developer so can't say if there's a better approach than Ajax, but the submit button will definitely cause the page reload, so you'd lose the style change you made. — Reinstate Monica Cellio, Apr 13 '18 at 14:21

score 0 · Accepted Answer · answered Apr 13 '18 at 14:31

0

You have to use Ajax call. And one option then is this

$( document ).ajaxStart(function() {
 var hideTab = document.getElementById("table-class");
 hideTab.hide();
 });

$( document ).ajaxStop(function() {
var hideTab = document.getElementById("table-class");
hideTab.show();
 });

answered Apr 13 '18 at 14:31

Jordi Jordi

461
3
10

I can't get this to work either ): Thank you for the help Jordi! – worseIntern Apr 13 '18 at 14:57
you have to call with ajax , search information about $.ajax or $.post, and later you can use both functions i have writted you like a solution of: hidden a table while searching.. (you need ajax no form submitted) – Jordi Jordi Apr 13 '18 at 16:06
Jordi, I just wanted to say thank you again, your answer (and Babevski's) put me on the right track to figuring out my problem :) – worseIntern Apr 16 '18 at 15:05

Ivan · Answer 2 · 2018-04-13T15:01:38.187

0

May I suggest a proper approach?

I'd stay away from forms, because they cause a lot of headaches. Just use regular inputs and event listeners.

Also, I'd use a RESTful API, i.e. avoiding a POST method, and using a GET method to get the table data from the backend.

The API should serve the data on this URL localhost/search/critieria, where the user supplies the criteria.

You can render the table in the following way:

fetch("http://localhost/search/" + criteria)
.then((res) => res.json())
.then((data) => {
    generateTable(data);
})
.catch((err) => err);

Here is a quick demo I made: https://jsfiddle.net/hwtgeo36/7/

You insert a number, and it returns a Star Wars character from a server (ex. 1 = Luke Skywalker). You can use the same logic with your own server.

Also, you would render your table here, instead of my example that replaces some html.

If you have troubles with this, please write back.

edited Apr 13 '18 at 15:01

answered Apr 13 '18 at 14:44

Ivan

1,967
4
34
60

I think my problem is that I dove head first into this Project and immediately started following tutorials and things wthout really studying them properly, like I have NO idea what some of the things you said mean. I have a lot of studying and research to do. But, thank you for the suggestion, I'm taking notes from all the answers I'm getting :) – worseIntern Apr 13 '18 at 14:59
@worseIntern Trust me, it's easy. I've been where you are. I'm a self taught developer with a business degree. If I could've learnt it, so can you. You can google the things I mentioned, or you can ask me what is unclear. – Ivan Apr 13 '18 at 15:00
Thank you for these words, I'm really enjoying this project, especially the web design aspects, I'm slowly making my way to it ^^ – worseIntern Apr 13 '18 at 15:36

How to hide the table until a string is searched?

2 Answers2