综合编程

JQuery: cache div on page load, on submit show div without page refreshing

MVC project: I have a search page with a submit button, on submit: it posts the query string to the controller to perform the search and brings back the results to the view as a list of items in a table on the same page. This is why I have the table and the submit button in the same view. So when the user first opens the search page, he gets a textbox and a button but ALSO a table with all the data from the database, after submit, it returns only the relevant results. I want to do the following: When the user first opens the page, he would only get the textbox and the search button. Then on submit the page will refresh and show the user the textbox, search button and the data table. There are some jquery functions depending on this data table I tried doing this through partial views, but jquery functions dont work in ascx. I tried using jquery to hide the table on load but then show it on submit, but after i submit the whole page is refreshed so the table is hidden again. Here’s a part of the code in index.aspx:

> < script type="text/javascript">
$(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);
       });
   });

> < / script> > < form action="Index.aspx" method="post"> Enter your search:

< input type="text" id="query" name="query" /> < input type="text" id="text1" name="text1"/> < input type="submit" value="Search" /> close form tag
table id="listtable"  % For Each item In Model% // loops through the list of data in the database that are relevant  table close tag

I don’t know if that’s clear enough. I can’t figure out how to do it, so on the first time the user opens the search page, he/she won’t see that table. And only see it after submitting the search query. Can it be done? if yes, can it be done without use of ajax coz i really don’t understand it!

You can use AJAX to submit the form so on submit the page will not refresh and things will work as expected.

$(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);
   });
});
阅读原文...

Hello, buddy!

CSS: Absolutely positioned pseudo element loses z-index?

上一篇

Cosmos最有意思的不是跨链 而是替代闪电网络?

下一篇

您也可能喜欢

评论已经被关闭。

插入图片
JQuery&colon; cache div on page load&comma; on submit show div without page refreshing

长按储存图像,分享给朋友