Note that there are some explanatory texts on larger screens.

plurals
  1. POLoad DataGrid based on an input by using AJAX and jQuery
    text
    copied!<p>This issue has been nagging at me for days now. Here's the situation:</p> <p>I have a <code>DataGrid</code> that has no data loaded into it. I also have a <code>Input Text</code> that uses <em>AJAX</em> and <em>jQuery</em> to show an existing list of values that a user can choose from as they type. This is a search system that will pull up all the records based on what the user has input. I then have an <code>Input Button</code> that needs to populate the <code>DataGrid</code> when pressed. What I need <em>AJAX</em> for is to refresh that <code>DataGrid</code> every time the button is pressed without refreshing the entire page, hence an input instead of an asp. My problem is getting the <em>JavaScript</em>/*jQuery* to call the method that will be used. I also need it to get the value of the <code>InputText</code> and use that for the search. Here is what I have so far (incomplete; need help completing).</p> <p><strong>DataGrid</strong> (This was copied from another <code>DataGrid</code> using the same data, just shortened. Probably isn't coded right.)</p> <pre><code>&lt;asp:DataGrid ID="Display" AutoGenerateColumns="false" ViewStateMode="Disabled" runat="server"&gt; &lt;Columns&gt; &lt;asp:TemplateColumn&gt; &lt;HeaderTemplate&gt; Line&lt;/HeaderTemplate&gt; &lt;ItemTemplate&gt; &lt;asp:Label ID="LineNumber" Text='&lt;%# DataBinder.Eval(Container.DataItem, "LineNumber") %&gt;' runat="server" /&gt;&lt;/ItemTemplate&gt; &lt;/asp:TemplateColumn&gt; &lt;asp:TemplateColumn&gt; &lt;HeaderTemplate&gt; Date&lt;/HeaderTemplate&gt; &lt;ItemTemplate&gt; &lt;asp:Label ID="CreateDate" Text='&lt;%# DataBinder.Eval(Container.DataItem, "CreateDate", "{0: MM/dd/yyyy}") %&gt;' runat="server" /&gt;&lt;/ItemTemplate&gt; &lt;/asp:TemplateColumn&gt; &lt;asp:TemplateColumn&gt; &lt;HeaderTemplate&gt; Operator&lt;/HeaderTemplate&gt; &lt;ItemTemplate&gt; &lt;asp:Label ID="Operator" Text='&lt;%# DataBinder.Eval(Container.DataItem, "Operator") %&gt;' runat="server" /&gt;&lt;/ItemTemplate&gt; &lt;/asp:TemplateColumn&gt; &lt;/Columns&gt; &lt;/asp:DataGrid&gt; </code></pre> <p><strong>JavaScript/jQuery</strong> (This is placed on the <code>Button</code>'s "onclick".)</p> <pre><code>function refresh() { $.ajax({ type: "POST", url: "WebForm1.aspx/PopulateGrid", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", error: function (result) { alert(result.status + ' ' + result.statusText); } } ); }; </code></pre> <p><strong>Code Behind</strong> (I want to try and use the code behind but if a Handler is needed, please let me know.)</p> <pre><code>[WebMethod] protected void PopulateGrid() { using (Entities ent = new Entities(ConfigurationManager.ConnectionStrings["QCConnString"].ToString())) { string oper = Request.QueryString["getData"].ToString(); AllDataSources ds = new AllDataSources(); Display.DataSource = ds.refreshData(ent, oper); Display.DataBind(); } } </code></pre> <p>I will update this as I get closer to the answer or have come to a solution. I really hope someone can help me solve this issue. I've struggled for so long.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload